はじめに
Adobe XDでアプリのプロトタイプを作る際、自分で作ったデザイン使いてー ってなったことありません?
また、プロトタイプ作成後にアイコンなどのデザインを変更して、プロトタイプ作り直しになることも多いですよね。
そこで、AdobeCC ライブラリを用いて、illustratorなどでのデザイン修正をXDに同期させる方法を紹介します。
AdobeCCライブラリに保存
このようなデザインをillustratorで作っています。
まずは、AdobeCCライブラリのウィンドウを開きます。
ウィンドウ / CCライブラリ
を選択します。
このような画面が出てきます。保存場所を決めたいので、ライブラリ
を選んでおきましょう。他のライブラリ(フォルダのようなもの)を作成することもできます。
次に、 ⌘+A
などでアートボードを全選択して、CCライブラリウィンドウにドラッグ&ドロップします。
選択範囲がライブラリに保存されたら成功です。
XDで呼び出す
次に、AdobeXDを開き、右下のライブラリアイコンを選択します。
先ほどと同じ、CCライブラリウィンドウが表示されます。
アートボードを保存した、ライブラリを開きましょう。
先ほど保存したデザインが表示されました!
これをドラッグ&ドロップすることで、プロトタイプ内で利用できます。
illustratorで編集する
さて、このアイコンを編集してみます。
編集する際には、ライブラリのアートワークをダブルクリックして開きます。
この画面で編集し、保存しましょう。
保存の際に以下のようなアラートが表示されることもありますが、OKを押して良いです。
XDを見てみると、変更が即座に反映されています!
まとめ
CCライブラリは、Adobe製品ならいろんな場所で使うことができます。
ぜひこの方法を応用してみてください!