Kouhei Hayashi / はやし こうへい
スタック [3分で分かるAdobe XDアップデート]
見出し画像

スタック [3分で分かるAdobe XDアップデート]

Kouhei Hayashi / はやし こうへい

今年もこの季節に、大きなアップデートが来ました。
ちなみに去年は「コンポーネント」(もう1年なんですね)

今年は…「スタック」!!
より素早く・より直感的なデザインを実現してくれる、素晴らしい新機能ですので、ぜひAdobe XDをアップデート、そしてジャンジャン使っていただきたいと思います。

「スタック」の設定方法

画像1

左側の、黒背景の部分がAdobe XDで作ったデザインです。

1.「スタック」を適用したいレイヤーを全て選択→グループ化
2.「プロパティインスペクター」にある「スタック」にチェック

これで完了です。
これで何ができるのか、2つご紹介します。

①上下左右に直感的にコンテンツを入れ替え

スタックの設定には「縦軸」と「横軸」、2種類の選択肢があります。
どちらかにチェック入れた状態で、動かしたいレイヤーを選択して動かすだけ。(グループ化されているのでダブルクリック、もしくはレイヤーパネルから選択が必要です)

<縦軸>

画像2

<横軸>

画像3

直感的に入れ替えができます。
なぜこんなちょうどよく間隔を取ってくれるのかというと…

スクリーンショット 2020-06-17 8.38.14

スタックを設定した時点の間隔を記憶して、移動をしてもそれが維持される仕組みになっています。

特に自分がびっくりしたのが、この間隔も(個別にですが)調整できるんですね!!上画像の紫のハイライトエリアを上下にドラッグするとできます。

②コンテンツに応じた自動レイアウト調整

画像5

もう見た瞬間に「最高!!!」ですよね。
文字数が変わって改行しても、逆に削除しても、コンテンツに応じて自動でレイアウトを調整してくれます。

使ってみて気になったところ

自動でグループ化されるコンテンツに注意

スクリーンショット 2020-06-17 9.38.11

縦軸でスタック設定をすると、横並びになっているレイヤーが自動でグループ化されました。確かに上下移動する際、ここはグループ化されて納得、ですが。

スクリーンショット 2020-06-17 9.39.06

解除すると崩れます。
こういったデザインは、下のキャプションもセットで動かしたいですよね。

スタック設定する前に、動かすであろう「かたまり」を意識して、グループ化を事前にやっておいた方がいいと思いました。

適当にやりすぎると結構ずれる

ドラッグでポーン!超楽じゃん!と思いきや、
縦軸移動の時に少し横にずれる。
横軸移動の時に少し縦にずれる。

これは実際に触ってもらうとよく分かると思いますので、操作した後はズレてないか注意が必要です。

以上、「スタック」でした!
まずは触って遊んでみよう!!

<Adobeさんの公式記事はこちら>

最後に告知です

Adobe XDについて飲みながら語ろう、という「オンライン屋台」を開催することになりました。
今回の新機能についても、ビールやコーヒー片手に、皆さんとリラックスして語っていきたいと思ってますので、ぜひお時間ある方は参加されてみてください。(限定10名です!)


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Kouhei Hayashi / はやし こうへい
【楽しいからこそシンカ(進化)するフリーランス】 ・デザイン初学者の方に学びになるネタお届け中 ・ウェブデザイン ・グラフィックデザイン ・デジハリ福岡 講師 ・Adobe XD ユーザーグループ福岡 代表