Figmaでデザインを進めていると、コンポーネント化したUIを使い回しているうちに「ここだけ少し変えたい」場面が出てくる、という流れを経験する人は多いと思います。
私はそうした場合、インスタンスを切り離す → 後で後悔するという道を辿っていました。
この記事では、
- そもそもなぜコンポーネント化するのか
- インスタンス切り離しが抱える問題
- それを解決するVariantという考え方
を、順番に整理します。
まず「コンポーネント化」すると何が起きるのか
コンポーネント化の目的
Figmaで要素をコンポーネント化すると、
- 同じUIを何度も使い回せる
- 元を修正すれば、全体に反映される
- デザインの一貫性を保てる
というメリットがあります。
特にLPやWeb制作では、
- ボタン
- 見出し
- カードUI
などは、最初にコンポーネント化しておくのが基本です。
コンポーネントを使うと「インスタンス」が生まれる
コンポーネントを配置すると、それは「インスタンス」になります。
インスタンスは、
- 元コンポーネントと同期している
- 一部の内容（テキストなど）は上書きできる
- 見た目の根本は元に依存している
という状態です。ここまでは、とても便利です。
インスタンスを切り離すと起きる問題
なぜ切り離したくなるのか
作業を進めていると、
- サイズだけ変えたい
- 色だけ少し変えたい
- paddingを微調整したい
といった理由で、インスタンスの切り離しをしたくなります。確かに、切り離すと自由に編集ができるため、やりたいことが実現できます。
しかし、切り離しの代償は大きい
インスタンスを切り離すと、
- 元コンポーネントとの同期が完全に切れる
- 後からの変更は手動対応
- 修正漏れが発生しやすい
つまり、「その場では楽」だが、「後で必ず困る」という状態になります。
特に、修正が入りやすい案件ほど致命的です。
「一部だけ違う」を解決するのがVariant
Variantとは？
Variantとは、同じ役割のUIを、選択式で切り替えられる仕組みです。
例：
- Primary / Secondary ボタン
- M / L サイズ
- 通常 / 強調 表現
これらを別コンポーネントに増やすのではなく、1つにまとめて管理できます。
Variantを使うと何が変わるか
Variantを使えば、
- インスタンスを切り離さなくて済む
- 見た目の違いを選択で切り替えられる
- 後からの修正も一括反映できる
つまり、コンポーネントの恩恵を失わずに、柔軟さを得られるというわけです。
Combine as variants の具体的な手順
ここからは、実際の操作手順です。
Step1：元となるコンポーネントを複製する
- Main Component（紫のひし形）を選択
- ⌘D（Windows：Ctrl + D）で複製
- Variantにしたい数だけ作る
Step2：複数のコンポーネントを選択
- 複製した Main Component同士 を複数選択
- インスタンスではないことを確認
Step3：「Combine as variants」を実行
- 右パネル上部の３点リーダーから「複数のコンポーネントを作成」を選択
- 「バリアントとして結合」をクリック
これで、
- Component Set が作成され
- 各コンポーネントが Variant になります
Step4：Variantプロパティを整理する
右パネルに表示される
Property 1
を、意味のある名前に変更します。
例：
- Type：Primary / Secondary
- Size：M / L
👉1プロパティ＝1軸が基本です。
Step5：各Variantの見た目を調整する
- 色
- フォントサイズ
- padding
などを、Variantごとに調整します。
この変更は、配置済みのインスタンスにも反映されます。
LP制作での現実的なVariant設計
LPやWordPress前提の制作では、
- Variant軸は2つまで
- 作りすぎない
- 「本当に切り替えるか？」を基準にする
のがポイントです。
例：
Button
├ Type：Primary / Secondary
└ Size：M / L
まとめ
Figmaでよくある流れは、
- コンポーネント化する
- 使い回す
- 少しだけ変えたくなる
- 切り離す
- 後で困る
です。
Variantは、この流れを「切り離さずに済む設計」に変えてくれます。
インスタンスを切り離す前に、Variantで吸収できないか、一度立ち止まって考えるだけで、デザイン管理は格段に楽になります。
ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。
- 選考ではありません
- 履歴書不要
- 技術の話が中心
- 所要時間30分程度
- オンラインOK
