0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CCライブラリでillustratorとXDを同期して爆速プロトタイプ開発

Posted at

はじめに

Adobe XDでアプリのプロトタイプを作る際、自分で作ったデザイン使いてー ってなったことありません?
また、プロトタイプ作成後にアイコンなどのデザインを変更して、プロトタイプ作り直しになることも多いですよね。
そこで、AdobeCC ライブラリを用いて、illustratorなどでのデザイン修正をXDに同期させる方法を紹介します。

AdobeCCライブラリに保存

このようなデザインをillustratorで作っています。

スクリーンショット 2025-04-14 23.20.17.png

まずは、AdobeCCライブラリのウィンドウを開きます。
ウィンドウ / CCライブラリ を選択します。

スクリーンショット 2025-04-14 23.20.37.png

このような画面が出てきます。保存場所を決めたいので、ライブラリ を選んでおきましょう。他のライブラリ(フォルダのようなもの)を作成することもできます。

スクリーンショット 2025-04-14 23.21.07.png

次に、 ⌘+A などでアートボードを全選択して、CCライブラリウィンドウにドラッグ&ドロップします。

スクリーンショット 2025-04-14 23.20.49.png

選択範囲がライブラリに保存されたら成功です。

スクリーンショット 2025-04-14 23.21.00.png

XDで呼び出す

次に、AdobeXDを開き、右下のライブラリアイコンを選択します。

スクリーンショット 2025-04-14 23.21.38.png

先ほどと同じ、CCライブラリウィンドウが表示されます。
アートボードを保存した、ライブラリを開きましょう。

スクリーンショット 2025-04-14 23.21.48.png

先ほど保存したデザインが表示されました!

スクリーンショット 2025-04-14 23.21.53.png

これをドラッグ&ドロップすることで、プロトタイプ内で利用できます。

スクリーンショット 2025-04-14 23.22.09.png

illustratorで編集する

さて、このアイコンを編集してみます。
編集する際には、ライブラリのアートワークをダブルクリックして開きます。

スクリーンショット 2025-04-14 23.21.00.png

スクリーンショット 2025-04-14 23.22.36.png

この画面で編集し、保存しましょう。

スクリーンショット 2025-04-14 23.23.00.png

保存の際に以下のようなアラートが表示されることもありますが、OKを押して良いです。

スクリーンショット 2025-04-14 23.22.50.png

XDを見てみると、変更が即座に反映されています!

スクリーンショット 2025-04-14 23.23.07.png

まとめ

CCライブラリは、Adobe製品ならいろんな場所で使うことができます。
ぜひこの方法を応用してみてください!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?