Adobe ツールの中でも、スマホアプリやサイト全体などのさまざまなデザインを軽々と作ることができる「Adobe XD」。
モグモグさん
Adobe XD を使い始めたばかりでもっと使いこなしたい方に向けて、
Adobe XD の知っていると便利な小技をご紹介いたします。
要素同士のサイズをすぐに知りたい時に使える小技「optionキー」
モグモグさん
デザインを作っている時に、要素間や余白の距離を知りたい…。
そんな時に便利なのが、「optionキー」です！
まずは要素をクリックして、パソコンの「optionキー」をクリックすると、一発で上下左右の距離を表示してくれます。
※Windowsの場合は「Altキー」ですのでご注意ください。
モグモグさん
とっても基本ですが、重要な小技の一つです。
テキストの幅を固定化する小技
モグモグさん
テキストの幅を固定しておきたい！
そんな時に使えるのが、「エリア内テキスト」ボタンです。
エリア内テキスト（黄色の丸の中の一番右にあるボタン）を押して、テキストの横幅を固定します。
テキストを入れ続けていても、固定した横幅で自動的に折り返ししてくれます。
一発でクリッピングマスクも簡単にできるショートカットキー
デザイナーなら頻繁に使う機能のひとつにクリッピングマスクがありますね。
Adobe XD ではクリッピングマスクも一発でできちゃいます！
やり方は、対象のクリッピングマスクしたい要素を選択して「shift + Command ⌘ + M」をするだけです！
Adobe XD では、ショートカットキーが豊富にあるため、一度覚えておけば、他のAdobeツールでも類似操作で使えたりするのでとっても便利ですよ。
スピードをあげて効率よく仕事するために、ショートカットキーを覚えておくのも良いかもしれません。
ちなみに、公式サイトではショートカットキー一覧表がダウンロードできます！
モグモグさん
リピートグリッドで簡単にパターン作成できる！
Adobe XD では「リピートグリッド」という機能があります。
この機能を使えば、簡単にパターングラフィックが作れちゃうんです。
やり方はとっても簡単。
まずはパターン化したい要素をクリックして、右側にある「リピートグリッド」ボタンをクリックすると、要素に緑色の点線が表示されます。
緑色の点線上にある白い棒を上下左右に動かしてみると、同じ要素がたくさん出現します！
要素同士の余白を調整したい場合は、カーソルを合わせるとピンク色の帯が出てくるので、ピンク色の帯上でドラックして動かせば調整可能です。
グラフィックを作るのは、Adobe 製品のIllustratorやphotoshopじゃないと…と思われがちですが、意外とAdobe XD上でも簡単なグラフィックを作ることができます。
使いこなせば無限の使い方ができますね！
図形と図形をくっつけて１つに！合体ボタン
ちょっとした図形を作りたい時に便利なのが合体ボタンです！
例えば、吹き出しを作りたい時、三角形と四角形を重ねてみると、ラインが図形同士にあるので綺麗な吹き出しになりませんよね。
（ラインが残っちゃう…）
こんな時には、右上にある「合体ボタン」を使うと図形同士がくっついて、吹き出しにすることができます！
（青色になっているボタンが合体です）
ちなみに合体以外にも横に並んでいるボタンで図形を多様な形に変えることができます。
詳しくは公式サイトからチュートリアル動画もあるのでチェックしてみてくださいね！
Adobe XD を契約してない人でもデザインを見れる？！デザインの共有
モグモグさん
例えば、エンジニアの方に作ったデザインを見せたいけど、エンジニアさんはAdobeを契約していないからデータが開けない…
実は、Adobeアカウントを持っていない人でもデザインデータを簡単にシェアすることができちゃいます！
Adobe XD の左上をみてみると「共有」というボタンがあります。
共有ボタンをクリックして、リンクを作成すると、URLが発行されます。
そのURLをシェアするだけで、誰でもアクセスしてデザインデータを確認することができます。
表示設定などの詳細は公式サイトでも解説されていますのでぜひチェックしてみてください！
まとめ
Adobe XD は実はいろいろなことができるということを知っていただけましたか？
ここで紹介したのはほんの一部の小技ですが、皆さんも自分だけの小技を見つけてみるのも楽しいかもしれません！
筆者もAdobe XDのヘビーユーザーなので、小技を見つけ次第記事を更新していきますのでお楽しみに！
