designless

UI Design with Adobe XD and Adobe Illustrator

2016/12/03
Naoki Kanazawaposted by Naoki Kanazawa

Hello

Adobe XD Advent Calendarの3日目を担当します!
Life is Tech !チーフデザイナーの金澤です。
ニックネームは「ざわっち」です。

Webデザイン、コーディング、DTP、グラフィック、フォトグラフィー、MOZERをはじめとするカリキュラム開発を行っています。

Adobe Experience Design(XD)

ちょうどAdobe AppBox Awards 2016という企画が開催されていたので、Adobe XDの練習をしてみました。
お題が「クリスマスが楽しみになるアプリ」だったので、スタンプを押していくとツリーを作成し、アクリルのオーナメントになって届くサービスがあったらいいなーと思って作りました。

Adobe XDでは制作したアプリのURLを発行できるほか、下記のようにWebサイトに埋め込んで、操作することもできます。
アイコンやコンセプトはBehanceにアップしています。

with Adobe Illustrator

僕はIllustratorが大好きです、
今回は、Illustratorで制作したオブジェクトをAdobe XDに持っていったらどうなるのか実験してみました。

オブジェクトを持っていく

Illustratorで制作したパスをXDにコピー&ペーストできます。
XDでオブジェクトをダブルクリックすることで、個別のアンカーポイントを調整することができます。
ちなみにXDからコピー&ペーストでIllustratorに持っていくと、ラスタライズされた画像になってしまいます。

効果を持っていく。

Illustratorで光彩などの効果を保ったまま、コピー&ペーストでXDに貼り付けることができます。
XDでも簡単な効果をつけることもできますが、3D効果やアピアランスの重ねがけなどはIllustratorで適用してから持っていきましょう。

いろんなパスを持っていく。

Illustratorの色んなツールで試してみた。

  • ブレンドツール:スムーズで設定しても、ステップに分解される。
  • 線幅ツール:線がアウトライン化される。
  • ワープテキスト:アウトライン化される。
  • 文字タッチツール:形が崩れる、ダブルクリックすれば文字の編集ができる。
  • パス上文字ツール:形が崩れる、ダブルクリックすれば1文字ずつ編集ができる。

コピー&ペーストでベクター形式のデータを移行できるのは、とても便利ですね!
Adobe XD単体でもシンプルなデザインができるだけに、今後も他のAdobeアプリケーションとどのように連携していくのか非常に楽しみです。