Figmaのオーバーライドは、メインコンポーネントとの関係を保ったまま、インスタンスごとに文字や色などを変える操作です。共通部品の構造を使い、ボタンのラベルだけを「保存」「送信」に変えるような場面で使います。
この記事では、画面上の上書きとリセットを先に説明し、後半でPlugin APIの関連プロパティを整理します。APIに項目があることと、すべてのインスタンスで自由に変更できることは同じではありません。
メイン編集・上書き・切り離しの違い
| 操作 | 目的 | 確認する影響 |
|---|---|---|
| メインコンポーネントを編集 | 共通の部品を変更する | 利用中のインスタンスと上書き |
| インスタンスを上書き | この配置だけ文字や見た目を変える | 個別設定として残す範囲 |
| 上書きをリセット | メインの設定へ戻す | 独自の文言などを失わないか |
| インスタンスを切り離す | 独立した要素として扱う | メインとの更新関係を失う |
配置や元部品の探し方はアセット・コンポーネントの使い方を参照してください。
上書きする手順と、変更できる範囲
- 対象のインスタンスを選択します。
- 全体の設定か、内部の文字やアイコンかを確認します。
- 右サイドバーで必要な値を変更します。
- 別の配置と比較し、個別に変更した箇所を確認します。
代表的な対象は、文字の内容・書式、塗り、線、エフェクト、入れ子のインスタンスの入れ替えなどです。サイズを変えた場合は、文字の折り返しや配置も確認します。公式：インスタンスへの変更
通常の上書きは、レイヤーの順番や元の階層構造を自由に作り替えるための操作ではありません。共通構造を変えるならメイン側で変更します。Slotが用意された部品は、指定された領域の内容を追加・編集・並べ替えられるため、部品が公開している操作範囲を確認してください。公式：コンポーネントプロパティ
特定の上書きだけをリセットする
インスタンスまたは対象の内部レイヤーを選択し、右サイドバーのコンポーネント名にあるMore actionsからResetを確認します。特定プロパティのリセットと、対象の全変更のリセットを選び分けます。
例えばラベル「送信」は残して色だけを共通設定へ戻したい場合、全文言を含む全リセットは目的と合いません。戻す項目と選択範囲を確認してください。切り離しとは異なり、リセット後もメインとの関係は維持します。
メイン更新や入れ替え後に確認すること
個別の上書きがある箇所は、メインの変更がそのまま見た目に現れるとは限りません。ライブラリ更新後に一部だけ変わらない場合は、公開・更新受け入れ・上書きの確認順を確認してください。
他のコンポーネントへ入れ替える場合は、上書きの保持が試みられますが、文字や色が必ず残るとは限りません。レイヤー名・構成や元の値を照合し、変更後に確認します。インスタンスを入れ替える方法
上書きを共通変更にしたい場合、同一ファイルのメインへPush changesを使える条件もあります。別ファイルのライブラリや、別コンポーネント内に入れ子になったメインへ無条件に反映できる操作ではありません。共有元のファイルで、変更する範囲を確認して編集してください。
開発者向け：関連するPlugin APIプロパティ
以下は既存記事で扱っていた関連プロパティの整理です。textはTextNodeを指す変数名の例です。対象ノードの型、読み取り専用かどうか、スタイルの参照、レイアウト条件を確認して使います。
| 分類 | プロパティ | 注意点 |
|---|---|---|
| 幅・高さ | width / height | 読み取り専用。変更は対象のresize等を確認する |
| 角丸 | cornerRadius | 角丸に対応する型と、混在値を確認する |
| 塗り | fills / fillStyleId | ペイントとスタイル参照を区別する |
| 線 | strokes / strokeWeight / strokeStyleId | 線のペイント・太さ・スタイル参照を区別する |
| 効果 | effects / effectStyleId | 効果の値とスタイル参照を区別する |
| 描画 | opacity / blendMode | 対象ノードのAPI型を確認する |
| 文字列・フォント | text.characters / text.fontName | 変更前のフォント読み込みが必要 |
| 文字サイズ・装飾 | text.fontSize / text.textCase / text.textDecoration | 対象文字と変更の範囲を確認する |
| 字間・行間 | text.letterSpacing / text.lineHeight | 単位や混在値を確認する |
| 文字色・スタイル | text.fills / text.textStyleId | 色の値とテキストスタイルを区別する |
サイズ変更ではwidthやheightへ代入するのではなく、対象ノードのリサイズ方法を確認します。オートレイアウトでは親や子の寸法にも影響する場合があります。公式：InstanceNode
文字列やフォント、文字サイズなどを変更する処理は、必要なフォントをfigma.loadFontAsyncで読み込んでから実行します。複数フォントのテキストは範囲ごとのフォントも確認してください。プロパティによって非同期のスタイル操作が必要な場合もあるため、古い直接代入の例を一律に流用しないでください。公式：TextNode、公式：テキストとフォントの処理