FigmaのAuto Layout入門｜繰り返しのレイアウトやコンテンツに応じて横幅可変するボタンをラクに作る

FigmaにはAuto Layoutという機能があります。

このAuto Layoutを利用すると、コンテンツに合わせて変化するフレーム（アートボード）が作れます。

Auto Layoutとは

「Auto Layout」とは、コンテンツに応じて変化するフレームの作成ができます。

「Layout」と名前が付いているので、配置だけかと思ってしまいますが「テキスト量に応じての変化」や、「メニューやリストの順番をすぐ変えられる」「隣り合わせに並んでいるレイアウトをうまく補正してくれる」など柔軟なデザインを作るために必要不可欠です。

• CSSのFlexboxを意識したレイアウトができる
•  テキスト量に合わせて自動でサイズが変わるボタンを作れる
  • ボタンごとに細かいサイズ調整をしなくてよくなる

Auto Layoutの設定

Auto Layoutはどの要素にも好きに設定できます。

設定したい要素を選択したらプロパティパネルにある「Auto layout」の右にある「＋」をクリックします（もしくは右クリックして［Add Auto Layout（shift + A）で設定追加］）。

Auto LayoutはCSSのFlexboxをデザインツール上で再現する機能と考えると分かりやすく、選択した要素をグループ化する形でFrame（フレーム）が親要素として追加され、フレーム直下は子要素として扱われます。

設定項目

Auto Layoutを追加するとパネル上にいろんなアイコンが表示されます。

「↓」と「→」はレイアウトの並びを指定します。

「→」アイコンをクリックすると子要素が縦並びになります。

「↓」アイコンをクリックすると子要素が横並びになります。

その横の2つのアイコンは、子要素間の幅と、親要素周りのパディングの指定です。

1番右端のアイコンをクリックすると上下左右のどこを起点にリサイズするか指定できます。

上下の場合はCSSのalign-items、左右の場合はjustify-contentの指定がされます。

セレクトボックスの「Packed」を「Space between」にすると子要素間の幅がAutoになり、親要素の横幅いっぱいに広がるようになります。

これはCSSのjustify-content: space-between;と全く同じ挙動ですね。

子要素の並び変え

子要素を並び変えたい場合は、子要素を選択して、入れ替えたい場所にドラッグアンドドロップをするか、レイヤー位置を入れ替えます。

レイヤーを入れ替える場合は、横並びの場合は「レイヤーで上にいくほど右に並べられる」のと、縦並びの場合は「レイヤーで上にいくほど下に並べられる」ようになっています。

縦並びの場合にレイヤーの並びと実際にレイアウトされる並びが反対になるので注意が必要です。

コンテンツ量に応じて横幅を可変する

テキストに対してAuto Layoutを設定して、Frameに対して背景色を設定するとコンテンツ量に応じて横幅が変化するボタンを作れます。

ボタン1つ1つの横幅を指定して回る必要がなくなりますね。
設定もAuto Layoutを指定するだけなので非常に簡単です。

ルールを決めてコーディングしやすいレイアウトができる

このようにFigmaのAuto Layoutでは、Flexboxをそのまま指定するような作りになるので、コーディングをかなり意識したデザインになります。

ただ、デザインでAuto Layoutを指定されてあるからといって、コーディングでFlexboxを指定するのが最適とは限りません。
そこはコーダー側が意識してなにが最適か考える必要はありますが、コーディングしにくいデザインになることは減らせるでしょう。