🎨

Figma でメンテしやすいテーブルを作る

2021/09/24に公開

Figma

UI/UX

tech

始めに

画面仕様を作る時に、プロダクトの将来の変更に強くなるように再利用性を高く作っていくことは重要です。最近は、Figmaを使って画面仕様を落とすことが多く、その中でも表形式のリストテーブルを作ることがよくあります。この記事では、自分なりのメンテ性の高いリストテーブルの作り方を紹介していきます。

今回つくった Figma ファイルはこちら

メンテ性が高いとは?

メンテ性が高い状態とは、将来の変更に強いこと だと自分は考えています。
今回作っていくリストテーブルについて言うと、

カラムの増減が容易にできる
テーブルの行数の変更が容易である
埋め込んだ際自動でサイズ調整をしてくれる

これらかなと考えています。

それでは、これらの特徴を踏まえたテーブルの作り方をみていきたいと思います。

作る物

今回は、Material Design の Data Table を真似て作っていきます

Material Design Data Table

手順

テーブルセルのコンポーネントを用意します
- Table Header Cell
- Table Cell
Table Header Cell を横に並べ Auto Layout を組みます
2の手順で作ったものを Component 化します。(Header Row と名付けます。)
3のインスタンスを作り、中身の Table Header Cell を Table Cell に Override します
4の手順で作ったものをさらに　Component 化します。(Table Row と名付けます。)
Header RowとTable Row を組み合わせた Auto Layout を作ります
Table Row を増やしていきます

1. テーブルセルのコンポーネントを用意します

まずは、Material Design のテーブルを見ながら、テーブルセルのコンポーネントを用意します。
Inspector (Chromeであれば、command+option+i) を開くと、実際のサイズ感や色味が把握しやすいです。

Table Cell の特徴	Table Header Cell の特徴

大枠の特徴は似ているので
Table Cell <- Table Header Cell といった関係でここもコンポーネント化していきます。

Table Cell

基本の Table Cell は Frame と Text, Line のシンプル構成です。
Ispector で見た通りの背景色/フォント/文字色にしていきます。
Material Design ではグレーは #000000 の透明度ありで表現されることが多いので
注意が必要です。

Table Cell / Frame

Table Cell / Text

テキストは、Inspector で見たPadding 通り(top/bottom 1px, left/right 16px) を保ったサイズを作り、あとで引き伸ばしても見た目が変化しないように、
Constrants に Left and right/ Top and bottom を指定します。

Table Cell / Border

Border は上辺に張り付いた位置を固定したいので、
**Constrants に Left and right/ Top ** を指定します。

Table Header Cell

Table Cell のインスタンスを作って、
Table Header Cell として再定義し、
Table Cell と違う特徴の部分だけ override していきます。

Table Cell のインスタンスを作る

Table Header Cell として再定義

command+option+K を押すと簡単にコンポーネント化できます。

`Table Cell` と違う特徴の部分だけ override

高さを 56px に
中のフォントのウェイトを Bold に
テキストを「Header X」に
テキストを中央寄席に
Border は非表示に
それぞれ変更しました。

コンポーネント名の命名について

Figma ではコンポーネント名の命名規則に 「/」 を入れることで、階層構造を表現できます。
後ほどのインスタンスのスワップなどで便利になるので、
今回では、「Table/TableCell」のように予め大カテゴリを決めておくと便利です。

2. `Table Header Cell` を横に並べ Auto Layout を組みます

セルのコンポーネントが出来上がったので、実際にテーブルを作っていきます。

`Table Header Cell` を一つだけ並べる

Auto Layout が追加される時、その時の位置関係を維持したまま Auto Layout を組もうとするので、
予め並べたい位置関係に一つだけコピーしておくと便利です。

一つだけコピー

二つを選択し、Frame化

Auto Layout を追加

自動で0マージンの横AutoLayoutが追加されました

この状態でコピペをすると、同じ並びで要素が追加しやすいです。

ここまでで大方の細かい作業が終わり、あとはテーブル行と扱うだけです。
ヘッダ行として機能させていきます。
次の手順から細かい調整が要らなくなるので、サクサク進みます。

3. 2の手順で作ったものを Component 化します。(`Header Row` と名付けます。)

AutoLayout を追加した Frame を Component かして Header Row と名付けます。

4. 3のインスタンスを作り、中身の `Table Header Cell` を `Table Cell` に Override します

Header Row をコピーして、後々のAutoLayout追加に備えて Header Row の丁度真下に配置します。
(ちなみに Option押しながらドラッグでもコピーができます。)

コピーした Header Row の中の Table Header Cell を Table Cell に置き換えます。

Table Header Cell を全選択

赤い矢印のところで、 Table Cell を選びます

先ほど「Table/TableCell」とコンポーネント名を命名していたことで、ここの選択画面が、
Tableカテゴリの TableCell となっていることに気づいたでしょうか。

テキストを編集、調整する。

これからのコンポーネント化に備えて、中身のテキストをもともとの完成図に少しだけ近づけておきます。
こうしておくことで、後々のインスタンス化したときの変更量を抑えることができます。

具体的には以下の点にメリットがあります。

CellAx, CellBx, CellCx という命名規則が作れる
D行が数字だけなルールをここで定められる
D行だけテキストが右寄せのルールをここで定められる

テキストを修正していきます。

5. 4の手順で作ったものをさらに　Component 化します。(`Table Row` と名付けます。)

この段階では、まだ通常のTableCellの行はまだ HeaderRow のインスタンスなので、
このインスタンスを新たにコンポーネントとして定義しなおします。

HeaderRow のインスタンスを選択した状態で、コンポーネント化をすると、このインスタンスを含んだフレームが作られ、さらにそれがコンポーネント化される処理が一気に走ります。

6. `Header Row`と`Table Row` を組み合わせた Auto Layout を作ります

Auto Layout は Frame の属性です。またコンポーネントの枠は必ず Frame になるので、
実は Header Row と Table Row を選択した状態でコンポーネント化、その後 Auto Layout を追加ということも可能です。

一度、Header Row と Table Row を選択した状態で、コンポーネント化します。

すると、コンポーネントにコンポーネントは含むことができないので、
コンポーネント達が別で外側に作成され、それぞれのインスタンスを含んだ新たなコンポーネントが作られます。

これを Data Table と名付けます。

そして、AutoLayoutを追加します。

配置を考慮したので、縦方向の0マージンのAutoLayoutが自動で追加されました。

7. `Table Row` を増やしていきます

あとは、Table Rowを増やすだけで、簡単に行数を増やすことができます。

それぞれのテキストを変えていけば、完成に近づきます

DataTable は外枠があるので、外枠の調整をします。

radius を4px に
stroke を Table Cell と同じ色にする

完成!!

以下のようになりました。

メンテ性の確認

おさらいになりますが、以下の点簡単にできるか確かめていきます。

カラムの増減が容易にできる
テーブルの行数の変更が容易である
埋め込んだ際自動でサイズ調整をしてくれる

カラムの増減が容易にできる

これは、Header Row のコンポーネントの中身の Table Header Cell を追加し
Table Row のコンポーネントの中身にある追加された Table Header Cell のインスタンスを Table Cell にスワップすると簡単にできます。

`Header Row` のコンポーネントの中身の `Table Header Cell` を追加

`Table Row` のコンポーネントの中身にある追加された `Table Header Cell` のインスタンスを `Table Cell` にスワップ

テキストの修正は Table Row の コンポーネント の中で行うと 一気に全行反映される ので便利です。

テーブルの行数の変更が容易である

こちらは DataTable コンポーネント内で Table Row のインスタンスを増やすと無限に行数を増やすことができます。
AutoLayoutを組んであるので、位置調整なしで、コピペしただけで自動で下に追記されていきます。

埋め込んだ際自動でサイズ調整をしてくれる

同じデータテーブルが違う場所で出てくるなんてことはよくあります。
その場合に、親のDataTable のサイズを変えるだけで、子供のコンポーネントのサイズ感がよろしく綺麗になってくれると嬉しいです。

それを実現するには、AutoLayout内での子インスタンスの Resizing を調整するとうまくいきます。

Fixed Width
- 現在の指定幅でい続けようとします
Fill Container
- 親Frame の幅いっぱいに埋まるように自分の幅を調節します

この設定を Header Row コンポーネント にします。
Header Row -> Table Row -> 各インスタンスという風に設定が伝播し、
どの行でも決まった幅で並ぶように設定可能です。
(途中で、Fixed Width があるとうまく行かないので、ダメだった場合は親子関係の設定を確認します)

実例

Column D だけ Fill Container にした場合

全部 Fill Container にした場合

まとめ

今回は、メンテ性の高いテーブルをFigma で作る方法を紹介しました。

コンポーネント化は複雑なので、最初はハードコーディングならぬハードドローイングをしがちですが、
後々の変更があるともういじりたくなくなる Figma ファイルになってしまいます。

いつまでも育てられる Figma ファイルを作るように、最初からメンテ性高く作ると幸せになれるかもしれません。

また、今回書かなかったのですが、 Table/TableCell 以下にいろいろなコンポーネントを追加することで、SparkLineやTagなどのテーブルも実現が容易になります。

リッチなテーブルを育てるお役に立てたら幸いです