こんにちは。デザインとエンジニアリングの境界線で、日々「美しく、かつ壊れないシステム」を追求しているシニアエンジニアです。
これからFigmaという広大な海に漕ぎ出す皆さんに、最初にお伝えしたいことがあります。それは、「デザインは見た目を作る作業ではなく、仕組みを設計する作業である」ということです。
大規模なプロジェクトになればなるほど、場当たり的に作ったコンポーネントは、のちに「修正不可能なスパゲッティ・デザイン」へと変貌し、チームの足を引っ張ります。逆に、最初に正しい「型」を作っておけば、ボタン一つ、色一つ変えるだけで、数百枚の画面が瞬時に、かつ正確に同期します。
今日は、Figmaの真髄である「コンポーネント」と「バリアント」を使いこなし、プロの開発現場で「君の作ったデータは本当に使いやすいね」と絶賛されるための設計ルールを、優しく、かつ濃密に伝授します。
—
1. なぜ「コンポーネント」を学ぶ必要があるのか？
Figmaにおけるコンポーネントは、プログラミングでいうところの「クラス（Class）」や「関数」と同じです。
一度定義した「親（Main Component）」を、各画面で「子（Instance）」として使い回す。親を直せば、すべての子に修正が反映される。この仕組みをマスターすることは、あなたの作業時間を半分にし、クリエイティビティに割く時間を倍にするための、最初で最大の鍵となります。
—
2. 「Hello World」としてのボタン設計：Auto Layoutの魔法
まずは、最も基本でありながら奥が深い「ボタン」を例に、プロのセットアップを体験してみましょう。
ステップ1：Auto Layoutで「中身に合わせる」
ただの四角形（Rectangle）の上に文字を載せるのは、今日で卒業です。
1. `T`キーでテキストを入力（例：「Click Me」）。
2. テキストを選択した状態で `Shift + A` を押します。
3. これがAuto Layoutです。右サイドバーの「Padding」を調整してください。
【プロの視点】
Auto Layoutを使うことで、中の文字が増えてもボタンが自動で伸び縮みします。これはコーディングにおける `padding` そのものの挙動です。エンジニアに渡した時に「実装のイメージが湧く」データになります。
ステップ2：コンポーネント化
作成したAuto Layoutのフレームを選択し、画面上部中央の「ひし形アイコン（Create Component）」をクリックします。
これで、あなたの「最初の部品」が誕生しました。
—
3. バリアント（Variants）の使い分け：カオスを防ぐ整理術
ここからが本題です。ボタンには「通常時」「ホバー時」「無効化（Disabled）」など、様々な状態があります。これを別々のコンポーネントにせず、一つのグループにまとめるのがバリアントです。
命名規則の黄金律
バリアントを追加する際、プロは右サイドバーのプロパティ名を適当にしません。
- Type: Primary, Secondary, Ghost
- State: Default, Hover, Focused, Disabled
- Size: Large, Medium, Small
- Icon: True, False (Boolean)
このように「プロパティ名 = 値」の形式で管理することで、エンジニアはコード（ReactのPropsなど）と一対一で対応させることができ、実装のミスが激減します。
—
4. 保守性を爆上げする「インスタントスワップ」と「プロパティ」
多くの初心者が陥る罠があります。それは、「アイコンの種類ごとにバリアントを作ってしまうこと」です。
例えば、ボタンの左にアイコンを入れたいとき。
「検索アイコンのボタン」「設定アイコンのボタン」「保存アイコンのボタン」……これらをすべてバリアントにすると、組み合わせが爆発し、管理不能になります（これをバリアント爆発と呼びます）。
ここで使うのが「インスタントスワップ（Instance Swap）」です。
【極限の知見】プロパティ整理術
1. ボタンの中に「アイコンコンポーネント」を配置します。
2. 右サイドバーの「Component Property」セクションの `+` を押し、Instance Swapを選択。
3. 名前を `Icon` に設定します。
こうすることで、デザインを使う人は、右側のドロップダウンメニューからアイコンを自由に切り替えられるようになります。バリアントを増やす必要はありません。
さらに、「Boolean（真偽値）」も活用しましょう。
- `Show Icon` というプロパティを作り、スイッチをオンオフするだけでアイコンの表示・非表示を切り替えられるようにします。
—
5. 実践：プロレベルのコンポーネント設計ルール
大規模案件で破綻しないための、私からの「秘伝のルール」をまとめます。
| ルール | 内容 | なぜ重要か |
| :— | :— | :— |
| 名前は英語で | `Btn/Primary/Large` | 実装コードとの親和性を高め、検索性を上げるため。 |
| Atomic Designの意識 | アイコン > 小さな部品 > 大きな部品 | 依存関係を明確にし、一箇所の修正で全体をコントロールするため。 |
| バリアントは最小限に | 色や形が変わるものだけバリアントに。 | Figmaの動作が重くなるのを防ぎ、迷いをなくすため。 |
| スロット設計 | 中身が入れ替わる場所はコンポーネント化。 | 柔軟性を保ちつつ、一貫性を守るため。 |
—
6. 最後に：ツールは「対話」のための言語
Figmaでコンポーネントをきれいに整えるのは、単なる自己満足ではありません。それは、次にそのデータを触るデザイナーや、それを見てコードを書くエンジニアへの「ラブレター」なのです。
「ここを変えれば、全部変わるよ」
「このプロパティを見れば、実装すべき状態がわかるよ」
そんなメッセージを、設計を通じて伝えることができます。
最初は難しく感じるかもしれません。でも、今日紹介した「Auto Layout」「Variants」「Instance Swap」の3つを意識するだけで、あなたの作るデザインの品質は、周囲が驚くほど向上します。
一歩ずつ、楽しみながら「壊れないデザインシステム」を作っていきましょう。もし迷ったら、いつでもこの記事に戻ってきてください。
あなたのデザインの旅が、より素晴らしいものになることを願っています。