Figmaコンポーネント設計のコツ｜効率的なデザインシステムの作り方

Figmaはモダンなデザインツールの中でも特にコンポーネントベースのワークフローに優れており、適切に使いこなせばチーム全体のデザイン品質と生産性を大幅に向上させることができます。しかし、コンポーネントを「ただ作るだけ」では、後になってメンテナンスが困難になるケースも多く見られます。本記事では、スケーラブルなコンポーネント設計の原則から、バリアント活用、Auto Layout、デザインシステム構築の実践的なTipsまでを解説します。

コンポーネント設計の基本原則

アトミックデザインの活用

コンポーネントを設計する際は、アトミックデザインの考え方が有効です。

• ◆Atoms（原子）： ボタン、アイコン、テキスト、インプットなど最小単位
• ◆Molecules（分子）： 検索バー（インプット＋ボタン）のように複数のAtomの組み合わせ
• ◆Organisms（有機体）： ヘッダー、カードリスト、フォームなど複雑なUI単位
• ◆Templates（テンプレート）： ページレイアウトの骨格
• ◆Pages（ページ）： 実際のコンテンツを流し込んだ最終形

この階層を意識することで、汎用性の高いコンポーネントと文脈依存のコンポーネントを適切に分離できます。

命名規則の統一

チームで使うコンポーネントは命名規則を統一することが重要です。推奨フォーマット：

[カテゴリ] / [コンポーネント名] / [バリアント]
例：Button / Primary / Default
    Button / Primary / Hover
    Input / Text / Error

スラッシュ（/）を使うとFigmaがフォルダ構造として整理してくれるため、コンポーネントパネルの管理が格段に楽になります。

バリアントの効果的な活用

Figmaのバリアント機能は、同じコンポーネントの複数の状態（State）やスタイルをひとまとめに管理できる強力な機能です。

バリアント設計のベストプラクティス

プロパティの整理： バリアントのプロパティは以下の分類で整理します。

• ◆Size：Small / Medium / Large
• ◆Type：Primary / Secondary / Ghost / Destructive
• ◆State：Default / Hover / Pressed / Disabled / Loading
• ◆Icon：Left / Right / None

Boolean プロパティの活用： Figma 2022年以降のアップデートで追加されたコンポーネントプロパティ（Boolean、Text、Instance Swap）を活用すると、バリアント数を削減しながら柔軟な制御が可能になります。例えば「アイコンあり/なし」はBooleanプロパティで管理すると、バリアント爆発を防げます。

Auto Layoutの設計テクニック

Auto LayoutはFigmaの中で最も重要な機能の一つで、レスポンシブなコンポーネント設計に不可欠です。

基本的な使い方と注意点

• ◆Padding（内側余白）とGap（要素間隔）を明確に設定： デザイントークンのスペーシング値（4px、8px、16px、24pxなど）に基づいて設定すること
• ◆Hug Contents vs Fixed： テキストの長さに応じて伸縮するコンポーネントには「Hug Contents」を、固定幅が必要な場合は「Fixed」を選択
• ◆Fill Containerの活用： 親要素の幅に追従させる場合は子要素を「Fill Container」に設定

ネストされたAuto Layoutの設計

カード型コンポーネントを例に取ると、カード全体（縦方向Auto Layout）の中に、アイコン＋テキストの横並び（横方向Auto Layout）を内包するようなネスト構造が基本パターンです。この設計により、コンテンツ量が変わっても自動的にレイアウトが調整されます。

デザインシステムの構築手順

1. デザイントークンの定義

デザインシステムの基盤となるのがデザイントークンです。FigmaのLocal Variablesを使って以下を定義します。

• ◆Color： Primary、Secondary、Neutral（各スケール）、Semantic（Success/Warning/Error/Info）
• ◆Typography： フォントファミリー、ウェイト、サイズ、行間、文字間隔
• ◆Spacing： 4pxベースのスケール（4/8/12/16/24/32/48/64px）
• ◆Border Radius： None/Small/Medium/Large/Full
• ◆Shadow： 深さ別のドロップシャドウ定義

2. FoundationライブラリとComponentライブラリの分離

大規模なデザインシステムでは、トークン・テーマを管理するFoundationライブラリと、実際のUIコンポーネントを管理するComponentライブラリを分離することで、テーマの切り替えやブランド展開が容易になります。

3. ドキュメンテーション

各コンポーネントには、Figmaのアノテーション機能やDescription欄を使って「いつ使うか（Usage）」「何に使わないか（Don't）」を記載しておくと、チームメンバーの誤用を防げます。

4. バージョン管理とメンテナンス

コンポーネントに変更を加えた際は、ライブラリのPublish機能を使って各プロジェクトファイルに変更を通知・適用します。大きな破壊的変更を行う場合は事前にチームに周知し、移行期間を設けることが重要です。

まとめ

Figmaのコンポーネント設計は、最初に時間をかけて設計思想を固めることで、長期的な開発効率が大きく変わります。アトミックデザインによる階層設計、統一された命名規則、バリアントとAuto Layoutの適切な活用、そしてデザイントークンに基づいたシステム設計を実践することで、スケーラブルで保守性の高いデザインシステムを構築できます。チームのFigmaの使い方を標準化し、デザインと開発の連携をスムーズにしていきましょう。