エンジニアでもこわくない Figmaオートレイアウトでflex・グリッドレイアウトを作ろう

はじめに

デジタルエンジニアリング部 Eビジネスエンジニアリング課の小枝です。
ここ数年は管理画面アプリのUIデザインを手掛けています。

以前の記事では、初心者向けの最小限の操作を解説していますので、そちらも読んでいただけると嬉しいです。

今回は、Figmaの最小限の操作をマスターしたエンジニア向けに、グリッドレイアウトを自力で組めるようになるための方法を解説します！
Figmaはこわくない……！

概要

対象：Figmaの基本的な操作ができるエンジニア
ゴール：自力でグリッドレイアウトを組むことができる

解説

Figmaでは、オートレイアウトを使ってcssのflexやgridのレイアウトを再現できます。
この図ではカードの中の要素がflexで構成されていて、カードの並びはgridで整列されています。

オートレイアウトの使い方

flexでは フロー：垂直もしくは水平 、gridでは フロー：グリッドを使います。 画面左のインスペクタのオートレイアウトからフローを選択できます。

ハンズオン

実際の作り方をご紹介します。 まずはカードを作って、それをgridで並べましょう。

カードを作る

1. まず、画像もしくは長方形とタイトル、テキスト本文を作ります。

 2. 上記3つを全て選択してShift+A。もしくは画面右側のインスペクタから、レイアウト＞オートレイアウトを切り替えボタンをクリック。選択した要素がフレームというグループにまとまります。

3.オートレイアウトが有効になりました。間隔を16pxにして見やすくします。
※縦並びのコンテンツだと自動で垂直のフローが選択されます。

4. パディングを縦横それぞれ16pxにして、塗りを#FFFFFFにします。

カードが完成しました！これをグリッドで並べていきます。

グリッドで並べる

5. 作ったカードを複製し、8つ並べてオートレイアウトにします。

6. グリッドになりました。見やすくするために縦横の間隔は16pxにします。

flexとgridを意識したオートレイアウトが完成しました！

おまけ：オートレイアウトの並べ替えについて

オートレイアウトを使うと要素をドラッグ＆ドロップで順番を入れ替えることができます。便利ですね～。

フロー：垂直

フロー：グリッド

まとめ

今回は、Figmaのオートレイアウト機能を使って、cssのflexやgridに近いレイアウトを再現する方法を解説しました！

• Figmaのオートレイアウトは、要素の並びや間隔、パディングなどを簡単に設定でき、コーディングにおけるレイアウト設計の考え方と同じように組むことができます。
• ハンズオンを通して、flex（要素の縦並び）とgrid（カードのグリッド表示）の基本的な組み方を体験していただけたと思います。
• 一度オートレイアウトを適用すれば、要素の順番の入れ替えもドラッグ＆ドロップで直感的に行えます。