この記事は3分で読めます

【XD】ドキュメントアセットの使い方

  • 投稿日
  • 更新日

あとで読む

【XD】ドキュメントアセットの使い方

XDでデザインをしていると、カラーやフォントなどを繰り返し使う場面が多いと思います。

そんな時に役に立つ「ドキュメントアセット」について説明していきます。

ドキュメントアセットが使いこなせるようになると、XDの作業効率がかなり上がりますので、是非覚えて使ってみてください。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

ドキュメントアセットってなに?

ドキュメントアセットは同一ファイル内で繰り返し使用する、カラー・文字スタイル・コンポーネント・ビデオを保存して、一括して管理できる機能です。

また、登録しておいたカラーや文字スタイルを編集すると、ドキュメントアセットを使用した要素すべてに反映されるので、色の修正やフォントの修正を効率よくできます。

CCライブラリのように他のアプリケーションとの連携や他のXDファイルとの連携はありませんが、CCライブラリに書き出すことは可能です。書き出せば、CCライブラリと同じように共有することができます。

ドキュメントアセットを使ってみよう

ドキュメントアセットを開く

STEP
左下のアイコンをクリックする

左下の3つ並んでいるアイコンのうち、一番上のアイコンをクリックします。

STEP
ドキュメントアセットをクリックする

出てくるウィンドウの検索窓のすぐ下にある「ドキュメントアセット」をクリック

これでドキュメントアセットを開くことができました。

ドキュメントアセットに登録する

ドキュメントアセットに登録できるのは以下の通りです

カラー

単色・グラデーション・透明度を登録できます。

グラデーションはグラデーションの種類(線形・円形・円錐)は登録できますが、グラデーションの向きや位置は登録できません。

文字スタイル

フォントの種類・フォントウェイト・フォントカラー・フォントサイズを登録できます。テキストの内容(文字列)は登録できません。

コンポーネント

要素をコンポーネント化して登録できます。また、ショートカットや右クリックなどでコンポーネント化した要素もここに登録されます。

ビデオ

動画をコンポーネントのように登録できます。

次に、登録する手順を説明します。カラー・文字スタイル・コンポーネント・ビデオ全て手順は同じなので、カラーを例に手順説明をします。

STEP
登録したいカラーの図形を選択する

ドキュメントアセットにカラーを登録したい場合、文字を選択していてもOKです。

STEP
ドキュメントアセット内のカラーの横「+」をクリックする

選択した要素(今回は図形)に線のカラーが入っていると、線のカラーまでドキュメントアセットに登録されます。

これで登録ができました。

登録したアセットを利用する

カラー・文字スタイルの場合(解説動画はカラー)

任意の図形・文字を選択した状態で、反映させたいカラーまたは文字スタイルを選択する。

コンポーネント・ビデオの場合(解説動画はコンポーネント)

ドキュメントアセットからドラッグ&ドロップする。

登録したアセットを編集する

カラー・文字スタイルの場合

編集したいアセットを右クリック→「編集」をクリックすると、編集ウィンドウが表示されます。

編集した内容はアセットが適用されている全ての要素に反映されます。

コンポーネントの場合

編集したいコンポーネントを右クリック→「メインコンポーネントを編集」をクリックすると、メインコンポーネントの場所までジャンプしますので、そこで編集をします。

動画は編集することができません。

おわりに

ドキュメントアセットの使い方について解説しました。

ドキュメントアセットを活用しながらXDで作業をしていると、特に同じカラーを使いたい時、同じ文字スタイルを使いたいときに1クリックで呼び出しができるので、作業効率が格段に上がります。

微妙に色が違う、フォントサイズが揃ってないなどの、たまに(私は)やってしまいがちな凡ミスを防ぐこともできるので、是非ドキュメントアセットを活用してみてください!

この記事を書いた人

なしょ
なしょ

野球とカメラとスノボとゲームと…好きなものが多くて困ってます。 が、新しい世界へのお誘いもお待ちしています!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須