- Egawa
- 2024.05.07
テーブル（表組み）はユーザーに情報をわかりやすく伝えるための大切な要素ですが、作成には少し手間がかかりますよね...。
作成方法は様々ですが、本記事では、Figmaのコンポーネントとオートレイアウトを活用したテーブルの作り方を解説していきます。
Figmaの機能を使えば、いつでもどこでも簡単に編集が可能なテーブルを作成することができます。
情報の整理や視覚的な表現に悩んでいる方は、ぜひご参考にしてみてください！
テーブルの構造
まずは、テーブルの構造について見てみましょう！
①見出し（Header）
見出しは、各列の内容を示すラベルです。
わかりやすい見出しにすることで、ユーザーはテーブル内のデータを素早く理解できます。
②セル（Cell）
セルはテーブル内のデータの最小単位です。
行と列の交差点にあり、特定のデータ値や情報を含みます。
③行（Row）
行はテーブル内の個々のデータエントリを表す、水平の要素です。
④列（Column）
列はテーブル内のデータを整理するための、垂直の要素です。
手順
それでは、早速作ってみましょう！
テーブルを作る手順は、以下の通りです。
1）見出し・セルのコンポーネントセット作成
2）行のコンポーネント作成
3）テーブル作成
4） リサイズ設定
それぞれ、詳しく見ていきましょう。
1）見出し・セルのコンポーネントセット作成
それでは、見出し（Header）・セル（Cell）を作っていきます。
※順番は特にありませんが、こちらの記事では、セルから作成していきます。
セル作成
まずは、フレームツール（F）を選択して、フレームを作成します。
作成したフレームの中に、テキストツール（T）を使って、テキストを入れます。
フレームレイヤーとテキストレイヤーを選択し、オートレイアウト機能（Shift+A）をオンにします。
これで、右サイドバーからセルの内側の余白（Padding）の設定ができるようになります。
余白や背景色、線などをお好きなような設定したら、セルのできあがりです！
見出し作成
作成したセルを選択して、複製（Optionを押しながら、ドラッグ）します。
スタイルを調整したら、見出しの完成です！
コンポーネントセット作成
見出し・セルを選択して、コンポーネントセットを作成します。
コンポーネントセットは、コンポーネントのグループのことです。
コンポーネントセットの中のコンポーネントを「バリアント（Variant）」と呼び、それぞれにプロパティを与えることができます！
一旦、コンポーネントセットを「Cell」、プロパティを「Type」に、値を「Header」と「Cell」に設定します。
2）行のコンポーネント作成
続いて、行（Row）を作成しましょう。
行の作成
作成したセルのコンポーネントを選択し、必要な分だけ複製して、横に並べます。
複製したインスタンス※を選択して、オートレイアウトを適用します。
これによって、右サイドバーからセル同士の間隔（Gap）を調整することが可能になります。
調整終わったら、セルの行の完成です！
※メインコンポーネントから複製したレイヤーは、インスタンスと呼びます。
インスタンスは、元のコンポーネントのプロパティを維持し、切り替えを行うことができます。
メインコンポーネントに変更を加えずに編集することができます。
行のコンポーネント作成
作成した行を選択して、コンポーネントを作成します。
3）テーブル作成
あとは、必要な分だけ行を複製してテーブルにするだけです！
テーブルの作成
行のコンポーネントを選択し、必要な分だけ複製して、縦に並べます。
複製したインスタンスを選択して、オートレイアウトを適用して、Gapを調整します。
プロパティの変更
一旦、これでテーブルの型ができました！
そのまま使うこともできますが、リサイズ設定をしないと、テキスト数によっては、崩れます。
このまま使う場合は、先頭の行のインスタンス内のセルを全て選択し、右サイドバーから、プロパティ（Type）をHeaderにしましょう。
より精度の高いテーブルを作りたい場合は、ここで何も変更を加えずに、次のセクションに移ってください！
次のセクションでは、リサイズ設定について詳しく話して行きます。
4） リサイズ設定
リサイズ設定がデフォルトのままでは、文字数によって、崩れが発生します。
右サイドバーから、リサイズ設定を使って、より自由度の高いテーブルを作りましょう！
作成したテーブルは、3つのフレームで構成されています。
テーブル（親） ＞ 行（兄妹） ＞ セル（子）
テーブル、行、セル、それぞれのサイズ設定によって、ほかの階層のサイズが変更されます。
それぞれのリサイズ設定を詳しく見ていきましょう。
固定（Fixed）：固定の値
細かく、大きさを設定したい時に使います。
例えば、デザイン上で使いたいテーブルのサイズが決まっている時や、特定の列だけ幅を設定したい時に使います。
ハグ（Hug）：フレーム内のオブジェクトに応じてサイズ可変
一定のパディングを保ちながら、フレーム内のオブジェクトサイズに応じて可変したい時に使います。
自由度が高く、サイズに縛りがない時に使います。
ボタンなどでよく使われたりもします！
コンテナに合わせて拡大（Fill）：
親要素に合わせて、兄妹・子要素を均等な幅で拡大
親要素（コンテナ）を基準に、兄妹・子要素が可変するため、親要素には設定できません。兄妹・子要素のみ、設定できます。
名前の通り、親要素のサイズに合わせて、中の要素を均等に縮小拡大させます。
コンテナに合わせて、均等に兄妹・子要素が拡大縮小するため、中の要素が極端に長かったり、短かったりする場合には向きません。
リサイズ設定の組み合わせ
一つの設定のみの場合もありますが、ほとんどのテーブルは組み合わせて、作成しています。
基本的にはRowのコンポーネントをいじりながらリサイズ設定するので、行の見出し設定をしてしまうと、Cell、Headerと2度も設定しないといけなくなるため、まだ設定は行わないことをおすすめします。
いくつか事例を作ってみたので、ぜひ参考にしてみてください！
テーブル・行は成り行き、特定の列のみ固定、その他は成り行き
以下のような設定をします。
テーブル（親）：ハグ（Hug）
行（兄妹）：ハグ（Hug）
特定の列（子）：固定（Fixed）
そのほかの列（子）：ハグ（Hug）
テーブルを指定のサイズに合わせて、行と列を拡大
以下のような設定にします。
テーブル（親）：固定（Fixed）
行（兄妹）：コンテナに合わせて拡大（Fill）
列（子）：コンテナに合わせて拡大（Fill）
テーブルのサイズに合わせて、特定の列のみ固定値、その他は均等に拡大
以下のような設定にします。
テーブル（親）：固定（Fixed）
行（兄妹）：コンテナに合わせて拡大（Fill）
特定の列（子）：固定（Fixed）
そのほかの列（子）：コンテナに合わせて拡大（Fill）
まとめ
以上が、テーブルを作る方法のご紹介でした。
こちらの記事が、デザインの効率を高める一助になれば嬉しいです。
この記事を共有する
- URLをコピーしました
最新記事
