Figmaのグリッドでテーブル（表）を作る方法

今回は、Figmaのオートレイアウトの「グリッド」を使って、テーブル（表）を作る方法を紹介します。

Figma Designには表を作る専用の機能がありません（FigJamとFigma Slidesにはあります）。これまでは、セルを横に並べた行をさらに縦に積む、入れ子のオートレイアウトで表を作るのが定番でした。

Figmaでシンプルなテーブル（表）を作る方法

今回は、Figmaでシンプルなテーブル（表）を作る方法を紹介します。ヘッダーと罫線だけのシンプルな表を、「Component」と「Auto Layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 ... 続きを読む

グリッドを使うと、列と行のマス目にセルを直接並べられるので、列幅の調整や列の入れ替えが楽になります。

なお、内容は2026年11月時点の情報です。最新の仕様はFigma公式のヘルプセンターをご確認ください。

この記事のターゲット

• 管理画面や一覧画面をデザインする方

• 行ごとのオートレイアウトを入れ子にして表を作っている方

• 列幅をCSSの指定に近い形で決めたい方

2つの作り方の違いは？

従来の入れ子のオートレイアウトと、グリッドの違いは以下の通りです。入れ子で作る方法は、上述の記事で紹介しています。

列と行の数が決まっている表はグリッド、行の増減や文字量の変化が大きい表は従来の入れ子のオートレイアウト、という使い分けがよいと思います。

データの件数で行数が変わる一覧なら、行をコンポーネントにして積む方が扱いやすい場面もあります。

1. セルをコンポーネントにする

まずは、表の部品になるセルを作ります。

ヘッダー用と本文用の2種類のセルを作り、「種類」というプロパティを持つコンポーネントのバリアントにまとめました。ヘッダーは背景色を付けて文字を小さめの太字に、本文は白い背景にしています。

セルの中は横のオートレイアウトで、左右に16のパディングを入れています。罫線は、セルの下側にだけ内側の線を1px付けました。こうしておくと、セルを並べたときに行の区切り線がそのまま表の罫線になります。

2. セルをグリッドに並べる

次に、表の外枠になるフレームを作り、グリッドに切り替えます。

フレームを選択して、右サイドバーのオートレイアウトの「フロー」から「グリッド」を選びます。列数と行数の欄に、今回は5列・6行（ヘッダー1行と本文5行）を入れました。

あとはセルのインスタンスをフレームの中に入れていくと、左上から順にマス目へ配置されます。レイヤーパネルを見ると、行のフレームが無く、セルが30個そのまま並んでいるのがわかります。

参考：Use the grid auto layout flow（Figma ヘルプセンター）

3. 列幅を決める

グリッドでは、列ごとに幅の決め方を選べます。今回の表は以下のように設定しました。

チェックボックスの列は中身の大きさが変わらないので固定にして、残りの列はfrで比率を決めています。表の幅を800にすると、チェック列の48と外枠の線を引いた残りが2:3:1:1に分かれ、1frはおよそ107pxになりました。

表の幅を変えても、比率を保ったまま各列が伸び縮みするのがfrの便利なところです。

列幅は、表を選択した状態で列の上にカーソルを合わせると出るつまみをクリックして設定します。右サイドバーが「グリッド」の設定に切り替わり、列と行ごとに「固定」か「塗り」かと、その数値を選べます。

frで分ける列は「塗り」になっています。種類のメニューを開くと、「幅を固定」「コンテンツを内包」「コンテナに合わせて拡大」の3つが並びます。

開発モードでCSSを確かめる

この列幅の決め方は、CSSの grid-template-columns とほぼ同じです。開発モードで表を選択すると、実際に出力されるCSSを確認できます。

今回の表では、以下のCSSが出力されました（コピーしたものを、レイアウトにかかわる行だけ抜き出しています）。

frの列は minmax(0,2fr) の形で出力されます。中身の長い文字に引っ張られて列幅が広がらないようにする書き方で、Figma上の見た目どおりの比率で列が分かれます。行は repeat() を使わずに1行ずつ書き出されるので、実装するときに整理するとよいでしょう。

4. ヘッダー行と罫線を整える

行の高さは、ヘッダーの1行目を固定40、本文の2行目以降を固定52にしました。セルの幅と高さは「コンテナに合わせて拡大」にしておくと、マス目いっぱいに広がります。

罫線は、手順1でセルの下側に付けた線がそのまま行の区切りになります。外枠には、表のフレームに内側の線を1px付けました。

注意点として、2026年7月以降の新しいオートレイアウトでは、内側の線がレイアウトの計算に含まれます。

今回の表なら行の合計は300ですが、高さを300で固定すると上下の線の分だけ最後の行が押し出され、下の罫線が切れます。高さを302にすると収まります。固定の高さにする場合は、線の太さの分も足しておきましょう。

5. 行を足す・列を並べ替える

行を足す

行を足すときは、「行数」を1つ増やしてから空いたマス目にセルを入れます。ヘッダーと本文の高さを分けているので、足した行の高さも52に揃えておきます。

列をドラッグで並べ替える

2026年5月の更新で、列や行をドラッグで並べ替えられるようになりました。列を選ぶと、列の上に「2fr」のような幅の表示とつまみのアイコンが出ます。

つまみを押したまま左右に動かすと、列が半透明になってカーソルについてきて、移動先に青い線が出ます。離すと列ごと入れ替わります。

入れ子のオートレイアウトだと全部の行でセルを入れ替える必要があったので、ここはグリッドの大きな利点です。

参考：Figma introduces drag-to-reorder grid controls（Createwith）

6. セルを結合する

グリッドでは、1つのセルを複数の列や行にまたがらせる「スパン」が使えます。表計算ソフトのセルの結合にあたる機能です。

例として、未提出の行だけ「提出日」と「状態」を1つのセルにまとめ、締切を書き込んでみました。

手順は以下の通りです。

1. 結合した先のマス目にあるセル（ここでは「状態」のセル）を削除して、空けておく

2. 広げたいセルの幅を「コンテナに合わせて拡大」にする

3. キャンバス上でセルの端をドラッグして、隣のマス目の端に吸着させる。または、右サイドバーの「列スパン」に「2」を入れる

結合したセルを選ぶと、右サイドバーに「列スパン」2・「行スパン」1と表示され、キャンバス上にも「2×1」と出ます。

先にマス目を空けておくのがポイントです。空いたマス目が足りないと、Figmaが既存のセルを動かしたり、新しい行や列を足したりして場所を作ろうとします。

グリッドでテーブルを作るときの注意点

便利なグリッドですが、表として使うと気になる点もあります。

インスタンスで行や列を隠せない

表をコンポーネントにしてインスタンスで使う場合、インスタンス側で行や列の数を変えたり、一部を隠したりはできません。

Figmaのフォーラムでも、インスタンスで行や列を切り替えたいという要望が出ています。列の構成が違う表が要るなら、表のバリアントを分けて作るか、従来の入れ子のオートレイアウトで作る方がよいでしょう。

参考：Ability to toggle autolayout grid rows and columns in a component instance（Figma Forum）

列を削除すると中身も消える

列や行を削除すると、その中に入っていたセルも一緒に消えます。列を消すつもりでセルのデザインまで消してしまわないよう、削除の前に中身を確認しておきましょう。

入れ子のグリッドで列幅を共有できない

グリッドの中にグリッドを入れることはできますが、親の列幅を子のグリッドに受け継がせる設定は見当たりません（CSSでいう subgrid にあたるもの）。ヘッダーと本文を別々のグリッドに分けると列幅がずれやすいので、1つのグリッドにまとめて作るのがおすすめです。