Figmaで表・テーブルを効率良くデザインする方法を解説！

今回は、Figmaで表・テーブルを効率良くデザインする方法を紹介します。

本記事では、以下のように柔軟にカスタマイズできる「テーブル用テンプレート」を一から作成し、そのテンプレートを活用してさまざまなデザインの表を作成できるようになるまでの手順を丁寧に解説しています。

ご自身の用途に合わせて応用しやすい構成になっているので、ぜひ参考にしてみてください。

Figmaで表・テーブルを作成する方法

Figmaで表・テーブルを作成する手順は以下の通りです。

STEP. 1：セルを作成する

まずは、テーブルのセル（通常のセルと見出し用のセルの2つ）を作成します。

セルはフレームを使って作成します。フレームの中にテキストを配置し、オートレイアウト機能をオンにしましょう。

これで、セルの内側に縦横10pxの余白が自動的に設定されるオートレイアウトになります。

次に、作成したセルを複製し、ヘッダー用のセルを作成します。

Macであればoption + ←矢印キー、Windowsであればalt + 矢印キーでセルを複製できます。

また、ヘッダー用のセルは通常のセルとの区別ができるように、背景色やテキストカラーを変更しておきます。

最後に、セルのコンポーネントセットを作成します。

コンポーネントセットとは、複数のコンポーネント（コンポーネントセット内では「バリアント」と呼ばれます）をまとめて管理するための仕組みです。

たとえば、通常セルと見出しセルのように「見た目は似ているけれどスタイルが少し異なるもの」をひとまとめにしておくことで、後からインスタンス側で簡単に切り替えられるようになります。

コンポーネントセットは、通常セルと見出しセルを選択した状態で「コンポーネントセットを作成」をクリックすることで作成できます。

コンポーネントセットが作成されると、セット内のバリアント全体が紫色の枠で囲まれます。

コンポーネントセットを作成すると、自動的に「プロパティ1」というプロパティが作成され、値として各バリアントのフレーム名が設定されます。

インスタンスを作成した際には、このプロパティの値を切り替えることで、通常セルや見出しセルなど、目的に応じたバリアントへ簡単に変更できます。

「プロパティ1」のままでは意味が分かりにくいため、このプロパティによってセルのスタイルが切り替わることを踏まえ、プロパティ名を「style」など分かりやすい名称に変更しておくのがおすすめです。

STEP. 2：テーブルの行を作成する

セルができたら、テーブルの行（通常の行とヘッダー用の行の2種類）を作成します。

コンポーネントセットの中から、複製したいバリアントを選択し、Macであればoption + ←矢印キー、Windowsであればalt + 矢印キーでセルを複製します。

行ができたら行全体に「オートレイアウト」を適用します。

「オブジェクトの左右の間隔」を変更することで、セル同士の間隔を調整できます。

本例では、隣接するセルのボーダーが重なって太く見えてしまうのを防ぐため、値を「-1」に設定します。

こうすることで、2つのボーダーがきれいに相殺され、見た目が整ったテーブルになります。

STEP. 3：テーブルを作成する

行ができたら、必要な分だけ複製してテーブルを作成します。

Macであればoption + ←矢印キー、Windowsであればalt + 矢印キーでヘッダー行、通常の行を複製し、今回は3列5行のテーブルを作成します。

また、すべての行を選択しオートレイアウトを適用し、間隔を「-1」としておきます。

STEP. 4：テーブルの幅に応じてセルの幅を可変させる

次に、テーブルの幅を変更した際に、それに合わせてセルの幅も自動的に変わるように設定しましょう。

現時点ではテーブルの形はできていますが、横幅を変更してもセルの大きさが連動していない状態です。

そこで、フレームの横幅に合わせて子オブジェクトの横幅も変わるようにするためには、フレーム内にあるオブジェクトの横幅のリサイズ設定を「コンテナに合わせて拡大」に変更する必要があります。

値	意味（横幅のリサイズ設定の場合）
固定幅	固定の横幅が設定される。
コンテンツを内包	中にあるコンテンツに応じて横幅が設定される。
コンテナに合わせて拡大	コンテナ（親フレーム）の大きさに応じて横幅が拡大される。

現状、テーブルは「テーブル ＞ 行 ＞ セル」という階層構造になっているため、まずはすべての行を選択し、横幅を「コンテナに合わせて拡大」に設定します。

続いて、各セルを選択し、同様に「コンテナに合わせて拡大」と設定します。

以下では、すべてのセルの横幅を「コンテナに合わせて拡大」に設定しているため、テーブルを拡大・縮小すると 1：1 の比率でセルも連動して拡大・縮小されます。

しかし、ある列のみ「コンテナに合わせて拡大」に設定し、その他の列を固定幅にした場合、その列だけがテーブル全体の幅に応じて伸縮し、他の列は指定した横幅のまま維持されるようになります。

STEP. 5：セルの高さと行の高さが連動するようにする

最後に、セルの高さと行の高さが連動するようにしましょう。

現時点では、一部のセルの高さが変わっても、他のセルの高さが行全体と連動しておらず、同じように変化しない状態になっています。

そこで、あるセルの高さが変わると行全体の高さが連動して変化し、その行の高さに合わせて他のセルも自動的に高さが変わるように設定します。

まず、行を選択し、行の高さは中にあるコンテンツに応じて変化するようにしたいため「コンテンツを内包」を設定します。

続いて、各セルを選択し、高さを「コンテナに合わせて拡大」に変更します。

これで、あるセルの高さが変わると、まず行全体の高さが変わり、それに連動して他のセルの高さも自動的に変わるようになりました。

また、セル内の文字量が増えてテキストが親フレームの横幅を超えそうになった場合に、自動で改行されるようにしておくと便利です。

すべてのテキストレイヤーを選択し、横幅を「コンテナに合わせて拡大」に変更しておきましょう。

以上で、拡大・縮小が可能で、セルの内容に応じて行の高さも連動して変わる、カスタマイズ性の高いテーブルテンプレートが完成しました。

補足：テーブルテンプレートのカスタマイズ方法

最後に、上で作成したテーブルテンプレートをカスタマイズし、ご自身の用途に合わせて活用できるようにカスタマイズ方法を解説します。

1. 列・行を増やす方法

列を増やしたい場合は、オートレイアウトが設定されている「row（行）」フレーム内でセルを複製すればOKです。

また、行はオートレイアウトが設定されている「table（テーブル）」フレーム内で行を複製します。

2. 1列目を見出しセルにする方法

コンポーネントセット内で「通常のセル」と「見出し用のセル」のスタイルを定義しているため、テーブル上に配置したセルのインスタンスでは、プロパティを切り替えるだけで簡単に両者を切り替えられます。

3. 列・行の間隔を調整する方法

列同士の間隔を調整したい場合は、各行のフレームを選択し、オートレイアウトの「オブジェクトの左右の間隔」の値を変更します。

行同士の間隔を調整したい場合は、テーブルのフレームを選択し、オートレイアウトの「オブジェクトの上下の間隔」の値を変更します。

4. 一部の列幅だけを固定する方法

一部の列幅だけを固定し、その他の列はテーブルの拡大・縮小に合わせて可変させたい場合は、固定したい列のセルのみ選択し、横幅を固定幅あるいは「コンテンツを内包」に設定します。

まとめ

今回はFigmaで表・テーブルを効率良くデザインする方法を紹介しました。

本記事で作成したテーブルテンプレートを活用することで、用途に応じてさまざまなスタイルのテーブルを柔軟に作成できるようになります。

デザイン作成の効率化にも役立つと思うので、ぜひ活用してみて下さい。

今回は以上になります。最後までご覧頂き、ありがとうございました。