Figmaのアセットは、コンポーネントを探して画面へ配置する入口です。
コンポーネントの元をメインコンポーネント、そこから配置した部品をインスタンスと呼びます。
同じボタンを複数の場所で使う場合、元の形を共通化しながら、配置先ごとに文言などを変えられます。
この記事では、同じファイル内の部品作成から始め、個別の上書き、バリアント、別ファイルのライブラリ利用へ進みます。
手順は現行の公式資料に基づき、既存の画像は2024年の画面例として残しています。
UIの名称と配置は現在と異なる場合があります。
1. 繰り返し使う部品をコンポーネントにする
ボタンなど、共通化する部品全体のレイヤーを選びます。
内側のテキストだけを選ばないようにし、選択部分を右クリックしてCreate componentを選びます。
ショートカットはWindowsがCtrl + Alt + K、MacがOption + Command + Kです。
作成後はレイヤーパネルに紫色のコンポーネントアイコンが表示されたことを確認し、用途が分かる名前を付けます。
この操作にはファイルの編集権限が必要です（公式のコンポーネント作成手順）。
部品の考え方は公式のコンポーネントガイドで確認できます。
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. ライブラリで別ファイルから利用する
同じファイル内のコンポーネント利用は、他ファイルへのライブラリ公開とは条件が異なります。
公式の公開対象はProfessional・Education・Organization・Government・Enterpriseです。
元ファイルへの編集権限が必要で、有料プランではFigma Designを編集できるFull seatも確認します。
Starterでローカル部品を使えることと、別ファイルへライブラリを公開できることを混同しないようにします。
- 元ファイルに公開する部品やスタイルを用意します。
- Drafts内のファイルは、公開可能なフォルダーへ移します。
- アセットからライブラリを開き、このファイルの公開項目を確認します。
- 公開する資産を選び、変更の説明を付けて公開します。
- 利用ファイルで対象ライブラリを有効にし、アセットから部品を配置します。
元の部品を編集した後は、ライブラリを再公開し、利用ファイルで更新内容を確認します。
元ファイルの変更と利用側での適用は、別の段階です。
ライブラリの公開は、インターネット全体への一般公開とは異なります。
部品が見つからない場合は、ファイルへのアクセスとライブラリの提供範囲を確認してください。
困ったときの確認順
つまずいたら、対象ファイル・ライブラリ名・部品名と、編集しているのがメインかインスタンスかを控えます。
変更が反映されない場合は、同じメインから新しいインスタンスを配置し、既存のものと比較してください。
新しい部品だけ変わる場合は既存の上書きを確認し、どちらも変わらない場合は参照元や公開状態を調べます。
リセットする前に残したい文言や画像を控え、変更範囲を確認してから実行してください。
別ファイルの問題は、公開する側と利用する側のどちらで止まっているかを分けて確認します。
| 症状 | 確認すること |
|---|---|
| アセットに部品がない | コンポーネント化、検索対象、公開状態、ライブラリの有効化、アクセス権限 |
| 文言を変えられない | 選択するテキスト、編集権限、コンポーネントプロパティ、不足フォント |
| 元の変更が反映されない | インスタンスの参照、個別上書き、切り離し、ライブラリ更新 |
| バリアントを選べない | コンポーネントセット、属性名と値、重複した組み合わせ |
| 公開できない | 契約・seat・編集権限・元ファイルの場所・公開対象 |
色・文字・値の管理も含めた選び方は再利用機能の比較、書式の作成はローカルスタイル、フォント警告は不足フォントの対処で確認できます。