Figmaでテーブルを作成する

このチュートリアルでは、コンポーネントとアトミックデザイン手法を使用してFigmaでテーブルを作成する方法について説明します。 また、テーブルレイアウトの基本要素と、コンポーネントをコンポーネントライブラリに含めて、使用しているデザインシステムの一部にする方法についても説明します。

簡単にするために、このチュートリアルに必要なすべてのコンポーネントを使用するモックアップの例を用意しました。

従うには、Figmaの基本的な概念、そのインターフェース、およびFigmaコンポーネントの操作方法を少なくともある程度理解している必要があります。 ただし、Figmaを初めて使用してテーブルデータを操作する場合は、Figmaをエンドツーエンドで理解するのに役立つ「はじめに」のビデオと、「複雑なWebテーブルを設計する方法」の記事をご覧になることをお勧めします。少し前にここSmashingMagazineで公開されました。

このチュートリアルの範囲を単純化するために、これから開始するFigmaプロジェクトに、色、フォント、および効果がスタイルとしてすでに存在していると仮定します。 アトミックデザインに関しては、それらはアトムです。 （詳細については、 littleBitsの人々がこのトピックに関するすばらしい記事を書いています。）

このチュートリアルの対象読者は、ワークフローにすでにFigmaを採用しているか、次のデザインプロジェクトでFigmaを試すことを計画しているが、開始方法がわからないデザイナー（UX、UI）です。

それで、それ以上の苦労なしに、掘り下げましょう！

クイックノート：この記事を書いている間、Figmaはプラグインを紹介しました。 公開の時点では、テーブルを操作するのに適したものはありませんでしたが、状況は急速に変化する可能性があります。 誰が知っているか、多分この記事は意欲的なFigmaプラグイン開発者が本当にきちんとしたFigma Tablesプラグインを作成するのを実際に助けるでしょう、あるいは少なくとも、私はそれがそうなることを願っています。

序章

テーブルを有機体として想像してみてください。 テーブルセルは、個々の原子で構成される分子になります。 設計用語では、それらはセルのプロパティです。

それでは、セルから始めましょう。 これには3つのプロパティがあります。

1. バックグラウンド
2. 国境
3. コンテンツ

次に、それぞれについて詳しく見ていきます。

バックグラウンド

背景は、Figmaの別のコンポーネントになります。 必要に応じてコンポーネントを引き伸ばすことができるため、サイズはそれほど重要ではありませんが、サイズを100×36ピクセルに設定することから始めましょう。

このコンポーネントに、コンポーネント自体と同じサイズの長方形を追加します。 これは、コンポーネント内の唯一のオブジェクトになります。 制約を使用して、長方形の境界をコンポーネントの境界にアタッチする必要があります（[制約]セクションの右側のパネルで[左と右]と[上と下]に制約を設定します）。これにより、長方形が自動的に成分。

これが実際に動作するのを確認したい場合は、Figmaで制約がどのように機能するかについてこのチュートリアルをご覧ください。

長方形の塗りつぶしの色によって、セルの背景色が決まります。 白い色を選びましょう。 プロジェクトの開始時に構成されたカラースタイルからその色を選択することをお勧めします。

国境

これは背景より少しトリッキーです。 ストロークで1つの長方形を作成することはできません。 さまざまな種類の境界線が必要になる場合があります。1つは個別のセル（周囲に境界線があります）、1つは上下の境界線のみのセルの行全体、または1つは残りのセルから分離したいテーブルヘッダー用です。幅の広いライン。 多くのオプションがあります。

境界線のプロパティ：

• 境界線（左、右、上、下、またはそれらのいずれも存在しない）
• 線幅
• 線の色
• ラインスタイル

セルの境界線内の各線は、幅、色、スタイルが異なる場合があります。 たとえば、左側は赤い実線で、上部は灰色の点線である可能性があります。

100×36ピクセルのサイズのコンポーネントを作成しましょう（以前と同じです）。 コンポーネント内で、境界線ごとに4本の線を追加する必要があります。 次に、これをどのように行うかに注意してください。

1. コンポーネントの幅の長さで下の境界線の線を追加します。
2. その位置を下の境界線に設定し、水平方向に伸びて下の境界線に固執するように制約します。
3. 上の境界線については、下の境界線の線を複製し、180度回転させて、コンポーネントの上部に貼り付けます。 （制約を変更して、上部に固定し、水平方向に伸ばすことを忘れないでください。）;
4. 次に、左側の境界線については、-90度回転し、その位置と制約を左側の境界線に固定して垂直方向に伸びるように左側に設定します。
5. 最後になりましたが、90度回転し、その位置と拘束を設定することで、正しい境界線を作成できます。 各線の線の色と線の幅をそれぞれ灰色（色のスタイルから選択）と1ピクセルに設定します。

注：下の境界線の線を回転させた理由を自問するかもしれません。 さて、Figmaで線の線幅を変えると、線が大きくなります。 そのため、この「上昇」方向をコンポーネントの中心に設定する必要がありました。 線のストローク幅（この場合は境界線のサイズ）を変更しても、コンポーネント（セル）の外側には拡大しません。

これで、セル内の境界線ごとにスタイルを個別に非表示またはカスタマイズできます。

プロジェクトにテーブルの境界線に複数のスタイルがある場合（以下に示すいくつかの境界線の例）、スタイルごとに個別のコンポーネントを作成する必要があります。 以前と同じように新しいマスターコンポーネントを作成し、必要に応じてカスタマイズするだけです。

個別のストロークコンポーネントを使用すると、時間を大幅に節約し、スケーラビリティを向上させることができます。 マスターコンポーネント内のストロークの色を変更すると、テーブル全体が調整されます。 上記の背景色と同じように、個々のセルは独自のストロークパラメータを持つことができます。

コンテンツ

これは、すべての中で最も複雑なコンポーネントです。

プロジェクト内のテーブルコンテンツの可能なすべてのバリエーションを作成する必要があります。プレーンテキスト、アイコン付きのテキスト（左または右、配置が異なる）、チェックボックス、スイッチ、およびセルに含まれる可能性のあるその他のコンテンツです。 このチュートリアルを簡略化するために、モックアップファイルのコンポーネントを確認してください。 Figmaでコンポーネントを作成および整理する方法は、別の記事のトピックです。

ただし、コンテンツコンポーネントにはいくつかの要件があります。

• コンポーネントは、セル内に収まるように垂直方向と水平方向の両方で簡単に伸ばす必要があります。
• コンポーネントの最小サイズは、デフォルトのセルサイズよりも小さくする必要があります（特に高さ、セルのパディングの可能性に注意してください）。
• コンポーネントがセル内で適切に整列できるように、余白は避けてください。
• セル自体にすでに背景があるため、不要な背景は避けてください。

コンテンツコンポーネントは段階的に作成できます。テキストコンポーネントなどの基本的なコンポーネントから始めて、プロジェクトのサイズが大きくなるにつれて新しいコンポーネントを追加します。

コンテンツをコンポーネントに含める理由は、他の要素と同じです。これにより、稼働時間が節約されます。 セルの内容を変更するには、コンポーネントでセルを切り替える必要があります。

セルコンポーネントの作成

背景、境界線、コンテンツなど、必要なすべてのアトムを作成しました。 細胞成分、つまり原子から作られた分子を作成する時が来ました。 セル内のすべてのコンポーネントを集めましょう。

背景コンポーネントを最下層として設定し、セルサイズ全体に拡大します（制約を「左と右」と「上と下」に設定します）。

背景コンポーネントと同じ制約で境界線コンポーネントを追加します。

次に、最も複雑な部分であるコンテンツコンテンツについて説明します。

セルにはパディングがあるため、コンポーネントのコンテンツでフレームを作成する必要があります。 そのフレームは、パディングを除くセルサイズ全体に拡大する必要があります。 コンテンツコンポーネントもフレームサイズ全体に拡大する必要があります。 コンテンツ自体から余白を取り除く必要があるため、すべてのパディングはセルによって設定されます。

結局のところ、セルのパディングは、後で変更する機会なしに1回だけ設定するコンポーネントの唯一のプロパティです。 上記の例では、すべての面で4pxにしました。

注：修正として、余分なマージンが必要な列の左右に空のセル（たとえば、コンテンツがなく、幅が16px）の列を作成できます。 または、テーブルのデザインで許可されている場合は、セルコンポーネント内に水平方向のパディングを追加できます。 たとえば、Googleマテリアルデザインのセルには、デフォルトで16pxのパディングがあります。

セルとフレームの[コンテンツのクリップ]オプションを削除することを忘れないでください（これは、[プロパティ]セクションの右側のパネルで実行できます）。 セルのコンテンツは境界線から外れる可能性があります。 たとえば、ドロップダウンがセル内にあり、その状態をポップアップで表示したい場合です。

注：このセルスタイルをメインのセルスタイルとして使用します。 テーブルに追加のスタイルがある場合でも心配する必要はありません。これについては、「オーバーライドではなく、テーブルの状態とコンポーネント」セクションで説明します。

標準テーブルのセルオプション

このステップはオプションである可能性がありますが、テーブルに状態が必要な場合は、それなしでは実行できません。 また、テーブルに複数の境界線スタイルがある場合はさらにそうです。

それでは、テーブルの作成が簡単になる追加のセルコンポーネントを作成しましょう。 テーブルを操作するときは、テーブル内の位置に応じて（たとえば、境界線のタイプに応じて）適切なコンポーネントを選択します。

そのために、セルコンポーネントを取得し、そこからさらに8つのマスターを作成しましょう。 また、境界線を担当する適切なレイヤーを無効にする必要があります。 結果は下の画像のようになります。

一番上の行は、テーブルの上部と中央にあるセル用です。 下の行は、下のセル専用です。 このようにして、隙間なくセルを次々に配置し、同じストローク幅を維持することができます。

いくつかの例：

注：上記で作成した境界線のスタイルごとに、前述のようなマスターコンポーネントを追加するとよいでしょう。

そのため、セルのインスタンスをオーバーライドする必要はありません（正確には、適切なレイヤーを無効にします）。 その代わりに、さまざまなコンポーネントを使用します。 これで、たとえば、列がデフォルトとは異なるスタイル（塗りつぶしの色または境界線）を使用している場合、この列を選択して、相対的なコンポーネントを変更するだけで済みます。 そして、すべてが大丈夫になります。 反対に、各セルの境界線を手動で変更する（適切な境界線を無効にする）ことは、煩わしいことではありません。

これで、作成したさまざまな細胞成分（分子）からテーブルを作成する準備が整いました（原子設計の観点から-生物）。

テーブルのカスタマイズ

テーブル全体で行の高さを変更するのは比較的簡単です。テーブルを強調表示し、要素の高さ（この場合、セルの高さ、[プロパティ]セクションの右側のパネルのH）を変更してから、垂直方向のマージンを要素を0に設定します。これで、行の高さを変更するには2回クリックする必要がありました。

列幅の変更：列を強調表示して、幅のサイズを変更します。 テーブルの残りの部分をクローズアップで移動した後、[配置]パネルの[タイドアップ]オプションと、右端のアイコンの下にあるドロップダウンリストの最初の項目を使用して、テーブル全体を選択します。

注：行と列をグループ化することはお勧めしません。 要素を拡張する列サイズを変更すると、幅と高さの小数値が表示されます。 それらをグループ化せずにピクセルグリッドにスナップすると、セルサイズは整数のままになります。

背景色、ストロークタイプ、およびコンテンツデータは、適切なコンポーネント、または8つのセルマスターコンポーネント（異なるストロークスタイルのセル）のいずれかで変更できます。 すぐに変更できない唯一のパラメータは、コンテンツのパディングなどのセルの余白です。 残りは簡単にカスタマイズできます。

オーバーライドではなくコンポーネント

最終的に得たものを見ると、やり過ぎのように思えるかもしれません。 そして、それはあなたのプロジェクトにテーブルが1つしかない場合です。 この場合、1つのセルコンポーネントを作成し、背景コンポーネントとストロークコンポーネントをオフのままにしておくことができます。 それらをセルコンポーネントに含め、テーブルを作成し、個別のセルごとに必要なカスタマイズを行うだけです。

しかし、コンポーネントが他の多くのファイルで使用されるライブラリに含まれている場合、ここに最も興味深いものがあります。

注：*コンポーネントのインスタンスで背景色とストロークを変更することはお勧めしません。 マスターでのみ変更してください。 そうすることで、オーバーライドのあるインスタンスは更新されません。 これは、手動で行う必要があることを意味し、それは私たちが避けようとしていることです。 それでは、マスターコンポーネントに固執しましょう。*

追加のタイプのテーブルセル（テーブルヘッダーなど）を作成する必要がある場合は、適切なスタイルのセルに必要なマスターコンポーネントのセットを追加します（ストロークスタイルが異なる8つのセルで上で行ったように）。これを使って。 はい、コンポーネントのインスタンスをオーバーライドするよりも時間がかかりますが、この方法では、マスターを変更すると、それらの変更がすべてのレイアウトに適用される場合を回避できます。

テーブルの状態

テーブルの要素の状態について話しましょう。 セルには、デフォルト、ホバー、選択の3つの状態を設定できます。 列と行についても同じです。

プロジェクトが比較的小さい場合は、テーブルコンポーネントのインスタンス内のオーバーライドによってすべての状態を設定できます。 しかし、それが大きなものであり、将来的に状態の外観を変更できるようにしたい場合は、すべてに対して個別のコンポーネントを作成する必要があります。

状態ごとに異なるストロークバリアントを持つ8つのセルすべてを追加する必要があります（おそらく、ストロークのスタイルによって異なります）。 はい、背景色と状態のストロークにも別々のコンポーネントが必要になります。

最終的には、次のようになります。

ここで少し問題が発生します。残念ながら、上記のようにすべてを実行すると（コンポーネントの状態を別の状態に変更する場合）、セルのコンテンツが失われるリスクがあります。 コンテンツタイプがマスターセルと同じ場合を除いて、更新する必要があります。 現時点では、それについては何もできません。

いくつかの異なる方法で作成されたテーブルをモックアップファイルに追加しました。

• このチュートリアルの使用（セルのスタイルに個別のコンポーネント）。
• セルコンポーネント（境界線、背景、およびコンテンツのコンポーネント）を使用します。
• すべてを統合するセルコンポーネントを使用します（さらにコンテンツコンポーネントのみを使用）。

遊んで、セルのスタイルを変更してみてください。

結論

複数のプロジェクトで同じコンポーネントライブラリを使用していて、それぞれに適切な数のテーブルがある場合は、コンポーネントのローカルコピーを作成できます（ストロークスタイルのセルコンポーネントと、必要に応じて、異なるセルコンポーネント）状態）、それらをカスタマイズし、プロジェクトで使用します。 セルの内容は、ローカルコンポーネントに基づいて設定できます。

また、テーブルの種類が異なる1つの大きなプロジェクトでテーブルを使用している場合は、上記のすべてのコンポーネントを簡単にスケーリングできます。 テーブルコンポーネントは、ホバリング時のセル状態の作成やその他の種類の相互作用のように、無限大以上に改善できます。

質問、フィードバック、考え？ 以下にコメントを残してください、そして私はあなたを助けるために最善を尽くします！

Figmaテーブルモックアップダウンロード

約束どおり、私はFigmaテーブルモックアップの完全版を作成しました。これは、学習目的やその他の好きなものに使用できます。 楽しみ！

関連読書

• 「アトミックデザイン」、ブラッドフロスト
• 「複雑なWebテーブルを設計する方法」SlavaShestopalov、Smashing Magazine
• 「Figmaでの原子コンポーネントの作成」、設計およびエンジニアリングチーム、littleBits
• 「FigmaTables：単一のセルコンポーネントによるデータグリッド設計」、Roman Kamushken、Setproduct

役立つリソース

• FigmaYouTubeチャンネル
  YouTubeの公式Figmaチャンネル—Figmaを初めて使用する場合は最初に見る必要があります。
• Google Sheets Sync
  GoogleスプレッドシートからFigmaファイルにデータを取り込むのに役立つFigmaプラグイン。 これは、このtutoriaの手法でうまく機能するはずですが、これが正しく機能するには、すべてのテキストレイヤーの名前を変更するために時間をかける必要があります。