Auto Layoutとは？
Auto LayoutとはGridレイアウトが再現できる機能です。
オブジェクトを等間隔に並べ、崩れにくいデザインを作ることができます。
決められた間隔・方向でレイアウトをとにかくゼッタイ崩さないマン。
そんなAuto Layout、覚えればすごく便利なのですが、その特徴が故に初めてFigmaを触った人は訳わかんないことになりがちだと思っています。
この記事が少しでも参考になれば幸いです。
1. フレームの伸縮と一緒にオブジェクトが伸縮しない
この現象の原因は、オブジェクトの横幅が固定されていることです。
赤枠の「Fixed」となっているところを「Fill」に変えることで、フレームに合わせて伸縮するようになります！
余談ですが、この選択肢にはFixed Hug Fillの3つがあり、それぞれ以下のような役割をします。
-
Fixed：幅を固定する -
Hug：子オブジェクトの幅に合わせる -
Fill：親オブジェクトの幅に合わせる
イメージがつきにくいのは「Hug」でしょうか。
HugはAuto Layoutを適応しているフレームに対して設定するものです。
このように、一番幅のある子オブジェクトに合わせてフレームの幅が伸縮します。
2. 並べたくないオブジェクトも並んでしまう
例えばカレンダーUIを作成するとして、今日の日にちに丸のバックグラウンドを付けたい時、Auto Layoutだとこうなります。
先程も書いたように、Auto Layoutはとにかくゼッタイ崩さないマンなので当たり前っちゃ当たり前ですね😂
この要望を叶えたいときはAbsolute機能が使えます。
この機能は2022年5月に追加された新機能です！
表現できる幅が広がって、デザインがしやすくなりました🥰
3. 左右に寄せたい
このようなデザインの時、「Auto Layoutだと文字の長さによって間隔が違うから使えない…」と思ってAuto Layoutを使っていない方もいるんじゃないでしょうか。
実はそんなことはなくて、Auto Layoutの三点ドットの中にある「space mode」を「Space between」にすることでちゃんと左右に寄せることができます。
最後に
初めはAuto Layoutの概念に慣れるのに時間がかかると思いますが、使いこなせるとデザインの幅がぐっと広がります！
こんな機能便利だよ〜などありましたらぜひ教えて下さい😊