ユーザーインターフェイスのデザインには、魅力的でユーザーフレンドリーな体験を作成するために、形状やシンボルを使用することがよく必要です。このチュートリアルでは、Adobe XDで自分で形状を作成し、対称的に利用してデザインをより効率的にする方法を学びます。プロジェクトで何度も再利用できるさまざまなアイコンやシンボルを迅速に作成するための基本的なツールの使い方について話します。
重要な知見
- シンボルと形状は直接Adobe XDで作成またはインポートできます。
- パスファインダーツールを使用することで、複雑な形状を作成するためにラインを効率的に接続できます。
- シンボルは、何度も必要とされるオブジェクトに使用して、時間を節約し、一貫性を確保するべきです。
ステップバイステップガイド
1. グリッドを有効にして線ツールで開始
形状の作成を開始するには、まず作業エリアをズームインしてグリッドを有効にします。グリッドは要素を正確に整列させるのに役立ちます。線ツールを使用すると、すでに多くのことを達成できます。それをクリックし、Shiftキーを押し続けて直線を引きます。
2. パスファインダーで矢印を作成
描いたラインのサイズを同じに調整できます。パスファインダー工具を使用するために引いたすべてのラインを選択します。「追加」機能を使って、ラインを一つの矢印に結合します。角が鋭すぎる場合は、丸みのある角のオプションを有効にします。
3. ハンバーガーアイコンの作成
ハンバーガーアイコンのために、まず特定の太さのラインを引きます。次に、リピートグリッドを選択して、アイコンのために3本の線を作成するために2本のラインを追加します。最後に、アイコンを安定させるためにラインをグループ化します。
4. 創造的な形状のためのパスツールの使用
今、私たちはパスツールを使用して、より創造的な形状を作成します。円を描き、その後パスファインダーを使用していくつかの追加アンカーポイントを追加します。これにより、Wi-Fiアイコンのような曲線の形状を作成できます。ストロークの太さを調整し、全体の形状をグループ化することを忘れないでください。
5. ボタンとテキストの調整を作成
ボタンを作成するには、長方形を描き、それに適した色またはグラデーションを選択します。次に、ボタンにラベルを付けるテキストフィールドを追加します。シンボルとして保存されている場合、テキストの変更はすべてのボタンにグローバルに適用されないことを忘れないでください。
6. シンボルを作成して保存する
シンボルを作成するには、シンボルとして使用したい要素を選択し、ショートカットのCommand (Control) + Kを使用してシンボルバーに移動します。これにより、同じ要素を何度も作り直さずに使用できます。
7. シンボル編集機能の活用
デザイン内のシンボルを変更したいが、変更がグローバルでないようにするには、シンボルのグループ化を解除するか、通常の形状に変換します。これにより、他のシンボルのインスタンスに影響を与えずに個別に調整できます。
8. 便利な検索機能の活用
デザイン内に多くの要素がある場合、シンボルバーの検索機能を使用して、特定のシンボルをすばやく見つけることができます。そのために、フィルターを使用してシンボルを検索し、より簡単に管理します。
要約 - Adobe XD: シンボルと形状を効果的に活用する
要約すると、Adobe XDは形状とシンボルを効率的に作成し管理するためのツールを提供します。紹介した技術とショートカットを使用することで、デザインプロセスを最適化し、一貫したデザインを作成することができます。
よくある質問
Adobe XDで新しいシンボルを作成するにはどうすればいいですか？希望する要素を選択し、Command (Control) + Kを押してシンボルバーに保存します。
シンボルバーからシンボルを削除するとどうなりますか？シンボルはライブラリから削除されますが、アートボード上には引き続き表示されます。
すでに作成したシンボルのサイズを変更できますか？はい、ストロークを調整すると、すべてのシンボルインスタンスが自動的に変更されます。
グローバルに変更することなく、シンボルの複数のインスタンスを編集するにはどうすればいいですか？右クリックでグループ化を解除するか、ショートカットCommand (Shift) + Gを使用します。
シンボル内のテキストは他の要素と同じように機能しますか？No、それぞれのシンボルのテキストの変更はその特定のインスタンスにのみ影響し、他には影響しません。
