アドビがようやくユーザーインターフェイス専用のデザインツール(Adobe Experience Design:Adobe XD)を作り、Sketchに対抗すると決めたものの、多くのデザイナーは両者が同じ土俵に上がって競い合うまでにどれくらいかかるか、疑問に感じています。
それには、ドラッグ&ドロップで画像やテキストを配置する、Adobe XDのアセットインポート機能を自身の目で見て確かめるのがよいでしょう。Adobe XDは現時点ではMacにのみ対応していますが、近いうちにWindowsでも利用可能になります。
以下がアセットインポートの典型的な方法です。
- 「Save As」→「File」 →「 Import」 または
- 「Ctrl / Command」+「C」 →「 Ctrl / Command」+「V」
記憶にある限りでは、「ドラッグ&ドロップ」でアセットを取り込む機能は、どのデザインアプリケーションにも機能として備わっています。しかし、再利用可能なコンポーネントとして「ドラッグ&ドロップ」を自動化する方法はなく、同じようなコンポーネントそれぞれに、ユニークなコンテンツを変更する必要があります。
リピートグリッドで記事 カードのグリッドをデザインする
Adobe XDを起動し、スプラッシュスクリーンから新規Webドキュメントを開きます。白いキャンバスであればどのサイズでも構いません。「R」を押して、長方形を描きます。面積が400×300pxになるようにしてください。
そして、別の長方形を作り(400×100px)、その縁を削除し、「Fill(塗り色)」を不透明度80%の黒(#000000)に設定して塗ります。次に「Color Sliders」を「RGB Sliders」にします。
黒で塗った400×100pxの長方形に、記事カテゴリー、見出し、日付けからなる一連のテキストレイヤーを作り、記事カードをデザインします。「T」を押して「Text(テキスト)」ツールを選び、以下のオプションスタイルを使います:
- Fill(塗り色):#F39C12
- Text(テキスト):Helvetica Neue、15、Bold
- Height(高さ):18 (行間隔と同じ)
さらに以下のように続けます。
- Text(テキスト):Helvetica Neue、21、Condensed Bold
- Fill(塗り色):#FFFFFF
- Height(高さ):26
最後に、次のようにします。
- Text(テキスト):Helvetica Neue、14、Regular
- Fill(塗り色):#FFFFFF
- Height(高さ):16
- Align(配置):Right(右)
リピートグリッドツールでコンポーネントを再利用する
マウスカーソルをドラッグして同時にすべてのレイヤーを選び、サイドバーから「Repeat Grid(リピートグリッド)」を選びます。そうするとコンポーネントに引っ張れるサイドハンドルが表示されます。必要に応じて何度でもコンポーネントのサイドハンドルを引いてタイル表示にできます。1つのタイルになにかしら変更を加えると、すべてのタイルに影響が表れます(内容でなく、スタイルをそろえる点においては便利です)。
Tip:グリッドのコラムまたは中間の列にあるスペースをドラッグすることで簡単にガターの幅を調整できます。
ドラッグ&ドロップで一連の画像を置き換える
ここから「魔法」がかかったかのようになります。始める前に、Red Calla Minimalism、Calla Fashion Minimal、Blue Roses on a Crimson Background、Red Tulip Bouquetがスクリーンショット内で使用しているEvgeniya Porechenskayaの4つの画像をコンピューターに保存してください(サンプルでも可能です)。
画像の1つを長方形の1つにドラッグすると、画像が自動的に切り取られて配置されます。そして4つすべての画像を選ぶと、画像1つ1つがそれぞれのタイルに配置されます。まさに、画像アセットをAdobe XDにインポートするときの時間を短縮できるわけです。いままでのところ、SketchまたはPhotoshopに比べると、Adobe XDのアセットインポートが一番早い方法になります。
なぜ、一番早い?
- 画像を合わせるためにマスク、切り取り、サイズの変更をする必要がない
- ステップを何度も繰り返す必要がない
- (Sketchで)オーバーライドを使う必要がない
テキストファイルを使ってテキストレイヤーを追加する
テキストでも同じようなことができます。たとえばlorem ipsumのタイトルのそれぞれのインスタンスを、ユニークなタイトルに置き換えたいとします。テキスト編集ソフトを開き(またはシンプルなテキストファイルが作れるアプリ)、新しい行にそれぞれタイトルを書き、画像と同様にファイルをレイヤーにドラッグします。
Adobe XDは自動的にそれぞれの新しい行を抽出し、反復レイヤーのそれぞれのインスタンスに対し分配します。
注意:テキスト編集はデフォルトでリッチテキストフォーマットになっていますが、「File」 →「 Preferences」で「プレーンテキスト」を選択すると変更できます。
最後に
画像を選んだり、テキストを決めたりするのが、Adobe XDによって必ずしもデザイナーではなくてもよくなります。誰でもテキストファイルや画像のアセットフォルダーを作れるようになるのです。デザイナーは作られた要素を直接デザインファイルにドラッグすれば、そのまま使えるのです。このとてもエネルギッシュなワークフローは、簡単で膨大な時間の短縮になります。
Adobe XDはまだプレビュー版のため、いまなら無料で試せます。
(原文:Adobe XD Tutorial: A Pain-free Way to Import Assets)
[翻訳:Nayu Kinjo]
[編集:Livit]