【初心者必見】Figmaでテーブル(表)を作る方法｜コンポーネント＋オートレイアウトで効率化

テーブル（表）は、複雑な情報を整理してわかりやすく伝えるために欠かせないデザイン要素です。
ですが、セルを1つずつ整えていくのは意外と大変で、時間がかかってしまうこともあります。

そこで役立つのが Figmaの「コンポーネント」と「オートレイアウト」です。
この2つを組み合わせれば、見やすい表を効率よく作成でき、後からの修正も簡単です。

本記事では、初心者でもすぐに使える表の作り方を解説します。

テーブルを作る前に知っておきたい基本構造

テーブルを作る前に、まず構造を理解しておくと効率よく作業できます。
Figmaで表を作るときも、以下の4つの要素を意識すると整理しやすくなります。

1. ヘッダー（Header）
   各列のタイトルや項目名をまとめる部分です。
   ユーザーにどの情報がどの列に入っているかを示すため、見やすく整えることが大切です。
2. セル（Cell）
   表の中で1つの情報を入れる場所です。
   文字や数字を入れて、表のデータを見やすく並べるために使います。
3. 行（Row）
   横に並んだ複数のセルの集まりで、1つのデータセットを表します。
   行ごとにコンポーネント化しておくと、後でコピーや修正が簡単です。
4. 列（Column）
   縦に並んだセルの集まりで、同じ種類の情報をまとめます。
   列幅や揃え方を統一すると、表全体の見やすさが向上します。

Figmaで表を作る4ステップ

STEP1：セルとヘッダーを準備

表の基本単位である「セル」を先にデザインします。

1. セルのデザインを作成

テキスト、背景色、境界線などを整えて、基本の見た目を作ります。

2. ヘッダー用のセルを作成

列タイトル用にフォントや色を変えると、視認性が上がります。

3. セルとヘッダーをコンポーネント化

セルとヘッダーをコンポーネントにしておくと、複製や後からの修正が簡単になります。

STEP2：行を組み立てる

セルを横に並べて1行分のデザインを作ります。

1. セルを横に並べて1行分を作成

先に作ったセルコンポーネントを横に並べて、1行分のレイアウトを整えます。
（1行ごとに背景色を咬合に変更したい場合は2行分のレイアウトを整えます。）

2. 行全体をコンポーネント化

1行全体をコンポーネント化しておくと、後で複製や修正が簡単です。
（1行ごとに背景色を咬合に変更したい場合は2行分目もコンポーネント化しておきましょう。）

STEP3：テーブル全体を完成させる

行を積み重ねてテーブル全体を作ります。

1. 行を積み重ねてテーブルを構成

作った行コンポーネントを縦に並べて、テーブルの形にします。

2. 必要に応じてプロパティを変更し、柔軟に編集できるようにする

必要に応じて色やフォントなどを変更し、柔軟にデザインを調整します。

STEP4：リサイズ設定

1. 列幅や行高さの設定

オートレイアウトで「固定」または「伸縮」を選択し、列や行が適切に拡張・縮小するようにします。

2. テキストを入れて調整

実際にデータを入力し、セル幅やデザインを調整すれば完成です。

まとめ

Figmaで表を作るときは、まずセル・行・列・ヘッダーの基本構造を理解することがスタートです。
その上で、コンポーネント化とオートレイアウトを組み合わせると、セルや行の複製が簡単になり、列幅や行間も自動で整えられます。さらに、デザイン修正やサイズ変更も効率的に行えるため、手作業で整えるより格段にスピーディーに表を作成できます。

まずはSTEP1〜STEP4の流れに沿って、身近なデータで試してみると、効率的にテーブル作成の感覚をつかむことができます。

おまけ：Figmaプラグイン「Table Creator」

『Table Creator』を使えば、好きなセル数でテーブルをサクッと作成できます。
さらに、テンプレートから各種コンポーネントを追加できるため、デザインの微調整も簡単です。

プラグインの利用は任意ですが、効率的にテーブルを作りたい方にはおすすめです。

Table Creatorを確認する

関連リンク

• 「コンポーネント / オートレイアウトでテーブルを作ろう!」- Webデザインを学ぶならKASOU
  https://kasoudesign.com/school/design-training/13509/

テーブル(表)をWEBデザインスクールで学習する

以下、WEBデザインスクールでTable(表)の作り方について学習することができます。

特徴	「案件課題型」トレーニング学習! クライアントニーズを意識したデザインの提案や制作プロセスを体験できるため、即戦力として活躍できる能力を効率的に鍛えることができます。
対象者	初心者から転職を考えている、WEBデザイナーになりたい全ての方へ
料金	月額1,100円(税込)
ポイント	実務経験豊富なプロの視点から、デザインの改善点や具体的なアドバイスを受けられるため、実践的なスキルアップが可能!
URL	https://dezadezi.com/