Adobe XDを使いこなす！プロ直伝のヒント-トップ10

Adobe Experience Design CC（以下Adobe XD）が2016年3月に公開されたその日から、日々の作業に役立つAdobe XDの使い方のヒントを書き始めました。以来、1年近くが経過したところで、Adobe XDコミュニティから最も共感されたヒントをいくつかご紹介したいと思います。もう既にご存知のヒントもあるでしょうか？

テキストの設定を継承する

Adobe XDのテキストツールを選択してタイプしてみると、テキストには標準のテキストスタイルが適用されます。しかし、もし、スタイルをコピーしたいテキストが既にある場合は、選択ツールを使ってそのオブジェクトをクリックしてからテキストツールに切り替えて、テキストを入力したい箇所をクリックするか、ドラッグ操作でテキスト領域を挿入します。すると入力されたテキストには、フォント、行間、文字間隔を含め、選択したテキストからスタイルが継承されます。

パスを閉じる

一般的に、Adobe XDでパスを編集するのは本当に簡単です。ペンツールを使って、どこかをポイントを追加したい場所をクリックするだけです。パスを閉じる場合は、最初のポイントをクリックします。曲線を閉じる場合は、最初のポイントをクリックしてからドラッグします。では、閉じる前に最初のポイントを移動したい場合は？MacならばCmdキー、Windows 10ならばCtrlキーを押しながら、最初のポイントをクリックしてドラッグすると、パスを閉じずに最初のポイントを移動できます。

背景のリアルなぼかし

背景のぼかし機能を使って、開発者がそのまま実装できそうなリアルな背景のぼかしを実現できます。iOSの機能に揃える設定はもっとも人気のヒントのひとつになりました。

• Dark: ぼかし 25、明るさ 0、不透明度 55%
• Light: ぼかし 30、明るさ 15、不透明度 0%
• ExtraLight: ぼかし 24、明るさ 40、不透明度 50%

基本オブジェクトをパスに変換

アイコンをゼロからつくり始めるよりは、矩形や楕円などの基本図形から始める方が楽なことはしばしばあります。そんなときは、図形をダブルクリックすればパスに変換できます。（何も変更を加えない場合は元に戻ります） 図形の線上では、カーソルがポイントを追加するペンツールに代わり、ペンツールで基準点をクリックすれば、図形の編集も可能です。確実にオブジェクトをパスに変更してしまいたい場合は、MacではCmd+8、Windows 10ではCtrl+8を使ってパスに変換します。

手のひらツールを利用したカンバスの移動

手のひらツールについての質問をよく受けます。答えは簡単で、スペースキーを押すとツールが一次的に手のひらツールになります。その状態でクリックしてドラッグすれば、カンバスを移動させることができます。トラックパッドのついたラップトップPCや、マジックマウスを使っているなら、2本指でスワイプすればやはりカンバスを動かせます。

色をすばやく指定するショートカット

これは最近の機能で、昨年、16進数での色指定にショートカットを追加しました。任意の値を入力し、その繰り返しを6つの数字列にできるのです。

• 単一の文字（例えば f）は、すべての値が繰り返しに（#ffffff）
• 2桁の文字（例えば ab）は、交互に繰り返される（#ababab）
• 3桁の文字（例えば 123）は、その順に文字列が繰り返される（#112233）

複製とコピー＆ペースト

コピー＆ペーストができるのに、何故複製コマンドがあるのか質問されることがあります。それは、コピー＆ペーストはコピーされたオブジェクトを最前面に配置するのに対して、複製されたオブジェクトは同じ重なりの位置に収まるからです。複雑なファイルでは、これらを使い分けると便利でしょう。コピー＆ペーストは、グループの中へ、あるいは外へオブジェクトを移動するのにも利用できます。

書き出しのワークフロー

アセットの書き出しは、特に開発者に手渡すときには、とても重要なワークフローの一部です。Adobe XDの書き出しワークフローは、複数サイズの書き出しが、今どきの画面デザインでは重要だという点を認識しています。

デフォルトで、Adobe XDは、プラットフォームに応じて異なる解像度で複数の書き出しを行います。例えば、iOSネイティブ開発のために書き出すなら、アセットの1x, 2x, 3xのバージョンが必要になるでしょう。もしアイコンを100 x 100のサイズでデザインし、“1x”でデザインされたと指定すれば、100 x 100, 200 x 200, 300 x 300の組み合わせが書き出されます。しかし、もし90 x 90でデザインして、“3x”でデザインされたと指定すれば、 30 x 30, 60 x 60, 90 x 90の3バージョンが書き出されます。

選択と編集モード

レイヤーパネルが搭載される前は、編集モードが頼りでした。背景、テキスト、アイコンを含むような複雑なアイコンバーを扱うために、グループの入れ子を利用することもあります。その場合、アイコンはグループで、テキストや背景の矩形と同じレベルにあることでしょう。そんな状況で役立つアイデアのいくつかです。

• ダイレクト選択：Cmd（Mac）または Ctrl（Windows 10）キーを押しながらオブジェクトを選択すると、どれだけ深くネストされていてもオブジェクトを直接選択できます
• 編集モードに入る：オブジェクトをダブルクリックすると、そのオブジェクトを含むグループまたはリピートグリッドの編集モードになります。一旦編集モードに入ると、そのコンテキスト内の全てのオブジェクトを操作できます（例えば、選択してお互いを整列）。
• 編集モードを終了：編集モードでEscキーを押すと、1レベル上の階層に戻ります

この一連の機能により、レイヤーパネルを使ってオブジェクトを探さなくても、グループ内外を簡単に移動できます。カンバス上のデザインに集中すれば、全体のデザインの見通しが良くなりそうです。

これらのあまり知られていないAdobe XDの機能のいくつかが気に入ったなら、「Adobe XDのリピートグリッドを使いこなすヒント」もチェックしてみてください。

この種の記事をもっと読みたいですか？他のユーザーと共有して、私に次の記事で掘り下げて欲しいことをTwitterで是非知らせてください。

__
Adobe XD ベータ版
ダウンロード

※ この記事はTop 10 Protips in Adobe XD（著者:Elaine Chao）の抄訳です。