こんにちは、あるいはこんばんは。ひよこベアです。
Figmaで表を作る時、結合セルが入った瞬間に一気にややこしくなりませんか？ 今回はオートレイアウトの「グリッド」を使って、結合ありの表をなるべくストレスなく作る方法を紹介します。
今回使う機能
まずは、簡潔にグリッドオプションについて紹介します。
1. 「グリッド」オプションとは
オートレイアウトのフローで、従来の「垂直（縦並び）」や「水平（横並び）」に並ぶ3つ目の選択肢として追加されたレイアウト方式です。オブジェクトを「列（カラム）」と「行（ロー）」の両方に基づいて配置できます。
- ※ 2026年2月17日時点ではオープンベータ版の機能です
2. 「ラップ（折り返し）」との違い
ラップ： 要素がフレーム端に到達すると自動的に次の行へ送られる仕組み。
グリッド： 決まったグリッドの中に配置され、要素が「複数の列や行にまたがる（スパン）」ことが可能です。
今回は、画像のように3×4の列や行が一部結合した形の表を作っていきます。
表を作る
表を作成する前に、見出し部分とセル部分のデザインをコンポーネントにしておきました。こうすることで、全体のデザインを変更する時にも楽になります。
線の入ったデザインにする場合は、線を「外側」に配置されるようにしておいてください。
ベースを配置する
グリッド機能を使いやすくするために、まずは幅を固定したフレームを作成します。幅が固定されたフレームがあることで、その中にあるフレームでサイズを「コンテナに合わせて拡大」設定にすることができるようになります。
幅を固定したフレームの中に、新しくフレームを作成し、オートレイアウトにした上でサイズ変更部分を「コンテナに合わせて拡大」にしておきます。
フレームの設定をする
フレームのフロー設定の中に「グリッド」はあります。こちらを選択することで、自動的に2×2のマスがフレームの中に作られます。
ここから表のマスを増やすのに、新しく現れた「グリッド」を使って調整します。「2×2」と書かれた部分をクリックすることで設定のポップアップが表示されるので、直接数字を入力するか、マス目部分をクリックしたままドラッグします。入力した分だけ、フレームの中に淡い枠が作成されます。
それぞれの枠にもオートレイアウトが適用されていて「内包」や「拡大」、固定の数値を指定することができます。表の上部または左部の水色丸や、ポップアップ下の「グリッド設定を開く」からまとめて設定できます。列は「拡大」、行は「内包」を指定しておくと意図しない崩れが出にくくなります。
設定したらフレームの中の淡い枠に、作成しておいたコンポーネントをコピー＆ペーストで入れていきます。入れたコンポーネントをAlt/optionを押しながらドラッグで複製し、別の枠に入れることも可能です。
この時、結合する二つ目のセル部分は空けておきましょう。
全部に入れたら、外のフレームを内包にして全体を調節していきます。
詳細を指定していく
デザインに合わせて、グリッドの間隔やパディングを調整します。今回作るデザインではどちらも不要なので0にします。
そして、スパンの部分を整えていきます。結合する予定のセルの中でコンポーネントを入れている方を選択すると、右のオートレイアウトエリアに「列スパン」「行スパン」という項目が増えますので、該当する方の数字を入力することで、セルが連結した形にすることができます。
横に伸ばしたい時は列スパン、縦に伸ばしたい時は行スパンになります。数値を入力するエリアにアイコンがありますので、わからなくなっても判別は容易です。
数値を入れたのにセルが広がらない場合は、コンポーネントのサイズ設定が内包になっている可能性があります。拡大にすることで、スパンで伸ばした分広がってくれます。
最後に、グリッドオプションを設定したフレームに線をつけて完成です。
完成＆アレンジ
ということで完成しました。外枠をセルのコンポーネントと別にしているので、外枠だけ色を変える・太くするなども自由に調整可能です。
また、セルをコンポーネントにしているのでアレンジも自由です。例えば、間隔に数値を入れ隙間を作り、コンポーネントの線を消して塗りに色をつければ、まったく違った印象の表にすることも可能です。自分のデザインにあった表を作成してみてください。
注意点
うまくいかない、という場合は以下の項目を確認してみてください。
- 表の線が重複したり隠れてしまう場合、コンポーネントの線の位置以外に「オートレイアウト設定」も確認してみてください。グリッドオプションのフレームを選択した状態で「オートレイアウト設定」を開き、線という項目が「除外済み」になっているかチェックしてみてください。
- スパンが複雑で入り組んでいる場合、線がガタガタになってしまうことがあります。レイヤーの並び順が左→右、上→下となっているとうまくいくので、スパンを設定する時に左上から順番に設定していってください。どうしてもうまくいかない場合は、上記のオートレイアウト設定を「含まれる」にして、線の太さで見え方を調整することも可能です。
