【adobe XD】メニューを編集するたびにレイアウトを調整することにうんざりしているデザイナーにスタックを捧げたい | Dev Driven 開発・デザインチーム 【adobe XD】メニューを編集するたびにレイアウトを調整することにうんざりしているデザイナーにスタックを捧げたい | 働くひとと組織の健康を創る iCARE

BLOG

【adobe XD】メニューを編集するたびにレイアウトを調整することにうんざりしているデザイナーにスタックを捧げたい

青木隆之
2021/04/10
0

adobe XDのスタック機能

あなたの夢にお邪魔します

イッツミー

アオキタカユキです

どうも皆様御機嫌いかがでしょうか?今回はXDの代名詞といっても過言ではない「スタック機能」をご紹介いたします。こんな経験ありませんか?メニューをデザインしていて途中で一要素を削除したときにレイアウトを詰める作業。こういうもんだと思っていましたが、さすがはadobeパイセン。この不毛な作業を自動的に解消できる機能をXDに搭載しています。昭和なデザイナーな私だなもんで、噂には聞いていましたがどうもこの機能を学習するきにはなれませんでした。新しいものへの恐怖ですかね。そんな折弊社デザイナーチームの「名人」君がぱぱっと作成してくれました。

文章だとイメージがつきにくいので動画を用意しました。
adobe XDのスタック機能

こんな感じでデザインのレイアウトを崩すことなく自動的に調整してくれる機能が「スタック」です。

まずはこのような画面をご用意。
今回は弊社サービスのCarelyで先日リリースした「共有フォルダ」の画面デザインを使わせていただきます。

adobe XDのスタック機能

タブメニューを作成してグルーピングしてください。

adobe XDのスタック機能

そして画面右にある「スタック」にチェックをいれて、横向きを選択(縦向きもありましが要をメニューの方向によって選択してください。)

adobe XDのスタック機能

おわりです。これにて設定は完了。たった2ステップで長年悩まさせれていた不毛な作業から開放されます。控えめにいって最&高ですよね。

そしたら実際に編集してみましょう。まずは順番の入れ替え。メニューを選択して横にずらす。自動的にレイアウトが調整されて配置されます。
adobe XDのスタック機能

次は削除。いらないメニューを選択して削除。自動的にレイアウトが調整されて詰めて配置されます。
adobe XDのスタック機能

XDはUIに特化したツールなのでこういう機能も用意してくれてます!効率的にUIを作成してリッチにアウトプットしていきましょう!

0