スタック [3分で分かるAdobe XDアップデート]
今年もこの季節に、大きなアップデートが来ました。
ちなみに去年は「コンポーネント」（もう1年なんですね）
今年は…「スタック」！！
より素早く・より直感的なデザインを実現してくれる、素晴らしい新機能ですので、ぜひAdobe XDをアップデート、そしてジャンジャン使っていただきたいと思います。
「スタック」の設定方法
左側の、黒背景の部分がAdobe XDで作ったデザインです。
1.「スタック」を適用したいレイヤーを全て選択→グループ化
2.「プロパティインスペクター」にある「スタック」にチェック
これで完了です。
これで何ができるのか、２つご紹介します。
①上下左右に直感的にコンテンツを入れ替え
スタックの設定には「縦軸」と「横軸」、2種類の選択肢があります。
どちらかにチェック入れた状態で、動かしたいレイヤーを選択して動かすだけ。（グループ化されているのでダブルクリック、もしくはレイヤーパネルから選択が必要です）
＜縦軸＞
＜横軸＞
直感的に入れ替えができます。
なぜこんなちょうどよく間隔を取ってくれるのかというと…
スタックを設定した時点の間隔を記憶して、移動をしてもそれが維持される仕組みになっています。
特に自分がびっくりしたのが、この間隔も(個別にですが)調整できるんですね！！上画像の紫のハイライトエリアを上下にドラッグするとできます。
②コンテンツに応じた自動レイアウト調整
もう見た瞬間に「最高！！！」ですよね。
文字数が変わって改行しても、逆に削除しても、コンテンツに応じて自動でレイアウトを調整してくれます。
使ってみて気になったところ
自動でグループ化されるコンテンツに注意
縦軸でスタック設定をすると、横並びになっているレイヤーが自動でグループ化されました。確かに上下移動する際、ここはグループ化されて納得、ですが。
解除すると崩れます。
こういったデザインは、下のキャプションもセットで動かしたいですよね。
スタック設定する前に、動かすであろう「かたまり」を意識して、グループ化を事前にやっておいた方がいいと思いました。
適当にやりすぎると結構ずれる
ドラッグでポーン！超楽じゃん！と思いきや、
縦軸移動の時に少し横にずれる。
横軸移動の時に少し縦にずれる。
これは実際に触ってもらうとよく分かると思いますので、操作した後はズレてないか注意が必要です。
以上、「スタック」でした！
まずは触って遊んでみよう！！
＜Adobeさんの公式記事はこちら＞
最後に告知です
Adobe XDについて飲みながら語ろう、という「オンライン屋台」を開催することになりました。
今回の新機能についても、ビールやコーヒー片手に、皆さんとリラックスして語っていきたいと思ってますので、ぜひお時間ある方は参加されてみてください。（限定10名です！）
この記事が気に入ったらサポートをしてみませんか？