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