Adobe XDをもっと使いこなすヒント! 第38回 アセットパネルを使ったスタイル管理のキホン

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、アセットパネルを使って文字や色などのスタイルを管理する方法に関する12のツイートを紹介します。

Tip 1. アセットパネルを開く

アセットパネルを開くには、画面左下のアイコン(下から3番目)をクリックします。開いたパネルの上部に「アセット」とタイトルが表示されていることを確認しましょう。

ショートカットキーを使っても開いたり閉じたりできます。Macの場合は Shift+Cmd+Y、Windowsの場合は Shift+Ctrl+Yです。

アセットパネルはリストビューとグリッドビューの間で切り替えることができます。アセットパネルのタイトルの下にあるアイコンをクリックすると表示が交互に変わります。

Tip 2. 色をアセットとして登録する

色をアセットとして登録するには、カンバス上のオブジェクトを選択してから、パネル内の「カラー」のセクションにある「+」ボタンをクリックします。選択したオブジェクトに使用されている色がアセットパネルに追加されます。(塗りと境界線の色が追加されます)

オブジェクトを右クリックして、コンテキストメニューから「アセットにカラーを追加」を選択する方法も利用できます。

上の動画のように、複数のオブジェクトを選択してから「+」ボタンをクリックすると、同時に複数のオブジェクトの色を追加することができます。

Tip 3. 文字スタイルを登録する

テキストエリアを選択してから、アセットパネル内の「文字スタイル」のセクションの「+」ボタンをクリックしてみましょう。すると、使用されている文字スタイルをアセットとして追加できます。カラーの登録と同様に、コンテキストメニューも利用できます。

Tip 4. 登録したスタイルに名前を付ける

登録したスタイルの名前は自動的に付けられます。これを後から変更したい場合は、ラベルをダブルクリックします。テキストを入力してEnterキーで確定すると、名前が変更されます。

ラベルをダブルクリックしてテキストを入力した後、EnterキーではなくTabキーを押すと、入力内容が確定されて、次のラベルにフォーカスが移動します。そのままラベルを入力できるため、いくつも名前を変更したいときに便利な機能です。

Tip 5. 登録したスタイルを編集する

アセットパネルに登録したカラーや文字スタイルを編集すると、同じスタイルのオブジェクトを全部まとめて変更できます。上の動画では、ヘッダーとアイコンの色が同時に変化している様子が分かります。

アセットを編集する方法は、対象のスタイル右クリックして、コンテキストメニューから「編集」を選択、です。

Tip 6. 登録したスタイルをオブジェクトに適用する

オブジェクトの塗りや文字スタイルに登録したスタイルを適用したいとき、最も簡単な方法は、オブジェクトを選択してから、アセットパネル内の目的のスタイルをクリックすることです。たった2回のクリック操作だけで、塗りの色や文字スタイルを変更できます。

境界線の色に登録済みのスタイルを適用したい場合は、オブジェクトを選択してから、スタイルを右クリックしてコンテキストメニューを開き、「境界線に適用」を選択します。

Tip 7. スタイルが使われているオブジェクトを強調表示する

特定のスタイルが自分のデザインのどこで使われているかを確認したい場合は、アセットパネル内のスタイルを右クリックして「カンバスでハイライト」を選択します。すると、該当するオブジェクトの周囲が青い線で囲まれます。

反対に、オブジェクトに使われているスタイルがアセットパネルのどこにあるかを知りたい場合は、オブジェクトを右クリックしてコンテキストメニューを開き、「アセットのカラーを表示」や「アセットの文字スタイルを表示」を選択します。アセットパネル内の該当するスタイルが青い枠線で強調表示されます。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2019.09.5