Adobe XDをもっと使いこなすヒント！ 第38回 アセットパネルを使ったスタイル管理のキホン
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、アセットパネルを使って文字や色などのスタイルを管理する方法に関する12のツイートを紹介します。
Tip 1. アセットパネルを開く
#adobexd #protip Launch the assets panel from the icon on the lower left hand side, or type Shift+Cmd+Y (Mac) or Shift+Ctrl+Y (Win). @adobexd pic.twitter.com/PI1FWvsL5N
— Elaine Chao (@elainecchao) May 27, 2019
アセットパネルを開くには、画面左下のアイコン（下から3番目）をクリックします。開いたパネルの上部に「アセット」とタイトルが表示されていることを確認しましょう。
ショートカットキーを使っても開いたり閉じたりできます。Macの場合は Shift+Cmd+Y、Windowsの場合は Shift+Ctrl+Yです。
#adobexd #protip You can quickly and easily switch between grid and list view in the assets panel using the icon next to the search section. @adobexd pic.twitter.com/hXRJKubWoP
— Elaine Chao (@elainecchao) July 1, 2019
アセットパネルはリストビューとグリッドビューの間で切り替えることができます。アセットパネルのタイトルの下にあるアイコンをクリックすると表示が交互に変わります。
Tip 2. 色をアセットとして登録する
#adobexd #protip Add a color as a linked color in the assets panel by clicking on the + button under the “Colors” section. @adobexd pic.twitter.com/SLMJunomz6
— Elaine Chao (@elainecchao) May 28, 2019
色をアセットとして登録するには、カンバス上のオブジェクトを選択してから、パネル内の「カラー」のセクションにある「＋」ボタンをクリックします。選択したオブジェクトに使用されている色がアセットパネルに追加されます。（塗りと境界線の色が追加されます）
オブジェクトを右クリックして、コンテキストメニューから「アセットにカラーを追加」を選択する方法も利用できます。
#adobexd #protip You can also link multiple colors at the same time by selecting more than one object and clicking the + button in the assets panel. @adobexd pic.twitter.com/QhBj4Qzsab
— Elaine Chao (@elainecchao) May 29, 2019
上の動画のように、複数のオブジェクトを選択してから「＋」ボタンをクリックすると、同時に複数のオブジェクトの色を追加することができます。
Tip 3. 文字スタイルを登録する
#adobexd #protip Adding in character styles is also a cinch with the + button. However, you can add both colors and character styles using the context menu as well. @adobexd pic.twitter.com/WgAPJlvoD2
— Elaine Chao (@elainecchao) May 30, 2019
テキストエリアを選択してから、アセットパネル内の「文字スタイル」のセクションの「＋」ボタンをクリックしてみましょう。すると、使用されている文字スタイルをアセットとして追加できます。カラーの登録と同様に、コンテキストメニューも利用できます。
Tip 4. 登録したスタイルに名前を付ける
#adobexd #protip Rename your styles in your assets panel by double clicking on the label, entering your text, and pressing Enter. @adobexd pic.twitter.com/I5SC2VHGU8
— Elaine Chao (@elainecchao) June 6, 2019
登録したスタイルの名前は自動的に付けられます。これを後から変更したい場合は、ラベルをダブルクリックします。テキストを入力してEnterキーで確定すると、名前が変更されます。
#adobexd #protip Want to name your assets really quickly? Press Tab instead of Enter to skip to the next line in the assets panel. @adobexd pic.twitter.com/M9iQAiVZiX
— Elaine Chao (@elainecchao) June 7, 2019
ラベルをダブルクリックしてテキストを入力した後、EnterキーではなくTabキーを押すと、入力内容が確定されて、次のラベルにフォーカスが移動します。そのままラベルを入力できるため、いくつも名前を変更したいときに便利な機能です。
Tip 5. 登録したスタイルを編集する
#adobexd #protip Once colors and character styles are global, you can edit them by right clicking on the color. All objects using that color in the entire object will update at the same time. @adobexd pic.twitter.com/NogeqVqCE0
— Elaine Chao (@elainecchao) May 31, 2019
アセットパネルに登録したカラーや文字スタイルを編集すると、同じスタイルのオブジェクトを全部まとめて変更できます。上の動画では、ヘッダーとアイコンの色が同時に変化している様子が分かります。
アセットを編集する方法は、対象のスタイル右クリックして、コンテキストメニューから「編集」を選択、です。
Tip 6. 登録したスタイルをオブジェクトに適用する
#adobexd #protip Apply global styles to any object by selecting the object and clicking on the style in the assets panel. @adobexd pic.twitter.com/mseqXppE9i
— Elaine Chao (@elainecchao) June 3, 2019
オブジェクトの塗りや文字スタイルに登録したスタイルを適用したいとき、最も簡単な方法は、オブジェクトを選択してから、アセットパネル内の目的のスタイルをクリックすることです。たった2回のクリック操作だけで、塗りの色や文字スタイルを変更できます。
#adobexd #protip Quickly apply a color to a border by selecting “Apply to Border” in the context menu in the assets panel. @adobexd pic.twitter.com/jgzUbJd1Vg
— Elaine Chao (@elainecchao) June 4, 2019
境界線の色に登録済みのスタイルを適用したい場合は、オブジェクトを選択してから、スタイルを右クリックしてコンテキストメニューを開き、「境界線に適用」を選択します。
Tip 7. スタイルが使われているオブジェクトを強調表示する
#adobexd #protip Want to see where you’ve used a particular style? Pop open your assets panel and select “Highlight on Canvas” in the context menu to get a sense of where it’s used. @adobexd pic.twitter.com/4QxoWZGJQZ
— Elaine Chao (@elainecchao) June 5, 2019
特定のスタイルが自分のデザインのどこで使われているかを確認したい場合は、アセットパネル内のスタイルを右クリックして「カンバスでハイライト」を選択します。すると、該当するオブジェクトの周囲が青い線で囲まれます。
#adobexd #protip Reveal in the Assets Panel also works for colors and character styles. Simply highlight the object, launch the context menu, and select the option to reveal. @adobexd pic.twitter.com/ImlKoiIKJA
— Elaine Chao (@elainecchao) June 28, 2019
反対に、オブジェクトに使われているスタイルがアセットパネルのどこにあるかを知りたい場合は、オブジェクトを右クリックしてコンテキストメニューを開き、「アセットのカラーを表示」や「アセットの文字スタイルを表示」を選択します。アセットパネル内の該当するスタイルが青い枠線で強調表示されます。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！