見出し画像

XDでpsdやaiをリンクさせたい!CCライブラリを使った方法と注意点

はじめに

みなさんXD使ってますか?XDって

画像1

みたいなイメージありますよね。サービスやアプリのUIには便利そうだけど、例えば↓こんなデザインを作る場合、IllustratorやPhotoshopの方が向いていそうに見えます。なぜなら、

画像2

XDでデザインする場合、↓こんな風にPhotoshopで画像を補正して書き出して…Illustratorでアイコンを作成して書き出して…変更を繰り返すには、ちょっと手間です。

画像3

IllustratorやPhotoshopのように、psdやaiファイルをそのままリンクできたら…しかしXDにリンク機能はありません。「読み込み」をすると、オブジェクトとしてファイルの中身が読み込まれます。
しかし、CCライブラリを使うと、psdやaiをリンクするように、編集の呼び出しや変更内容の同期が素早く行えるようになります。

画像25

-

CCライブラリとは?

AdobeのCreativeCloudのサービスの一つ、Photoshopなどのアプリケーションや、Capture CCなどのモバイルアプリからグラフィックやブラシなどを登録でき、アプリケーション間のデータのやり取りに便利なツールです。

画像5

CCライブラリに登録されたグラフィックやカラーは「アセット」と呼ばれます。今回使用する、XD・Photoshop・Illustratorでは、CCライブラリへ登録・使用できるアセットに違いがあります。

画像25

2019年11月のアップデートで、XDからCCライブラリへ登録ができるようになり、グループ機能も使用できるようになりました。やったね!

-

Photoshop編

PhotoshopからCCライブラリにアセットを登録する方法はいくつかありますが、今回は「psdとして一旦書き出し、CCライブラリへドラッグ&ドロップする」方法をとります。

画像7

ここで注意したいのは、「最初に保存したcoffee.psd」と、「CCライブラリからクリックして開いたcoffee.psd」は別ファイルだという点です。CCライブラリから開き、保存して閉じるようにします。

画像8

Photoshopから登録したアセットは、XDのCCライブラリにも同期されています。アセットをドラッグ&ドロップで、アートボードに配置します。

画像9

配置して「もうちょっと色味を補正したいな」という場合は、XDのCCライブラリのアセットを右クリック(controlクリック)で「編集」を選びます。Photoshopが立ち上がりますので、補正して保存します。

画像10

すると、PhotoshopのCCライブラリのアセットはもちろん、XDのアセット、配置した画像も更新されます。同じ画像を複数箇所で使っている場合など、反映漏れがなく便利です。

画像11

Photoshopで気をつけるポイント

画像12

CCライブラリはAdobeStockとも連携しているため、素材のアセットと完成したグラフィックのアセットが混在しがちです。誤って必要なアセットを削除してしまうと、編集できなくなりますので、ライブラリの入れ子とアセットの管理は要注意です。

-

Illustrator編

Illustratorでやりたいことは「アイコン」と「縦書きなど特殊テキスト」の作成です。

アイコン編
まずはアイコンですが、XDはベクターに強いため、Illustratorからコピー&ペーストで配置しても、問題なく表示されます。一度しか使わない、変更の可能性がないデータはこれで十分です。

画像13

違いを一つ挙げるとすれば、拡大縮小のときの線の太さの扱いが異なります。線画イラストを配置したいけれど、ベストなサイズをレイアウトしながら探りたい場合には便利です。

画像14

テキスト編
XDはテキスト周りもどんどん強化されてきていますが、縦書きなど特殊書式がまだ未対応です。

画像15

これをIllustratoで作成・配置します。Illustratorの縦書きテキストをコピー&ペーストでXDに配置すると、アウトラインが取られた状態で配置されます。

画像16

ではCCライブラリで解決?というと、ちょっと落とし穴があります。

画像17

縦書きしたテキストを、そのままCCライブラリに保存すると、XDに配置したとき表示が崩れてしまいます。「アウトラインを取ってCCライブラリに登録」することで、やっと狙った見た目になりました。

画像18

アウトラインを登録するのではCCライブラリを使うメリットが薄れてしまいます。CCライブラリのアセットはai形式なので、レイヤーを持てます。アウトライン前のテキストを別レイヤーに保存しておくと、変更にも対応できます。
高橋としゆきさんから「アピアランスを使えばテキストを生かしたまま擬似的にアウトラインできるのでは」と教えてもらいました。可能ですが、フォント名が変わってしまうことがあるので、見た目を確認することをおすすめします。

Illustratorで気をつけるポイント

画像19

CCライブラリに登録されるアセットのサイズは、アートボードではなくオブジェクトのサイズです。アイコンなど、サイズがバラバラだと使いにくいものには外枠をつけて登録すると、レイアウトの時に役立ちます。

-

CCライブラリを使うときの注意点とまとめ

画像20

CCライブラリは、変更がアセットやアートボードに配置したグラフィックにもすぐ同期されるため、CCライブラリをシンボルのように使うこともできます。しかしデザインの中で何度も使用するアイコンなどは、改めてXDのコンポーネントに登録するのがおすすめです。

画像25

CCライブラリからのリンクが何らかの原因で切れてしまったとき、アートボードに配置されたアイコンたちはリンクが切れてしまいます。コンポーネント化してもCCライブラリの変更は同期されます。

画像22

これは作業をしていて気がついたことですが、アウトライン化した複雑なベクターをCCライブラリに登録すると、XDから呼び出した時に形が変形していることがあります。これはSVGの小数点が関係していると思われますが、対応として考えられるのはこの二つです。
・XDはプレビューと割り切ってIllustratorで書き出す
・実際のサイズより大きめに作り、小数点の揺らぎを軽減する

画像23

CCライブラリから配置したアセットは、ライブラリの編集権限がない場合でも問題なく表示できます。複数人でアセットの編集をしたい場合は、フォルダー共有を選び、ライブラリに招待する必要があります。権限は「閲覧のみ」「編集可能」の二つです。

画像24

Photoshopからグラフィックをアセット登録する際、「psb(フォトショップビッグドキュメント形式)」ファイルに注意が必要です。XDではこの形式をサポートしていない様子で、配置したアセットが解像度の低いデータで表示されて今います。Photoshopでスマートオブジェクトをアセット登録するとpsbになることがありますので、psdで書き出して、登録をおすすめめします(psdファイルに含まれるスマートオブジェクトは問題なし)。

画像25

ここまで説明してきましたが、PhotoshopやIllustratorをこんなに多用するのにXDを使うメリットあるの?と思われるかもしれません。しかし、PhotoshopやIllustratorで作るグラフィックと、XDで作るレイアウトを分離できるのは非常に便利ですし、機能が限られているため、うっかりWebでは再現できない表現になってしまうことも少なくなります。
また、プロトタイプやデバイスでのプレビュー、共有など、PhotoshopやIllustratorにはない便利な機能も多数です。グラフィックを扱うことが多い現場でも、ぜひ試してください。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートより、どこかでお会いしたらぜひ話しかけてくださいね

ありがとうございます!明日いいことありますように
284
大阪の株式会社キテレツで、デザイナーとイラストレーターをしています。 イラスト制作、デザイン制作お受けしています。 こ連絡はTwitterDMでどうぞ。 https://twitter.com/spicagraph

この記事が入っているマガジン

#デザイン 記事まとめ
#デザイン 記事まとめ
  • 4604本

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。