figma-how-to-create-table
公開日: 2021.09.03  | 更新日: 2021.10.31

Figmaでシンプルなテーブル(表)を作る方法

今回は、Figmaでシンプルなテーブル(表)を作る方法を紹介します。ヘッダーと罫線だけのシンプルな表を、「Component」と「Auto layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。

この記事のターゲット

  • Figmaの中級者〜上級者

  • Figmaで表・テーブルの作り方が知りたい方

  • FigmaのComponent と Auto layout の使い方が知りたい方


1. セルとヘッダーをComponentにする

テーブル(表)は一見シンプルで簡単そうに見えますが、行や列を追加したりスタイルを変更しようとすると途端に難しくなる、非常に奥が深いコンポーネントです。

今回は、背景・枠線・テキストのみスタイルを設定した最もシンプルなテーブルを作ってみようと思います。

まず、Textツールで適当なテキストを用意し、選択した状態で「Shift + Aキー」を押します。すると、テキストが「Frame」という Auto layoutが適応された状態のフレームで囲われます。

Auto Layout の機能として、テキストの周りの余白(パディング)を設定できるようになります。

create-cell

その状態で選択したまま、ツールバーの4つの菱形のアイコンを押してComponentを作成します。Componentの名前もわかりやすい適当な名前をつけておきます。

Component化すると、Componentから複製したオブジェクトは全て「Instance」という種類のオブジェクトになります。

Instanceは、Componentの変更が適用されるので、複数の同じオブジェクトのスタイルを共通化・統一したい場合に有効です。

create-cell-component

背景色や枠線のスタイルも適当に調節します。

edit-cell-style

次に、ヘッダー用のComponentを作成します。セルのComponentをCommandキーを押しながらドラッグで複製してInstanceを作り、それを「Detach Instance」してスタイルを調整すれば簡単ですね。

create-header-component

これで、セルとヘッダーのComponentができました。

2. セルとヘッダーを行にまとめてテーブルをレイアウトする

次に、セルとヘッダーのInstanceを横に並べて複製していきます。

copy-cell-component

複製したヘッダーとセルを、それぞれ選択して「Shift + Aキー」を押してAuto layout化します。

ちなみに、並べた時に間隔が空いていると隙間の空いた状態でAuto layout化されるので、その場合は右プロパティのAuto layoutの「H」のようなアイコンの「spacing between items」の値を「0」にすることで隙間なく詰めることができます。逆に隙間を開けたい場合は、値を設定しましょう。

これで、Auto layoutの機能で横方向に整列した状態の行のフレームが作成されます。Auto layoutのフレームの中でセルやヘッダーを追加すると、整列して追加されていくようになりますので、必要に応じてセルの数を増やしてください。

create-auto-layout

セル行とヘッダー行ができたら、それぞれComponentにして行のInstanceを作成します。セル行は必要な数だけ複製しましょう。

できたら、今度は行を縦に並べて「Shift + Aキー」で縦方向のAuto layoutを作成します。

create-table

これで、テーブルの基本的な構造は完成です。Componentを直接スタイル変更すれば、テーブル全体のスタイルも調節できます。

change-table-style

3. テーブルの幅を自動で広がるように設定する

これで見た目は完成に見えますが、いざセルに文字を入力してみると、入力した文字によってテーブルの見た目が崩れてしまうと思います。

そこで、今度はAuto layoutをフル活用して、テーブルの見た目が崩れないようにする調節をしていきます。

change-cell-width1

まず、テーブルの全体の横幅に合わせてセルの大きさが可変するようにしたいと思います。手順は以下の通りです。

  1. セル行とヘッダー行の中のセルとヘッダーを個別にすべて選択する

  2. 右プロパティの「Resizing」から⇄アイコンの方の選択肢を「Fill container」に変更

change-table-width2

さらに、行全体に対しても横方向に可変するように適用していきます。

  1. テーブル内のセル行、ヘッダー行のオブジェクトを個別にすべて選択する

  2. 右プロパティの「Resizing」から⇅アイコンの方の選択肢を「Fill container

    」に変更

これで、行全体の横幅の大きさに応じてセルとヘッダーが伸びるようになります。

change-table-width3

ちなみにこの「Resizing」は、Auto layoutが適用されたFrameの中での各オブジェクトの振る舞いを設定できるものですが、簡単に説明すると以下のようなイメージです。

  • Fixed width:数値で入力された個別の固定幅にする

  • Fill container:Frameの大きさに応じて成り行きで可変する

  • Hug contens:自身のオブジェクト内にあるコンテンツ(テキストなど)の大きさに応じて成り行きで可変する

次に、テーブルの縦幅がコンテンツの大きさに応じて広がるようにします。

何もしていないと、以下のように文字量の多い部分だけ飛び出たような不恰好なテーブルになります。

change-table-height1

基本的に横幅の時とやり方は同じです。

  1. セル行とヘッダー行の中のセルとヘッダーを個別にすべて選択する

  2. 右プロパティの「Resizing」から⇅アイコンの方の選択肢を「Fill container」に変更

change-table-height2

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

  1. テーブル内のセル行、ヘッダー行のオブジェクトを個別にすべて選択する

  2. 右プロパティの「Resizing」から⇅アイコンの方の選択肢を「Hug contents」に変更

これで、縦方向はセルの大きさに合わせてフィットするようになります。

change-table-height3

最後に、テキストのアライン(左・中央・右揃え)を整えていきます。

全てのセルやヘッダーに適用したい場合は、セルとヘッダーのComponentを選択して、右プロパティの「Auto layout」の一番右のアイコンをおすと、Frame内のどの位置に配置するかを設定できます。

change-text-centered

セル行、ヘッダー行の中の個別のセルとヘッダーにそれぞれ適用することもできます。

例えば、数値は右寄せにしたり、説明文は左寄せにしたり、ヘッダーは中央寄せにしたりと、目的に応じて自由に設定してください。

change-text-centered2

これで、縦方向も横方向も整ったテーブルコンポーネントの完成です。

table-example

1列追加して、家具の簡単なスペックリストのようなものをサンプルとして作ってみました。

おまけ:テーブル・コンポーネントのサンプルファイル

simple-table-component-download-page

この記事で作成したテーブルのサンプルファイルを Figma Community にアップロードしていますので、そちらから自由に複製(Duplicate)できます。

シンプルなテーブルコンポーネント | Figma Community

私用・商用問わずご自由にご利用ください。


いかがだったでしょうか。

Component は使い慣れている方も多いと思いますが、Auto layout はFigma独特の機能なので慣れるまで少し時間がかかるかもしれないですが、使えるようになると非常に強力です。もはや、Auto layoutがあるからFigmaを使うという方もいるのではないでしょうか。

慣れるには実際に使ってみるしかないと思うので、テーブル・コンポーネントも使いつつ、いろんなレイアウトを試してみてください。

この記事を読んだ方におすすめの記事

Figmaでシンプルなヘッダー・コンポーネントを作る方法

今回は、Figmaでシンプルなヘッダー・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるシンプルなヘッダーを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む

figma-how-to-create-header

Figmaで角丸を使った便利なテクニック集

今回は、Figmaでシェイプやパスに角丸を適用するテクニックを紹介します。シェイプに角丸を適用することで、丸っこいUIやグラフィックを実現できるため、柔らかさ・滑らかさを演出することに役立ちます。 ... 続きを読む

figma-how-to-use-corner-radius

Figmaで簡単に円グラフや棒グラフを作る方法

今回はFigmaで細身の円グラフ・棒グラフを簡単に作成する方法を紹介します。慣れれば1分で作成でき、パターンを用意しておけばいつでも必要な時にサッと書き出せるようになるのでおすすめです。 ... 続きを読む

figma-how-to-create-pie-chart

Figmaで破線・点線や矢印がついたパスを作る方法

今回はFigmaでテキストや図形などのオブジェクト(パス)に枠線をつける方法と、枠線のスタイル(色・太さ・破線・矢印など)を編集する方法を紹介します。 ... 続きを読む

figma-how-to-edit-line-style

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告