A.C.O.のデザインナレッジカルチャーを伝えるオウンドメディア

Share

A.C.O.のデザインナレッジカルチャーを伝えるオウンドメディア

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

1 suki 11 suki

こんにちは。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を設定したフレーム直下の要素

Auto Layoutの説明

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

Inspectモードの説明

Inspectモードでの表示

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

Direction → 親要素の flex-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

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

paddingの説明
  • Figma → CSS
  • Top, Left, Right, Bottom padding → padding: n m p q

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

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

alignmentの説明
  • 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

space-betweenの説明
  • Figma → CSS
  • Space between → justify-content: space-between

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

Resizing

親要素のresizingの説明

親要素のResizing

  • width:Fixed, Hug contents
  • height:Fixed, Hug contents
子要素のresizingの説明

子要素の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

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状態のConstraintsの説明

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

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

まとめ

Auto Layout と Constraints はFigmaの中ではたくさんある便利な機能のなかの一つにすぎませんが、こうしてまとめてみるとそれだけでもさまざまなプロパティが詰め込まれていることに気付きました。

使いこなしてもらえればと思います。

A.C.O.で自分のスキルを活かしたい、キャリアアップをしたいという方はぜひ、Wantedlyよりご応募ください!お待ちしています。

A.C.O.で一緒に働きませんか。

  • 未経験可
  • デザイナー
  • ディレクター

募集内容をみる

UI/UXデザインに関するご相談や、
案件のご依頼はこちら

お問い合わせ

by Hiroki Ishii

早稲田大学創造理工学研究科建築学修了。建築設計事務所にて意匠設計の経験を経て、現在に至る。デザイン担当。デザイン部所属。

View articles

  • Share this article:
  • Get the latest insights

    UXやデザインのトピックからグローバルレポートまで、最新の情報をお届けします

    月1–2回ぐらいで届けます。いつでもキャンセルできます。Privacy Policyをご覧ください

  • Connect

    お悩みのことがあれば、お気軽にご相談ください。

    Contact