WebDesigner's Memorandumウェブデザイナーの備忘録

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

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)で設定追加])。

Autolayoutの設定

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

設定項目

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

AutoLayoutパネル

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

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

縦並び

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

Figma Auto Layoutの横並び

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

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

Figma Auto Layout 起点の設定

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

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

Figma Auto Layout space-between

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

子要素の並び変え

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

ボタンの並び変えドラッグ前

ボタンの並び変えドラッグ後

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

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

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

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

コンテンツに応じて可変するボタン

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

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね