【adobe XD】メニューを編集するたびにレイアウトを調整することにうんざりしているデザイナーにスタックを捧げたい
あなたの夢にお邪魔します
イッツミー
アオキタカユキです
どうも皆様御機嫌いかがでしょうか？今回はXDの代名詞といっても過言ではない「スタック機能」をご紹介いたします。こんな経験ありませんか？メニューをデザインしていて途中で一要素を削除したときにレイアウトを詰める作業。こういうもんだと思っていましたが、さすがはadobeパイセン。この不毛な作業を自動的に解消できる機能をXDに搭載しています。昭和なデザイナーな私だなもんで、噂には聞いていましたがどうもこの機能を学習するきにはなれませんでした。新しいものへの恐怖ですかね。そんな折弊社デザイナーチームの「名人」君がぱぱっと作成してくれました。
文章だとイメージがつきにくいので動画を用意しました。
こんな感じでデザインのレイアウトを崩すことなく自動的に調整してくれる機能が「スタック」です。
まずはこのような画面をご用意。
今回は弊社サービスのCarelyで先日リリースした「共有フォルダ」の画面デザインを使わせていただきます。
タブメニューを作成してグルーピングしてください。
そして画面右にある「スタック」にチェックをいれて、横向きを選択（縦向きもありましが要をメニューの方向によって選択してください。）
おわりです。これにて設定は完了。たった2ステップで長年悩まさせれていた不毛な作業から開放されます。控えめにいって最＆高ですよね。
そしたら実際に編集してみましょう。まずは順番の入れ替え。メニューを選択して横にずらす。自動的にレイアウトが調整されて配置されます。
次は削除。いらないメニューを選択して削除。自動的にレイアウトが調整されて詰めて配置されます。
XDはUIに特化したツールなのでこういう機能も用意してくれてます！効率的にUIを作成してリッチにアウトプットしていきましょう！
