作って覚えるAdobe XDの便利機能 5つ
プロトタイプやデザインの制作時にAdobe XDを使っている人も多いでしょう。Adobe XDは新しい機能がちょこちょこ追加されているので、定期的にチェックするといいですね。今回はひとつのページを作成しながら、覚えておくと便利な機能を紹介します。
↑私が10年以上利用している会計ソフト！
1. 「スクロールグループ」で横スクロールを表現
「スクロールグループ」では表示範囲外のコンテンツをスクロール操作によって表示できる機能です。横にスクロールするカルーセルや、多方向に動かせるGoogleマップの埋め込みなどに使えますね。今回は横にスクロールできるイメージギャラリーを設置します。
まずはリピートグリッドで画像を表示させるボックスを用意しましょう。別途用意していた画像たちをボックスにドロップすれば画像が表示されます。
このままだと画面の外にある画像は表示されないので、「水平方向のスクロール」ボタンをクリックしてスクロールの設定をすれば完成！
2. 要素の入れ替えが楽になる「スタック」
連続して表示させる画像やテキストなどの位置を変更したいこともありますよね。そんなときに便利なのが「コンテンツに応じたレイアウト : スタック」です。この機能によって、Adobe XDがコンテンツの間のスペースを理解して、自動で調整してくれます。
こちらもリピートグリッドでコンテンツを複製していきます。複製したらコンテンツのひとつをコンポーネント化しましょう。ここでは画像とテキストをコンポーネントにしています。
「スタック」にチェックを入れ、横方向のアイコンをクリック。あとは画像とテキストが交互なるよう入れ替えました。画像とテキストの間の余白を調整する必要はありません！編集や修正が入っても作業が楽になりますね。
3. テキストの長さに合わせて余白を自動調整
余白を調整したボタンを作っていても、テキスト部分に変更が入ったらボタンの背景となる四角形もその都度サイズ変更する必要がありました。これもクリックひとつで自動調整できるようになりますよ。
コンポーネント化されたボタンを選択して、「パディング」にチェックを入れるだけで余白を固定できます。これならテキストの長さが変わってもすぐに対応できますね！
4. 要素の位置を固定する
ヘッダー部分を固定表示したい…という場面も多々あるでしょう。こちらもチェックひとつで解決です！
固定表示したいコンポーネントやグループを選択し、「スクロール時に位置を固定」にチェックを入れるだけ！プレビュー画面で見ると、スクロールしても常時画面の上にヘッダー部分が表示されていますね。
5. 要素を画面上に重ねる（オーバーレイ）
モーダルウインドウやスライドメニューなど、表示している画面の上に要素を重ねたいときは「オーバーレイ」を使うといいでしょう。ここでは右からスッと表示されるメニューを作ってみます。
メニューだけのアートボードを別途用意しておき、プロトタイプ画面でハンバーガーアイコンとメニューを連結させます。種類を「オーバーレイ」にして、アニメーションを「左にスライド」。緑色の枠の位置を調整して、表示させたい場所に移動させます。
ハンバーガーアイコンをタップすると画面の右端からメニューが表示されますよ！
完成！
チェックするだけで実装できる範囲がグッと増え、どんどん便利になっていくAdobe XD。無料で利用開始できるので、まだの人はぜひぜひ試してみてください！
Adobe XDのその他の記事
Webクリエイターボックスでは、これまでもAdobe XDについて記事にしてきました。こちらもよかったら読んでみてくださいね！
