Figma忘備録（オートレイアウト)

お仕事でFigmaを使用することが多くなってきたのですが、日々発見があって楽しいです。
BBAだからすぐ忘れるけど。

なので、使いやすいなーと感じた機能面の使い方を忘備録的に記載します。
同じことで悩んでいる人がもしいたら参考になれば幸い。

オートレイアウトってなんぞや？

オートレイアウトとは、簡単に言えば枠です。
HTMLでいうとdivみたいなイメージ。

この場合、テキストの天地左右に10pxのpadding(内余白)を設定したblockだと考えると良き

テキストの横幅や高さの可変で十分じゃ～ん
ってなる人もいるかもしれませんが、所謂Webデザインではこの考え方すごく大事なので、意識してblock化していくと良きと思います。
どうしてその考え方が良いのかは、また気が向いたら書きます、知らんけど。

オートレイアウトを使って要素を均一に整理する

例えばメニューアイコンとクローズアイコン・ロゴの３つを、それぞれ左端・中央・右端に配置したいとします。

均一に並べたい３つの要素を選択した状態でオートレイアウトの追加を選択します。

オートレイアウトでできたFrameの横幅を、画面幅いっぱいに広げます。

アイテムの間隔部分に「auto」と入力します。

てってれー。

これ、なんとなしにやって「あ、こんなことできるんですね」って最近なりました。
これに気付くまではいちいち数値を微調整したりしてて、ものすんごいダルかったです。もっと早く気付けばよかった・・・。

いまだとぱっと見、メニューアイコンやクローズアイコンの周りに余白がないので、ここもオートレイアウトを追加して整えてみましょう。

なんかとってもそれっぽくなりました。

Figma使い始めの人を見ると、結構Group機能で何とかしようとしてる人が多い印象を受けたので、オートレイアウトおすすめです。
ぜひお試しあれ。