Figmaで調整しやすいテーブルを作成する方法

Figmaのコンポーネントとオートレイアウトを活用した、サイズの調整やスタイルの変更が一括で可能なテーブルの作り方の備忘録です。

今回は例として、以下のようなヘッダー付きのテーブルを作成します。

フレームやコンポーネントを活用することで、セルのデザインの変更やサイズの調整を一括で行うことができます。

セルのフレームを作成する

はじめに、テーブルの各値が入る「セル」のフレームを作成します。

テキストツールでセルに入る文字を入力します。

テキストを選択した状態で[Shift] + [A]キーを押して、オートレイアウトが適応された状態のフレームに変更します。

オートレイアウトが適応されているので、右側のサイドバーからセルの内側の余白の調整が可能です。

余白や背景色を変更してセルの完成です。

見出しのセルを作成する

続いて、見出し用のセルを作成します。

先程作成したセルを選択して、[Option]キーを押しながらドラッグして複製します。

複製したセルの、テキストやスタイルを変更して見出しの完成です。

セルのコンポーネントセットを作成する

次に、作成したセルと見出しを選択して、右側のメニューからコンポーネントセットを作成します。

作成したコンポーネントセットの名前をダブルクリックして「Cell」に変更します。

セルのコンポーネントはそれぞれプロパティの名前を変更します。プロパティの「名前を変更」から、セルの値を「Body」に、見出しのセルの値を「Header」に変更します。

セルをコンポーネントセットに設定することで、通常のセルと見出しのセルをプロパティから切り替えることが出来るようになります。

行のコンポーネントを作成する

作成したセルを使用して、テーブルの行（Row）を作成します。

作成したセルのコンポーネントを選択して、[Option]キーを押しながらドラッグで複製して横に並べます。

複製したインスタンスのセルを全て選択したら、オートレイアウトを適用して間隔を調整します。

作成した行を選択して、コンポーネントを作成します。

作成したコンポーネントの名前をダブルクリックして「Row」に変更します。

テーブルを構成する行の完成です。

テーブル全体を作成する

続いて、行のコンポーネントを縦に複製してテーブルの全体を作成します。

セルと同様に行を選択した状態で[Option]キーを押しながらドラッグして複製します。

複製した行を全て選択した状態で、オートレイアウトを適用して行の間隔を調整します。

テーブル全体を構成するセルの準備ができました。

一番上の行のセルを全て選択した状態で、プロパティを「Header」に変更します。

セルが見出しに変更され、テーブル全体の完成です。

サイズ変更を設定する

そのままのテーブルでは、セルのテキストやサイズを変更すると行列が崩れてしまうので、可変に対応したサイズ変更を設定します。

はじめに、テーブル全体のFrameを選択した状態で、横幅の「サイズ変更」をクリックします。

サイズ変更の設定から「幅を固定」を選択します。

続いて、各行を選択して横幅のサイズの変更を「コンテナに合わせて拡大」に設定します。

次に、テーブルの複製元となった行のコンポーネントの各セルを選択して、横幅のサイズの変更を「コンテナに合わせて拡大」に設定します。

横幅を「コンテナに合わせて拡大」に設定することで、テーブルのFrameの大きさに応じてセルの横幅が縮小するようになりました。

同様に縦幅も縮小するように設定します。

この時、見出し以外の行のみ可変設定にすることで、見出しの縦幅は固定にできます。

通常のセルの行を選択した状態で、縦の「サイズ変更」をクリックします。

こちらも同じように、行全体に対しても縦方向に可変するように適用していきます。

サイズ変更の設定から「コンテナに合わせて拡大」を選択します。

見出しの縦幅が固定された、サイズ可変のテーブルの完成です。

左側に見出しのあるテーブル

左に見出しのあるタイプのテーブルも同様にサイズ変更を設定できます。

先程のテーブルと同様に、テーブル全体のフレームに「サイズ変更」を、各行に「コンテナに合わせて拡大」を設定します。

次に、見出し部分に当たる一番左のセル以外の可変するセルだけに「コンテナに合わせて拡大」を設定します。

サイズ可変に対応した縦見出しのテーブルの完成です。