最終更新日 :
2023年6月6日
ここでは、Illustrator にあるアイコンやロゴデザインなどのベクターアートワークを Adobe XD に取り込む方法を説明します。
Adobe XD は、Illustrator と連携して、ロゴやアイコン、XD デザインで使用できる要素など、精度の高ベクターアートワークを取り込みます。 読み込んだアートワークは XD でも編集可能なので、プロトタイプ作成に要する時間を短縮できます。
以下では、Illustrator から XD にアセットを取り込む数多くの方法、およびこれらのワークフローに関連するベストプラクティスと制限事項について説明します。
準備
Illustrator と XD は補完的な機能セットを備えているため、レイヤーとエフェクトを保持できますが、1 対 1 でマッピングされない機能が一部存在します。作業を進める前に、サポートされているIllustratorの機能
で詳細を確認してください。
|
|
XD で Illustrator ファイルを操作する場合のその他の制限事項を次に示します。
|
.png){kind=icon}
XD と Illustrator の間をシームレスに操作できるように、アドビでは相互運用性のワークフローの改善に取り組んでいます。 それまでの間、ご意見またはご提案をお持ちの方は、UserVoice でお知らせください。
Illustrator アセットを XD に取り込む方法
Illustrator で作成したデザインを XD に取り込むには、以下のようないくつかの方法があります。
XD 57では、アドビはXDのカラーマネジメント機能を向上させました。sRGBカラープロファイルを持つIllustratorのアセットをsRGBカラープロファイルのXDドキュメントにコピーすると、一貫した色を得ることができます。XD ドキュメントに管理されていないカラープロファイルがある場合は、カラープロファイルを sRGB に切り替えるよう促すメッセージが表示されます。
読み込んだアートボードのプロトタイプ
Illustrator のデザインを XD に読み込んだ後、次の手順で、読み込んだデザインを使用してプロトタイプを作成できます。
|
|
Illustrator を使用する場合、Illustrator のアートボードを XD で直接開いて XD のアートボードを作成できます。 Illustrator のアートボードは XD のアートボード形式にシームレスに読み込むことができます。 また外出時でも、2 つのアプリケーションの間を行き来して、複数の視覚要素を微調整することができます。 |
|---|
XD のデザイン向上を図るには、 リピートグリッド、ステート、自動アニメーション、音声プロトタイプ作成など、XD 固有の機能を適用できます。
XD による共有と共同作業
プロトタイプを共有しましょう。
XD からの共有によって、デザイン解像度に影響が及ぶ心配は ありません。
XD 57 以降では、関係者に一貫したカラーレンディションを提供できます。 これを実現するには、ドキュメントのカラープロファイルを sRGB に切り替えます。 管理されていないカラープロファイルを持つドキュメントから選択したアートボードを共有しようとすると、関係者の作業時に生じる可能性のあるカラーの不一致について通知するメッセージが表示されます。 詳しくは、カラーマネジメントを参照してください。
共有されたデザインは精度を失わずに最適化され、関係者からのフィードバックはリアルタイムで参照できます。開発者は、共有されたアセットとデザインスペックダウンロードしてコーディングに使用できます。
ビデオ： Illustrator のデザインを読み込む方法
「Photoshop ファイルを直接 Adobe XD に読み込むのと同じ手順で、Illustrator ファイルを読み込むことができます。 これは、UIやUXプロジェクトで使用するロゴ、アイコン、その他の要素を取り入れたいデザイナーにとって最適です」— Howard Pinsky、シニアXDエバンジェリスト。
Illustrator のデザインを XD に取り込む方法について詳しくは、この 2 分間のビデオをご覧ください。
よくある質問
SVGのサイズを大きくした際に、要素間の歪んだ間隔の問題を修正するにはどうすればよいですか？
歪みは、SVG 関連のオブジェクトを読み込んだり、ペーストしたりしたときに、それらのオブジェクトを XD が別のオブジェクトとして認識する場合に発生します。 歪みを避けるために、プロパティインスペクターのレスポンシブサイズ変更オプションがOFFに設定されていることを確認してください。
IllustratorからSVGに書き出したデザインアイコンがXDで歪んで見えるのはなぜですか？
一部の Illustrator 機能は XD に対応しておらず、ベクターとして転送されるか、まったく転送されません。 SVG の機能は Illustrator よりも限定的で、フリーフォームグラデーションなどの機能は表現できません。 XD でサポートされる Illustrator 要素について詳しくは、サポートされている Illustrator 要素
を参照してください。
次のステップ
ここでは、Illustrator で作成したデザインアセットを使用する方法について説明しました。 次のステップでは、インタラクティブプロトタイプを作成する方法や、フィードバックを得るためにデザイナーや関係者と共有する方法について説明します。
お客様からのフィードバックを 心よりお待ちしております。
ご質問または共有するアイデアがある場合は、Adobe XD コミュニティにぜひご参加ください。 皆様からのご意見や作品をお待ちしております。
