Figmaのアセットは、コンポーネントを探して画面へ配置する入口です。コンポーネントの元をメインコンポーネント、そこから配置した部品をインスタンスと呼びます。同じボタンを複数の場所で使う場合、元の形を共通化しながら、配置先ごとに文言などを変えられます。
この記事では、同じファイル内の部品作成から始め、個別の上書き、バリアント、別ファイルのライブラリ利用へ進みます。手順は現行の公式資料に基づき、既存の画像は2024年の画面例として残しています。UIの名称と配置は現在と異なる場合があります。
1. 繰り返し使う部品をコンポーネントにする
ボタンなどの対象を選び、コンポーネントを作成します。作成後はレイヤーの種類を確認し、用途が分かる名前を付けます。構造を共通化する対象なので、部品全体と内側のテキストを区別してください。公式のコンポーネントガイド
2. アセットからインスタンスを配置する
現在のFigma Designでは、左側のナビゲーションにあるアセットを開き、目的の部品を探してキャンバスへドラッグします。部品の詳細画面からInsert instanceで挿入する方法もあります。Windowsでは Alt + 2、Macでは Option + 2 でアセットを開けます。公式の配置手順
同じファイル内のメインコンポーネントを複製して、インスタンスを作ることもできます。配置後は、インスタンスが元の部品を参照しているか確認します。
アセットに出ない場合は、単なるフレームのままになっていないか、部品の公開・ライブラリの有効化・アクセス権限を確認してください。別のライブラリ元の非公開部品まで、すべてのファイルで表示されるわけではありません。
3. 元の変更とインスタンスの上書きを使い分ける
メインコンポーネントの変更は、それを参照するインスタンスへ反映されます。一方、配置先で文言や色を個別に変えると、上書きとして扱われる項目があります。変更が反映されない場合は、元を変更したのか、インスタンスだけを変更したのか確認してください。
繰り返し使う部品では、文字・表示切替・部品の入れ替えなどをコンポーネントプロパティとして用意すると、利用側で変更する項目を選びやすくなります。公式のプロパティ説明には、Slotによる柔軟な内容編集もあります。
上書きをリセットする
元の設定へ戻したい場合は、インスタンスのリセット項目を使います。すべてを戻す操作と、特定の変更だけを戻す操作では影響範囲が異なるため、文言や画像の上書きが必要か確認してから操作します。
インスタンスを切り離す
Detach instanceは、部品を元のコンポーネントから独立させる操作です。現在の内容は残りますが、元の更新を受けなくなります。単に文言を変えたいときや更新が反映されないときに、最初から切り離す必要はありません。公式の切り離し説明
変更をメインへ反映する・元へ移動する
Push overrides to main componentは、インスタンスの変更を元へ反映する操作です。公式では、同じファイル内の部品で利用でき、ネストしたコンポーネントには使えないとされています。別ファイルのライブラリ元を、配置先から無条件に変更できるわけではありません。メインコンポーネント編集の公式説明
参照している元を確認するには、Go to main componentを使います。別ファイルの元の場合は、そのファイルを開く権限も確認します。
4. バリアントでサイズや状態を切り替える
同じ種類の部品にサイズや状態がある場合は、コンポーネントセットにまとめ、バリアントの属性を付けます。たとえば Size=M、State=Default のように用途を区別します。複数のメインコンポーネントをCombine as variantsでまとめる方法と、既存の部品にバリアントを追加する方法があります。公式のバリアント手順
インスタンスでは、用意された属性を選んで種類を切り替えます。同じ属性の組み合わせが重複しないようにします。色や数値を管理するVariablesとは別の機能です。
5. ライブラリで別ファイルから利用する
同じファイル内のコンポーネント利用は、他ファイルへのライブラリ公開とは条件が異なります。公開には有料プラン、Full seat、元ファイルへの編集権限等が必要です。Starterでローカル部品を使えることと、別ファイルへライブラリを公開できることを混同しないようにします。公式のライブラリ公開条件
- 元ファイルに公開する部品やスタイルを用意します。
- Drafts内のファイルは、公開可能なフォルダーへ移します。
- アセットからライブラリを開き、このファイルの公開項目を確認します。
- 公開する資産を選び、変更の説明を付けて公開します。
- 利用ファイルで対象ライブラリを有効にし、アセットから部品を配置します。
元の部品を編集した後は、ライブラリを再公開し、利用ファイルで更新内容を確認します。元ファイルの変更と利用側での適用は、別の段階です。
ライブラリの公開は、インターネット全体への一般公開とは異なります。部品が見つからない場合は、ファイルへのアクセスとライブラリの提供範囲を確認してください。
困ったときの確認順
| 症状 | 確認すること |
|---|---|
| アセットに部品がない | コンポーネント化、検索対象、公開状態、ライブラリの有効化、アクセス権限 |
| 文言を変えられない | 選択するテキスト、編集権限、コンポーネントプロパティ、不足フォント |
| 元の変更が反映されない | インスタンスの参照、個別上書き、切り離し、ライブラリ更新 |
| バリアントを選べない | コンポーネントセット、属性名と値、重複した組み合わせ |
| 公開できない | 契約・seat・編集権限・元ファイルの場所・公開対象 |
色・文字・値の管理も含めた選び方は再利用機能の比較、書式の作成はローカルスタイル、フォント警告は不足フォントの対処で確認できます。