この記事は2019/5/25に東京で行われたXD User Fesの発表内容を記事にしたものです。「XDのデザイン制作にpsdやaiファイルをリンクさせて簡単に編集したい！」というお話をしました。全国各地をリレーするXD User Fesは8月まで続きます、お近くのイベントにぜひご参加ください。
-
目次・CCライブラリとは？
・Photoshop編
・Illustrator編
・CCライブラリを使うときの注意点4つ＆まとめ
-
みなさん、デザイン制作にXD使ってますか？XDで作るデザインって、
みたいなイメージありますよね。サービスやアプリのUIには便利そうだけど、写真やアイコンの点数が多いデザインの場合、PhotoshopやIllustratorで作ってしまった方が早いんじゃない？
デザインは画像補正→アイコン制作→レイアウト、というように一直線には進みません。全体を見渡し、アプリケーションを行き来することになります。
psdやaiファイルをXDに配置してリンクできたら、編集に強いデザイン制作ができるのに…しかしXDはpsdやai形式はサポートしていません。pngやjpg、svgなどに一旦書き出して、XDに配置するのはちょっと手間ですよね。
ところが、CCライブラリを使うと、psdやaiをリンクするように、編集の呼び出しや変更内容の同期が素早く行えるようになります。
-
CCライブラリとは？AdobeのCreativeCloudのサービスの一つ、Photoshopなどのアプリケーションからグラフィックなどを登録でき、アプリケーション間のデータのやり取りに便利です。
CCライブラリに登録されたグラフィックやカラーは「アセット」と呼ばれます。今回使用する、XD・Photoshop・Illustratorでは、CCライブラリへ登録・使用できるアセットに違いがあります。
2019年6月の現時点で、XDからCCライブラリへ「登録」はできません。他のアプリケーションからのデータ受け取り専用と考えてください。
-
Photoshop編PhotoshopからCCライブラリにアセットを登録する方法はいくつかあります、今回は「psdファイルとして書き出し、CCライブラリへドラッグ＆ドロップする」方法を紹介します。
ここで注意したいのは、「最初に保存したcoffee.psd」と、「CCライブラリに登録されたcoffee.psd」は別ファイルだという点です。CCライブラリパネルから開き、保存して閉じるようにします。
Photoshopから登録したアセットは、XDのCCライブラリにも同期されています。アセットをドラッグ＆ドロップで、アートボードに配置します。
配置して「もうちょっと色味を補正したいな」と思ったら、XDのCCライブラリのアセットを右クリック（controlクリック）で「編集」を選びます。Photoshopが立ち上がりますので、補正して保存します。
すると、PhotoshopのCCライブラリのアセットはもちろん、XDのアセット、配置した画像も同期して更新されます。同じ画像を複数箇所で使っている場合に、反映漏れがなく便利です。
-
Photoshopで気をつけるポイント
CCライブラリはAdobeStockとも連携しているため、素材のアセットと完成したグラフィックのアセットが混在しがちです。誤って必要なアセットを削除してしまうと、編集できなくなりますので、ライブラリの入れ子とアセットの管理は要注意です。
-
Illustrator編Illustratorでやりたいことは「アイコン」と「縦書きなど特殊テキスト」の作成です。
アイコン編
XDはベクターに強いため、Illustratorからコピー＆ペーストで配置しても、問題なく表示されます。一度しか使わない、変更の可能性がないデータはこれで十分です。
違いを一つ挙げるとすれば、線の太さの扱いが異なります。線画イラストを配置したいけれど、ベストなサイズをレイアウトしながら探りたい場合には、CCライブラリが便利です。
-
テキスト編
XDのテキスト周りはどんどん強化されていますが、縦書きなど一部の表現がまだ未対応です。
これをIllustratorで作成・配置します。Illustratorの縦書きテキストをコピー＆ペーストでXDに配置すると、アウトラインされた状態で配置されます。
ではCCライブラリで解決？というと、ちょっと落とし穴があります。
縦書きしたテキストを、そのままCCライブラリに保存すると、XDに配置したとき表示が崩れてしまいます。「アウトラインしてCCライブラリに登録」することで、やっと狙い通りの見た目になりました。
アウトラインを登録するのではCCライブラリを使うメリットが薄れてしまいます。CCライブラリのアセットは、レイヤー構造を持てるai形式なので、テキストを別レイヤーに保存しておくと変更にも対応できます。
-
Illustratorで気をつけるポイント
CCライブラリに登録されるアセットのサイズは、アートボードではなくオブジェクトのサイズです。アイコンなど、サイズがバラバラだと使いにくいものには外枠をつけて登録すると、レイアウトのときに役立ちます。
-
CCライブラリを使うときの注意点4つ＆まとめ
CCライブラリは、変更がアセットやアートボードに配置したグラフィックにもすぐ同期されるため、CCライブラリをシンボルのように使うこともできます。しかしデザインの中で何度も使用するアイコンなどは、改めてXDのコンポーネントに登録するのがおすすめです。
誤ってCCライブラリからアセットを削除してしまったら、アートボードに配置されたアイコンたちはリンクが切れてしまいます。ちなみに、コンポーネント化してもCCライブラリの変更は同期されます。
-
これは作業をしていて気がついたことですが、アウトライン化した複雑なベクターをCCライブラリに登録すると、XDから呼び出したときに形が変形していることがあります。これはSVGの小数点が関係していると思われますが、対応として考えられるのはこの二つです。
・XDはプレビューと割り切ってIllustratorで書き出す
・実際のサイズより大きめに作り、小数点の揺らぎを軽減する
-
CCライブラリから配置したアセットは、ライブラリの編集権限がない場合でも問題なく表示できます。複数人でアセットの編集をしたい場合は、フォルダー共有を選び、ライブラリに招待する必要があります。権限は「閲覧のみ」「編集可能」の二つです。
-
Photoshopからグラフィックをアセット登録する際、「psb（フォトショップビッグドキュメント形式）」ファイルに注意が必要です。XDではこの形式をサポートしていないようで、配置したアセットが解像度が低く表示されてしまいます。Photoshopでスマートオブジェクトをアセット登録するとpsbになることがありますので、一度psdに書き出し→登録をおすすめします（psdファイルに含まれるスマートオブジェクトは問題なし）。
-
ここまで説明してきましたが、PhotoshopやIllustratorをこんなに多用するのにXDを使うメリットあるの？と思われるかもしれません。しかし、PhotoshopやIllustratorで作るグラフィックと、XDで作るレイアウトを分離できるのは非常に便利ですし、機能が限られているため、うっかりWebでは再現できない表現になってしまうことも少なくなります。
また、プロトタイプやデバイスでのプレビュー、共有など、PhotoshopやIllustratorにはない便利な機能も多数です。グラフィックを扱うことが多い現場でも、ぜひ試してください。
-
イベントページ：https://xd-study.connpass.com/event/129011/
ツイートまとめ：https://togetter.com/li/1359695
配信録画：https://blogs.adobe.com/japan/cc-ccdojo-adobe-xd-user-fes-2019/
お近くの地域のイベントは、ぜひXD User Fesをチェック！