Figmaでデザインを共通化するときは、部品の構造、見た目の設定、単独の値、別ファイルへの共有を分けて考えます。ボタン全体にはコンポーネント、見出しの書式にはスタイル、色や余白の値にはVariablesを使います。ライブラリは、それらの共通設定や部品を別ファイルで利用するための仕組みです。
再利用する対象から機能を選ぶ
| 機能 | 共通化する対象 | 例 | 間違えやすい点 |
|---|---|---|---|
| メインコンポーネント | 部品の構造と初期設定 | ボタン、カード、ナビゲーション | 単なるコピーと異なり、インスタンスが元を参照する |
| インスタンス | 配置先で使う部品 | 商品ごとのカード | 元からの更新と個別の上書きを区別する |
| バリアント | 同じ部品の種類・状態 | サイズS/M/L、通常・無効 | Variablesではなくコンポーネントセットの機能 |
| コンポーネントプロパティ | 利用側へ公開する編集項目 | 文言、表示、部品の入れ替え | すべての上書きを同じ操作にする機能ではない |
| スタイル | 見た目の設定の組み合わせ | 文字のフォント・サイズ・行間、影 | レイヤー全体や文章の内容を保存するものではない |
| Variables | 色・数値・文字列・真偽値など | 余白、テーマ色、表示切替 | 適用先・型・スコープ・モードを照合する |
| アセット | 部品を探して配置する入口 | 同じファイルやライブラリの部品 | アセット自体が別の部品形式なのではない |
| ライブラリ | 別ファイルで共通資産を使う仕組み | チーム共通のボタン・スタイル | 公開、契約、権限、利用側の更新確認が必要 |
| ネスト | 部品の中で別の部品を使う構造 | アイコン付きボタン | 親と内側の部品の上書き・更新を分ける |
各機能は排他的ではありません。コンポーネント内の文字にスタイルを適用し、余白や色に変数を使い、それらをライブラリで共有できます。公式のコンポーネントガイドとライブラリの説明で、参照元と共有範囲を確認してください。
ボタンを例にした組み合わせ
- 色と余白の共通値をVariablesで定義する。
- ボタンの文字にテキストスタイルを適用する。
- 文字と背景をコンポーネントにする。
- 通常・無効などの種類が必要ならバリアントを作る。
- 文言やアイコンを変更できる項目としてコンポーネントプロパティを設ける。
- インスタンスを各画面に配置する。
- 別ファイルでも使う場合は、条件を確認してライブラリを公開する。
すべての機能を最初から使う必要はありません。同じ画面でボタンを繰り返すだけなら、コンポーネントとインスタンスから始められます。複数の見出しの書式を揃えるだけなら、スタイルから始められます。
バリアントとVariablesを区別する
バリアントは、部品の状態やサイズを属性の組み合わせで選ぶ仕組みです。たとえばボタンの Size=M と State=Disabled を選びます。コンポーネントセット内で組み合わせが重複しないようにします。バリアントの公式ガイド
Variablesは、色や余白等の値を参照する仕組みです。モードで値を変えられますが、バリアントを作成する操作とは異なります。バリアントを作っただけでホバー等の動作が自動的に付くわけではなく、必要に応じてプロトタイプの操作を設定します。
インスタンスの変更と元の更新を分ける
| 変更したいこと | 最初に確認する対象 |
|---|---|
| すべてのボタンの初期状態を変更する | メインコンポーネント |
| 1個のボタンの文言だけ変える | インスタンスのテキストや公開プロパティ |
| 見出し全体の行間を揃える | 適用しているテキストスタイル |
| テーマ全体の色を切り替える | 変数のコレクション・モード・適用先 |
| 別ファイルへ変更を届ける | ライブラリの再公開と利用側の更新確認 |
インスタンスを切り離すと、元の部品からの更新を受けなくなります。変更が反映されない場合は、切り離す前に上書き、適用先、更新状態を確認してください。インスタンスの切り離し
コンポーネントプロパティにはテキスト、真偽値、インスタンスの入れ替え、バリアント等があります。現在はSlotによる内容編集も案内されているため、「インスタンス内には何も追加できない」と一律に判断しないでください。プロパティの公式説明
2026年10月12日に、Figmaの日本語表示で、メインコンポーネントとインスタンスの画面を確認しました。
フレームをメインコンポーネントにすると、レイヤーパネルのアイコンが変わり、「アセットパネルからコンポーネントをドラッグアンドドロップすると、このファイルで再利用できます」という案内が出ました。
メインコンポーネントのインスタンスを作ると、レイヤーパネルに、別のアイコンのFrame 2が追加されました。
インスタンスを選ぶと、デザインパネルの上部に、「このファイルから」と、元のコンポーネントを示す表示が出ます。
押さえておきたい最新仕様と注意点
- メインコンポーネントとインスタンスは、レイヤーパネルのアイコンで見分けられる
- インスタンスを選ぶと、「このファイルから」と、元の部品との関係が表示される
- 同じファイル内の再利用と、別ファイルへのライブラリ公開は、条件が異なる
- 画面の名前や案内は、Figmaの更新で変わることがある
試す前に、練習用のファイルをコピーしてください。
あなたはどっち？共通化したい対象から選ぶ判定フロー
共通化したいものから、次の順で機能を選びます。
- ボタンやカードなど、部品の全体を繰り返したい：コンポーネントとインスタンスから始めます。
- 見出しの書式などを、そろえたい：スタイルから始めます。
- 色や余白などの値を、テーマごとに切り替えたい：Variablesを使います。モードで値を変えられます。
- 同じ部品の、サイズや状態を切り替えたい：バリアントを使います。コンポーネントセット内で、組み合わせが重複しないようにします。
- 別のファイルで、共通の部品やスタイルを使いたい：ライブラリを使います。公開、契約、権限、利用側の更新確認が必要です。
すべての機能を最初から使う必要はありません。
ローカル利用とライブラリ公開の条件
同じファイル内のコンポーネントやスタイルの利用と、別ファイルへのライブラリ公開では条件が異なります。公開には有料プラン、元ファイルへの編集権限、Full seatなどの要件があります。Drafts内の元ファイルは、公開可能なフォルダーへの移動が必要です。詳しい条件は公開手順の公式資料と、対象の契約で確認します。
元の部品を変更しても、別ファイルの利用側へ自動で確定するとは限りません。公開する変更を選んで再公開し、利用側で差分を確認して更新します。
よくある質問：Figmaの再利用機能で迷ったときのチェックリスト
コンポーネントとスタイルは、何が違いますか？
コンポーネントは、部品の構造と初期設定を共通化します。スタイルは、見た目の設定の組み合わせです。文字のフォント・サイズ・行間や影などを共通化しますが、レイヤー全体や文章の内容を保存するものではありません。
バリアントとVariablesは、同じものですか？
同じではありません。バリアントは、部品の状態やサイズを属性の組み合わせで選ぶ、コンポーネントセットの機能です。Variablesは、色や余白などの値を参照する仕組みで、モードで値を変えられますが、バリアントを作成する操作とは異なります。
バリアントを作れば、ホバーの動作も自動で付きますか？
付きません。バリアントを作っただけで、ホバーなどの動作が自動的に付くわけではありません。必要に応じて、プロトタイプの操作を設定します。
インスタンスを切り離すと、どうなりますか？
元の部品からの更新を受けなくなります。変更が反映されない場合は、切り離す前に、上書き、適用先、更新状態を確認してください。
インスタンスの中には、何も追加できませんか？
一律に判断しないでください。コンポーネントプロパティには、テキスト、真偽値、インスタンスの入れ替え、バリアントなどがあり、現在はSlotによる内容編集も案内されています。
ライブラリを公開するには、何が必要ですか？
公開には、有料プラン、元ファイルへの編集権限、Full seatなどの要件があります。Drafts内の元ファイルは、公開可能なフォルダーへの移動が必要です。詳しい条件は、公式資料と、対象の契約で確認してください。
既存の比較図と操作記事
次の図は2025年に作成した機能整理の参考です。現在の仕様や利用条件は上の表と公式資料を優先してください。
