開発しやすいデザインを作る！FigmaのAuto LayoutとCSSの関係を解説

こんにちは。UIデザイナーの石井です。UIデザインツールのFigmaにはAuto LayoutとConstraints and resizingというとても便利な機能があります。

Auto LayoutはFrame内の要素を自動で整列させる機能です。最近自分がページやUIパーツのレイアウトを組むときは、大半のフレームにAuto Layoutを設定するくらいなくてはならない機能です。

Constraintsは要素が配置されているフレームのサイズが変更されたときに、要素のサイズをスケールさせるか固定するか、また位置を上下左右中央、どの座標を基準に固定するかなどを設定する機能です。

ResizingはAuto Layoutを設定したときのみ使えるプロパティで、Auto Layoutの親要素を子要素のサイズに合わせてスケールさせるか、逆に親要素のサイズに合わせて子要素のサイズをスケールさせるか、といった設定ができます。

これらが適切に設定されていると、デザイン作業が効率的になるだけでなく、それを実装するエンジニアの方にも親切です。では、Auto LayoutやConstraintsは実際のソースコードとどのように関連しているのでしょうか？

この記事ではFigmaのAuto LayoutおよびConstraints機能の各設定項目と、InspectパネルにおけるCSSを見比べてみることにします。

Auto Layout

Auto Layoutを設定すると、インスペクタモードで表示されるCSSには display: flex; が適用されます。そのためAuto Layoutの設定を変更すると、 CSSでは flex に関連する各種プロパティが変更されることになります。

この記事では、親要素と子要素を以下のように定義します。

親要素 = Auto Layoutを設定したフレーム

子要素 = Auto Layoutを設定したフレーム直下の要素

オートレイアウトを設定したフレーム

Inspectモードでの表示

実際のCSSコーディングではAuto Layout が指定されているからといって必ずしも display: flex が最適解とは限らず、grid や float の方が適している場合もあるため注意が必要です。

Direction → 親要素の flex-direction

Figma → CSS
Vertical direction → flex-direction: row
Horizontal direction → flex-direction: column

Auto Layout設定パネルの一番左にある下と右向き矢印です。CSSでは下と右がそれぞれ、flex-direction: row / column に相当します。

FigmaのAuto Layoutでは row-reverse（左から右）, column-reverse（下から上）は設定できません。

Spacing between items → 子要素の margin

Figma → CSS
Spacing between items: n → margin: 0 n (または n 0)

Auto Layout設定パネルの左から2番目にある Spacing between items は、子要素においてDirectionで指定した並び方向のmarginに反映されます。

Figmaではそれぞれの子要素ごとに異なる値を設定することはできないことに注意してください。また、一番最初の要素や最後の要素に対しても一括で同一の値が書き出されてしまうので、実際のCSSでは :first-child, :last-childなどの擬似クラスの追加が必要なケースもあると思います。

Padding → 親要素の padding

Figma → CSS
Top, Left, Right, Bottom padding → padding: n m p q

Figmaではpaddingは上下左右それぞれに異なる値を指定できます。CSSとしてはそのまま親要素にpaddingとして設定されます。

Alignment → 親要素の align-items と justify-content

Figma → CSS
Left, Center, Right → align-items: flex-start, center, flex-end
Top, Center, Bottom → justify-content: flex-start, center, flex-end

親要素の余白が余ったり逆に足りないとき、横方向（左、中央、右）と縦方向（上、中央、下）で子要素をどのように揃えるかを指定できます。

Resizing が FixedかFill Container のときのみ意味を持つ設定です。Hug Contents に設定されていると余計な余白が発生しないので見かけは変わりません。

Packed / Space between → 子要素の justify-content

Figma → CSS
Space between → justify-content: space-between

Justify-content は前項の3つの他に、space-between（アイテムの間にスペースを均等に割り付け）も設定できます。space-around（アイテムの両端にスペースを均等に割り付け）はありません。

Resizing

親要素のResizing

width：Fixed, Hug contents
height：Fixed, Hug contents

子要素のResizing

width：Fixed width, fill container
height：Fixed height, fill container

幅と高さについて、px固定値か、親要素は子要素、子要素は親要素のサイズに応じて自動で調整されるかを選択できます。ただし、親要素のHug contentsと子要素のfill containerを同時に選ぶことはできません。親要素または子要素に対してこれらのプロパティを選択すると、もう一方は自動的にFixedになります。

親要素と子要素どちらもFixedにすることは可能です。その場合、子要素が親要素からはみ出すことがありますが許容されます。

Inspectで書き出されるCSSではシンプルに width, height の値が変わるだけなので、実際にCSSでコンテンツに応じてサイズを自動調整したい場合、 width, height は auto や 100% など別のプロパティを設定する必要がありそうです。

Constraints

Vertical direction：Left, Right, Center, Left and right, Scale
Horizonal direction：Top, Bottom, Center, Top and bottom, Scale

要素について、その要素が含まれるフレームのサイズが変わったときに、フレームの上下左右どこを基準に再配置するか、サイズを拡大縮小するかのルールを決めるのがConstarintsです。Auto Layout とは独立した別の機能になりますが、 Auto layout を設定しているかどうかで選択できるプロパティが変わります。

こちらの設定はCSSには影響しません。Figma内で要素のサイズを変更したときの挙動にだけ関わる設定です。

Auto Layout を設定した要素の Constraints

Auto Layoutを設定した要素については、Resizing で Hug contents を選ぶと Constraints の Left and right (or Top and bottom), Scale は選択できなくなります。子要素のサイズに応じて親要素のサイズが自動的に決定されるためです。

Auto Layoutの子要素は自動的に配列されるためConstraintsは設定できません。