【Adobe XD】スタックを使った動的なレイアウト

Voiced by Amazon Polly

最近になってXDのスタックを覚えたので、スタック便利ーとなっています。
アップデートはきちんとチェックしておかないといけませんね…。

さて、これは要素を積み上げたよくあるレイアウトのダミーです。
こちらをスタックを使って動的なレイアウトにしようと思います。

目次

スタックを使った動的レイアウトの作成

STEP
起点となる要素をグループ化する
このままでも構いませんが、分かりやすくするためにグループに適当な名前をつけます。
STEP
スタックにチェックを入れる
グループ化した「ダミー01」にスタックをかけます。
これで要素間のスペースを保ったまま移動できるパーツが完成しました!
STEP
入れ子になったグループにもスタックを入れる
スタックをかけた「ダミー01」を開いてみると、XDが判断して勝手に入れ子状にグループができています。
この勝手にできたグループにはスタックがかかっていません。
こちらもグループも
このままテキストを打つとテキストがあふれてしまいます。
なので、このグループにもスタックのチェックを入れます。
テキストの長さによって背景の要素が可変するようになりました!
STEP
コンポーネントにする
これをコンポーネントにしておきます。緑色の枠が付きましたね。
STEP
リピートグリッドにする

ここで便利なプラグイン「Repeat Gid Fitter」を使用すれば、
リピートグリッドの緑の枠を要素ぴったりで作成してくれます。
しかも、半端な数を設定するとマスクして隠してくれる優れもの!

STEP
リピートグリッドで任意の数に増やす
「Repeat Gid Fitter」 のおかげでリピートグリッドの緑の枠が要素にぴったりフィットしています。
アキを調節しておきましょう。
STEP
リピートグリッドを解除する
リピートグリッドを解除したのでインスタンスがたくさん並びました。
STEP
インスタンスにスタックをかける
インスタンスをグループ化してスタックにチェックを入れます。
STEP
完成!
テキスト量によって可変するレイアウトの完成です!

メインコンポーネントを変更してみる

メインコンポーネントに修正を加えてみましょう。

先ほどは説明を省いてしまいましたが、
リピートグリッドを解除した後、インスタンスをグループ化してスタックをかけた際に
例によって勝手に入れ子になったグループにはスタックがかかっていません。

ここにもスタックをかけておきます。

入れ子になったグループにもスタックをかける。
メインコンポーネントを編集します。

まとめ

XDの基本操作がわかっている方向けの記事なので、分かりにくい個所があるかもしれません。
すみません。

どんどんスタックを活用して作業を効率化していきたいですね。

よかったらシェアしてね!

この記事を書いた人

WebとDTP両方やる人

目次
閉じる