便利なFigma機能【Autolayout編】

有名なFigmaのAutolayout機能ですが、最近ようやく使いこなせるようになってきたので、私が実際にどんな使い方をしているのか紹介します。

Autolayoutとは？

オートレイアウトはフレームとコンポーネントに追加できるプロパティです。拡大して埋めたり、縮小して調整したり、コンテンツの変更時に合わせたデザインを作成できます。デザインを変更する際に、新しいレイヤーの追加、長い文字列の入力、配置の保持が必要な場合に最適です。

Figma Learn「オートレイアウトのプロパティを調べる」から引用

つまり、Autolayoutに設定されたフレームは、子要素が増減すると、それに応じて余白や配置が自動で調整され、レイアウト調整の手間を省いてくれる機能です。

Autolayoutレベル別使い方

では実際にどんな使い方ができるか、段階ごと（初級〜中級）に紹介します。

🌷初級編

Autolayoutがよく使われる要素の一つである、ボタンを見てみましょう。
右の2つのボタンは左のボタンのテキスト量を変更したものです。

Autolayoutで作成したボタンの挙動

このように、Autolayoutに設定されたボタンは、子要素であるテキストの量が増減しても、左右のPaddingを保ちながらフレームの幅を自動で調整してくれます。

作り方は簡単です。
まず、フレームの中にテキスト要素を突っ込みます。

突っ込んだら、フレームを選択して、「Autolayout」ボタンを押すだけです。

🎉これでAutolayoutは完了です🎉
また、設定を変更したい場合は、右パネルのAutolayoutセクションに現れた数値を変更しましょう。赤い枠で囲まれた数値が、左右のPadding、青い枠で囲まれた数値が、上下のPaddingとなります。

これでなんとな〜くAutolayoutの仕組みをわかっていただけたでしょうか？
あまりにもつまらないですか？次に行きましょう。

🌷中級編

では、せっかく初級編でボタンを作ったのでそのボタンを活用して、今度はボタンのリストを作ってみました。

Autolayoutで作成したボタンリストの挙動

このように、Autolayoutが設定されたリストに新たな要素を追加すると、要素間のMarginを保ったまま、リストの最後尾に新しい要素が追加されます。

何と便利な機能でしょう。
この使い方は、UIデザイナー歴4年の私が毎日のように活用している手法です。Webサイトならヘッダーのメニューリスト、アプリならユーザーリストや支払い履歴など、あらゆる場所で使えます。

Autolayoutリストの活用例

こちらも作り方はいたって簡単。
リストに含めたいボタン（要素）を2つ以上並べます。

並べたボタンを全て選択して、「Autolayout」ボタンを押すだけです。

🎉これでAutolayoutは完了です🎉
こちらも、設定を変更したい場合は、右パネルのAutolayoutセクションに現れた数値を変更しましょう。初級編で説明した「Padding設定」の上にある数値を変更することで、要素間のMarginを調整することができます。

また、「Margin設定」の上にある矢印で、リストの向きを変更できます。
一番右のうねった矢印は、フレームから要素がはみ出してしまった時に、要素を折り返してくれる機能です。

いかがでしたか？
これらの基本が身に付いていれば、少なくともこれからの作業は楽になるはずです。
「もっと作業を楽にしたい！」「こんなのもう知ってる！」という方は次回の記事をお待ちください。上級〜マスター編を紹介しましょう。