figma オートレイアウト使ってみた
2025 年 8 月 7 日 by marukorはじめに
最近Figmaでオートレイアウトを試してみたので、その感想や使い方をざっくりまとめます。
今まで手動で整えていたレイアウトが、自動でいい感じに揃って感動しました。
オートレイアウトとは
要素の間隔や配置を自動で調整してくれる便利な機能です。
flexやgridなどの考え方で配置することができ、よりコードに近い形でレイアウトができるようになっています。
オートレイアウトを使ってみる
オートレイアウト適応方法
要素を４つバラバラに配置しました。
４つの要素をフレームで囲み赤枠の場所を押下します。
すると以下のように自動で整列されました。
いまは上側基準で整列されているので、これを中央にしたい場合は赤枠の部分で配置を変更することができます。
赤枠のエリアでは要素をそろえるための位置を指定することができます。
可変する要素の作り方
右側メニューのサイズ変更で「コンテンツを内包」を選択する
そうすると要素の中のコンテンツに合わせて、要素の幅が可変してくれるようになります。
一番右側の要素を削除すると、その幅を縮めるように変化してくれるようになります。
要素の幅を固定した場合は、親要素よりも中の要素の幅が大きくなった場合このように要素が見えなくなってしまいます。
赤枠の部分を選択すると、あふれた要素は折り返すように設定できます。
要素の片方を固定して、片方を可変にしたい場合
左側を固定幅に設定します。
右側をコンテナに合わせて拡大に設定します。
左側が幅が固定され、右側の要素が可変するようになります。
要素を立て並びにしたい場合は赤枠の部分を選択することで要素を立て並びにできます。
ここのボタンで要素を立て並びにしたり、横並びにしたりなどを設定することができます。
まとめ
- ● オートレイアウトを使うことでデザインの作業効率が上がった
- ● 慣れるまでは少し大変だけど、慣れたら手放せない機能
タグ: figma
