デジタルエンジニアリング部 Eビジネスエンジニアリング課の小枝です。
ここ数年は管理画面アプリのUIデザインを手掛けています。
以前の記事では、初心者向けの最小限の操作を解説していますので、そちらも読んでいただけると嬉しいです。
エンジニアでもこわくないFigmaかんたん操作（初級編）今回は、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に近いレイアウトを再現する方法を解説しました！