Figma:これで編集が楽々に!〜オートレイアウトの使い方〜

所要時間 なし | 難易度 ★☆☆☆☆ | 製作者 よこちー |
目次
1_ パーツをグループ化する
2_ グループごとにオートレイアウトにする
3_ パーツを選択してドラッグで動かすと…
4_ ラフなどをすらすら書き込める!「手書きペン」
6_ まとめ
制作
1_ パーツをグループ化する

まず、作ったものをパーツごとにグループ化していきます。
動かしたくないものはグループ化しておくと変に動くことはないので安心です。
私は青い線で囲った部分をグループ化しました。
2_ グループごとにオートレイアウトにする

今度は動かしたい、交換したいパーツを選択し、Shift+Aでオートレイアウトにしていきます。
私は青い線の中にあるものをオートレイアウトにしました。
3_ パーツを選択してドラッグで動かすと…

オートレイアウトにしたグループの中に入っているパーツを選択してドラッグで動かしてみると、なんと簡単&綺麗に位置を入れ替えることができます!
4_ 配置を変える以外にも…

他にも、オートレイアウトにすれば位置を変える以外には縦並びのものを横並びにしたり、その逆のことやフレームに合わせた調整もすることができます。
あとは右のオートレイアウトところで間隔や配置などの調整もすることができます。
ぜひいろいろ試して使ってみてください!