コンポーネント / オートレイアウトでテーブルを作ろう!

Webデザインにおいて「テーブル」は料金表や比較表、管理画面など幅広い場面で使われます。
ただし、そのまま作ると修正や更新が面倒になりがちです。

そこで役立つのがFigmaのコンポーネント化。
一度仕組みを作っておけば、デザインの一貫性を保ちつつ効率的に表を管理できます。

この動画では、Figmaのコンポーネント化を活用して「セル → 行 → テーブル全体」と階層的に組み立てる方法を解説します。

Figma実践

1. オートレイアウトとコンポーネント化でセルを作成

Figmaのコンポーネント化は以前学習したこちらの動画で復習しましょう!

それでは最初にテーブルのセル(th,td)要素を以下の手順で作成します。

1. テキスト(T)で適当な文字を入力します。
2. テキストにオートレイアウト(shift⇧ + A)を追加します。
3. レイアウトでベースとなる幅(120px)と高さ(32px)を設定します。
   ※テキスト量に応じて可変する場合は、幅から「コンテンツを内包」を選択しましょう。
4. 要素の塗り、フォントサイズなどを調整しましょう。
5. セル内のテキスト位置をオートレイアウトの整列位置で選択します。

セルのベースができたら、コンポーネントを作成します。
右メニューのフレーム横のアイコン[コンポーネントを作成]を選択 (option⌥ + command⌘ + K)で作成できます。

コンポーネントを選択し、右メニュー「プロパティ」から「バリアント」を選択しバージョンを複製します。
片方をテーブルヘッドのセル(th)、片方をテーブルボディーのセル(td)としてプロパティとバリアントに名前を付け、区別します。

2. コンポーネント化したセルで行を作成

コンポーネント化したセルを並べて、全選択した状態でオートレイアウト(shift⇧ + A)を追加します。
ヘッドの行、ボディーの行をそれぞれ作成しましょう。

3. 行を積み重ねてテーブルのヘッド / ボディーを作成

複製した行をさらに複製して、全選択した状態でオートレイアウト(shift⇧ + A)を追加します。
これでテーブルのヘッド、ボディーが完成です。

テーブルの縦列の幅を一括で修正したい、まとめてセルを増やしたい場合にはセルをまとめた行をコンポーネント化することで、柔軟に幅を調整することができます。

4. テーブル全体の完成

最後にテーブルのヘッドとボディを、選択した状態でオートレイアウト(shift⇧ + A)を追加することで
1つのテーブルが完成します。

行をコンポーネントするか、しないか

テーブルの行をコンポーネント化するか、しないかで作成後の調整で可能なことが異なるので確認しておきましょう。

■ コンポーネント化した場合の特徴

• コンポーネント化した行のセルの幅を調整することで、テーブル全体の縦列の幅を調整できる
• 同じコンポーネントを使用して複数テーブルを作成した場合に、セルの幅を個別に設定はできない (コンテナに合わせて拡大で自動で幅調整にすることは可能)

■ コンポーネント化しない場合の特徴

• テーブル内のセルの指定を個別に設定することができる

以上が「コンポーネント / オートレイアウトでテーブルを作ろう!」の説明でした。
組み方によって長さの調整ができなかったり、スタイルが綺麗に作れないことがあるので、事前にどのようなデザインにするか、装飾の共通部分がどこかを考えてから作り始めましょう。