Figmaインスタンス編集|5つの制約を外す実務ハック

Figmaのインスタンスは、テキスト・色・画像を個別に編集できますが、要素の追加や構造変更は制限されます。公式ヘルプでは切り離し・プロパティ・変更のプッシュの3手順で対応可能と案内されています。この記事では制約の原因から実務ハックまで5ステップで解説します。

▶ 3日で初案件PR

この記事でわかること

編集できる範囲と制限される範囲を3分類で即判断できます。「切り離すべきか・プッシュすべきか」を3問の診断フローで特定できます。プロパティ設計で修正操作を約50%削減する手順を習得できます。

この記事の結論

インスタンスの編集制限は「構造を守りながら見た目を変える」という設計思想から生まれています。テキスト・色・画像はインスタンス上で自由に変更でき、構造変更が必要な場合は切り離しまたは親コンポーネントへのプッシュで対応できます。フリーランスの実務では「何を共通管理し、何を個別差し替えするか」を最初に決めることが、修正コストを最小化する鍵になります。

今日やるべき1つ

現在作業中のFigmaファイルを開き、インスタンスを1つ選択して右クリックメニューを確認してください。「メインコンポーネントに移動」「切り離し」「変更をプッシュ」の3項目が表示されれば、インスタンスとして正しく配置されています（3分）。

状況別ショートカット

インスタンス編集は3種類が基本

インスタンスの編集権限は大きく3つの区分で理解できます。編集できる範囲と制限される範囲を整理すると、判断が格段に速くなります。

テキスト・色・画像は自由に変更できる

インスタンス上で個別に編集できる要素は、テキスト文言、カラー（塗り・枠線）、画像の差し替え、シャドウやブラーなどの装飾プロパティです（Figma公式ヘルプ：コンポーネントインスタンスの作成と挿入）。

これらは親コンポーネントを更新しても、インスタンス側で個別に変更した値は上書きされません。ボタンの文言を10種類に変えながら、デザインシステムの更新を全インスタンスに一括反映できる状態を維持できます。フリーランスがクライアントの多言語ページを管理する際に特に有効な仕組みです。

あわせて読みたい

フリーランス事例紹介|7職種の成功パターンを徹底解説 フリーランスとして活躍する人は国内で約257万人に達し、職種はエンジニアからデザイナー、広報・PRまで7分野以上に広がっています。本記事では職種別・企業活用別の実…

Figmaコンポーネントの基礎解説と実務メモでは、「コンポーネントの変更はすべてのインスタンスに反映されますが、個別のインスタンスを編集することも出来ます。」と解説されています。

要素の追加・削除とレイヤー構造は制限される

インスタンスに新しいレイヤーを追加したり、既存レイヤーを削除したりすることはできません。親コンポーネントが持つレイヤー構造はすべてのインスタンスで固定されています。

これはデザインシステムの整合性を保つための制約であり、意図せず構造が崩れることを防ぐ設計です。複数人でFigmaを触るプロジェクトでもレイヤー設計が崩れにくい点が、この制約の実務上の利点といえます。構造変更が必要な場面では「切り離し」で対応できます（詳細は後述）。

コンポーネントとインスタンスは親子関係で動く

親コンポーネント（マスターコンポーネント）を編集すると、紐づくすべてのインスタンスに変更が反映されます。一方でインスタンス側で変更した値は「上書き済み」として保持され、親の更新に影響されません。

この親子関係を理解しないまま作業すると、「親を直したのにインスタンスが変わらない」「インスタンスを直したつもりが次の更新で元に戻った」という混乱が起きます。この仕組みは意図的な設計であり、バグではありません。インスタンス上の変更履歴はデザインパネル右クリックから「上書きを削除」で親の値に戻せます。

Q: インスタンスのテキストを変えたら親コンポーネントにも反映されますか？

A： 反映されません。インスタンス上での変更は「上書き」として扱われ、親コンポーネントには一切影響しません。親側へ変更を適用したい場合は「変更をメインコンポーネントにプッシュ」を使います。

Q： インスタンスで色を変えたのに、後から親を更新したら元に戻ってしまいました。なぜですか？

A： インスタンスの「上書き」状態がリセットされた可能性があります。右クリックメニューから「上書きをリセット」または「インスタンスを入れ替え」を実行したタイミングで上書き値が削除されることがあります。変更を維持するには切り離しを検討してください。

インスタンス編集できない原因は3パターン

「編集しようとしたら何も変わらない」という状況は、原因が3つに絞られます。原因を特定せずに操作を変えても解決しないことが多いため、まず以下で原因を特定してください。

選択しているレイヤーがインスタンス制御下にある

インスタンスの内部レイヤーを直接選択しようとしたとき、クリック1回では親のインスタンス枠が選択されます。内部レイヤーを編集するには、ダブルクリックでインスタンスに入り、さらにダブルクリックまたは単一クリックで対象レイヤーを選択する必要があります。

ネストされたインスタンス（インスタンスの中にインスタンスが入っている構造）では、2〜3回のダブルクリックが必要です。移動や文字幅の変更ができない原因の多くはこの選択ミスです。内部レイヤーが正しく選択されているかは、画面左のレイヤーパネルでハイライトされているレイヤー名を確認すると判断できます。

Figmaインスタンス編集でオブジェクト移動や文字幅変更ができない相談では、「Figmaでインスタンスを編集する時にオブジェクトを移動したり、文字幅を変えたりするのができません。どうやったらできますか？」という質問が寄せられています。ダブルクリックで内部に入ってから対象を選択すると、移動・リサイズ・テキスト編集が可能になります。この問題の多くはダブルクリックで解決できます。

親コンポーネント側でプロパティが制限されている

Figmaのコンポーネントプロパティ機能を使うと、インスタンス側に公開する編集項目を絞り込めます（Figma公式ヘルプ：コンポーネントのプロパティを設定する）。

ブール値プロパティを使ってレイヤーの表示/非表示を制御している場合、インスタンスのデザインパネルに専用のトグルが現れ、通常の方法では非表示レイヤーを操作できません。自分が触っているインスタンスにプロパティが設定されているかは、インスタンスを選択した状態でデザインパネルの右側に「コンポーネントのプロパティ」セクションが表示されるかどうかで判断できます。

自動レイアウトの制約で移動・リサイズが制限される

親コンポーネントに自動レイアウト（Auto Layout）が設定されている場合、内部要素の位置は自動レイアウトのルールに従います。このため手動での移動やサイズ変更ができない状況が発生します。

これはインスタンスの制限ではなく、自動レイアウトの仕様です。対処法は2つあります。親コンポーネントの自動レイアウト設定を変更する方法はすべてのインスタンスに影響します。インスタンスを切り離してから自動レイアウトを解除する方法は、そのインスタンスのみに影響します。どちらを選ぶかは次のセクションの診断フローで判断できます。

Q: ダブルクリックしてもオブジェクトを移動できません。どうすれば移動できますか？

A： 親コンポーネントに自動レイアウトが設定されているケースが多いです。インスタンスを選択した状態でデザインパネルに「自動レイアウト」セクションが表示されていれば、内部要素の位置はルールで固定されています。移動が必要な場合は切り離し後に自動レイアウトを解除してください。

Q： インスタンスを選択するとデザインパネルにプロパティのトグルが表示されます。これは何ですか？

A： 親コンポーネントに設定されたコンポーネントプロパティです。テキスト・ブール値・インスタンススワップ・バリアントの4種類があり、インスタンス側で安全に変更できる項目が整理されています。このパネルで操作するだけで、構造を崩さずに見た目を切り替えられます。

インスタンス操作を3分で診断

「切り離すべきか、プッシュすべきか、そのままにすべきか」は状況によって判断が変わります。以下の質問で自分の状況を特定してください。

Q1: 変更したいのは「テキスト・色・画像」などの見た目だけですか？

Yesの場合はQ2へ進みます。No（レイヤー追加・削除・構造変更が必要）の場合はResult Dへ進みます。

Q2: この変更を他のインスタンスには反映させたくない（このインスタンスだけ変えたい）ですか？

Yesの場合はQ3へ進みます。No（すべてのインスタンスに反映させたい）の場合はResult Cへ進みます。

Q3: 今後も親コンポーネントの更新を受け取り続けたいですか？

Yesの場合はResult Aへ進みます。No（独立して管理したい）の場合はResult Bへ進みます。

Result A: インスタンス上で上書き編集する（推奨）

インスタンスを選択しダブルクリックで内部に入り、対象要素を直接編集します。この状態では親コンポーネントの更新は引き続き受け取れます。所要時間：1〜2分。

Result B: 切り離しを実行する

インスタンスを右クリックして「インスタンスを切り離す」を選択します。以降は独立したグループとして扱われ、親の更新影響を受けません。切り離し後は元のインスタンス関係には戻せないため、元データのバックアップコピーを別フレームに非表示で残しておくと安全です。所要時間：1分。

Result C: 変更をメインコンポーネントにプッシュする

インスタンスを右クリックして「変更をメインコンポーネントにプッシュ」を選択します。インスタンス側の変更が親に反映され、以降はすべてのインスタンスに伝播します。この操作は取り消し可能（Ctrl+Z）ですが、他メンバーの作業中ファイルへの影響を事前に確認してください。所要時間：2分。

Result D: 切り離し後に構造変更、または親コンポーネントを修正する

レイヤー追加や構造変更はインスタンス上では不可能です。「このインスタンスだけ構造を変えたい」場合は切り離しを選択し、「すべてのインスタンスの構造を変えたい」場合は親コンポーネントを直接編集します。所要時間：3〜5分。

Q: 切り離し後にやっぱりインスタンスに戻したくなった場合はどうすればいいですか？

A： 切り離しはCtrl+Z（Mac：Cmd+Z）で直後に取り消せます。ただし保存・操作を重ねた後では取り消せないため、切り離し前に元のインスタンスを非表示フレームにコピーしておくことをおすすめします。

Q： 変更をプッシュすると、チームメンバーの作業に影響しますか？

A： はい、影響します。親コンポーネントが変わるため、紐づくすべてのインスタンスの共通部分が更新されます。チームプロジェクトでは事前に共有してから実行してください。

インスタンス管理は5つの仕組みで解決

インスタンスの編集トラブルの多くは、最初の設計段階で防げます。切り離しを多用するほど管理コストが増加するため、以下のハックを活用してインスタンス上での編集を完結させてください。

ハック1: テキストプロパティで文言差し替えを仕組み化して修正時間を削減

【対象】: ボタン・ラベル・タグなど文言が案件ごとに変わるコンポーネントを管理するデザイナー

【手順】: 親コンポーネントを選択し、テキストレイヤーを選択した状態でデザインパネルの「+」からテキストプロパティを追加します（2分）。プロパティ名を「label」など意味のある名前に設定し、デフォルト値を入力します（1分）。インスタンスを選択するとデザインパネルにテキスト入力欄が表示されるので、そこから文言を変更します（30秒）。ダブルクリックで内部に入る操作が不要になります。

【ポイントと理由】: 実務では「テキストプロパティをあらかじめ設定してインスタンス上のパネルから変更する」方が工数を削減できます。プロパティ化されたテキストはデザインパネルの表層から変更できるため操作が1ステップ減ります。変更可能な項目が明示されるため、別のデザイナーやクライアントが誤って構造を崩すリスクも下がります。複数ファイルにまたがるデザインシステムでも、プロパティ経由の変更は追跡しやすくなります。10個のインスタンスの文言を変える場合、ダブルクリック操作では10回×2ステップ=20操作、プロパティ経由では10回×1ステップ=10操作となり、操作数を約50%削減できます。

【注意点】: テキストプロパティを設定しても、ダブルクリックによる直接編集は引き続き可能です。両方の方法が共存しているため、チームルールとして「どちらの方法で変更するか」を統一しておくと混乱を防げます。

ハック2: ブール値プロパティで表示切り替えを整備して非表示レイヤーの探し時間をゼロにする

【対象】: アイコン有無・バッジ表示・オプション要素など、表示/非表示が変わる要素を持つコンポーネントを設計するデザイナー

【手順】: 親コンポーネント内で表示/非表示を切り替えたいレイヤーを選択し、デザインパネルの目のアイコン横の「+」からブール値プロパティを追加します（2分）。プロパティ名を「show-icon」など直感的な名前にし、デフォルト値をTrue/Falseで設定します（1分）。インスタンス選択時にデザインパネルに表示されるトグルをオン/オフして表示状態を切り替えます。レイヤーパネルを一切触らずに制御が完結します（30秒）。

【ポイントと理由】: ブール値プロパティがない場合、非表示操作はレイヤーパネルからの操作になり、対象レイヤーを探すだけで時間がかかります。インスタンスを切り替え（インスタンススワップ）した際に手動での非表示設定がリセットされるケースもあります。プロパティ経由の表示制御はインスタンスの「上書き」として認識されるため、親コンポーネントの更新後も設定が維持されます。

【注意点】: ブール値プロパティで制御されているレイヤーを、レイヤーパネルから直接削除しないでください。プロパティの参照先がなくなり、インスタンスパネルにエラーが表示されます。「削除したい」場合は親コンポーネントのプロパティ設定から削除するのが正しい手順です。

ハック3: インスタンススワッププロパティでアイコン差し替えを1クリック化して差し替えミスを防止

【対象】: アイコンやサムネイル画像など、インスタンスによって異なる子コンポーネントを持つデザインシステムを管理するデザイナー

【手順】: 親コンポーネント内でアイコンや画像が入るネストされたインスタンスを選択し、「+」からインスタンススワッププロパティを追加します（2分）。使用可能なコンポーネントをスワップ対象として指定します（特定のコンポーネントセットに絞り込めます）（2分）。インスタンス選択時にデザインパネルに表示されるドロップダウンから差し替えたいコンポーネントを選択します。アセットパネルを開かずにスワップが完結します（30秒）。

【ポイントと理由】: アセットパネルからのドラッグ操作はファイル内のすべてのコンポーネントが対象になるため、意図しないコンポーネントを選択するリスクがあります。スワッププロパティで使用可能なコンポーネントを絞り込んでおくと、選択肢が整理されて判断コストが下がります。スワップ後もプロパティの上書き情報が維持されるため、他のプロパティ設定（文言・表示状態）がリセットされません。アセットパネル操作では発生しがちな「差し替えたらテキストが元に戻った」問題を防止できます。

【注意点】: インスタンススワッププロパティの選択肢に含まれないコンポーネントは、右クリック「インスタンスを入れ替え」からは選べません。本当に別のコンポーネントに差し替えたい場合は、切り離しを検討するか、親コンポーネントのスワップ対象リストにそのコンポーネントを追加してください。

ハック4: バリアントでボタン状態を整備して個別編集による崩れをゼロにする

【対象】: ボタンのデフォルト・ホバー・無効・エラー状態など複数の見た目バリエーションを管理するデザイナー

【手順】: 状態違いのコンポーネントを複数作成し、すべてを選択した状態で右クリックから「コンポーネントセットにまとめる」を選択します（3分）。各バリアントにプロパティと値を設定します（例：Property: State、Values: Default/Hover/Disabled）（2分）。インスタンス選択時にデザインパネルに表示されるドロップダウンからStateを変更します。ボタンの状態違いを個別編集なしで切り替えられます（30秒）。

【ポイントと理由】: 個別編集による状態管理はインスタンスごとに上書き値が異なるため、デザインシステム更新時に各インスタンスの上書き状態が不一致になりやすいです。バリアントによる状態管理は親コンポーネント側で状態定義が完結するため、更新コストが集約されます。バリアントは自動レイアウトと組み合わせることでプロトタイプのインタラクション設定も簡素化でき、DesignモードとPrototypeモードの設定を2重管理する必要がなくなります。10種類のボタンコンポーネントをバリアントで管理すると、デザインシステム更新時は1箇所（親コンポーネント）の修正で完結します。

【注意点】: バリアントの数が増えすぎるとコンポーネントパネルが複雑になります。プロパティは3〜4種類、各プロパティの値は5つ以内を目安にすると、インスタンス側のデザインパネルが見やすい状態を維持できます。

ハック5: 変更のプッシュで修正を一元管理して同じ作業を2度やらずに済む

【対象】: インスタンス上で改善した変更を全インスタンスに展開したいデザイナー

【手順】: インスタンス上で変更を加えた後、右クリックメニューから「変更をメインコンポーネントにプッシュ」を選択します（30秒）。親コンポーネントが更新され、紐づくすべてのインスタンスに変更が反映されていることをアセットパネルで確認します（1分）。意図しない差異が生じていないかを、複数インスタンスを並べて目視確認します（2分）。プッシュ後の検証まで含めて完了です。

【ポイントと理由】: 「インスタンス上で改善策を見つけた後、改めて親コンポーネントを開いて同じ変更を手作業で再現する」方法は、微妙なズレ（パディング値の差異・色コードの入力ミス）が発生しやすいです。プッシュ操作はインスタンス上で確認した変更内容をそのまま親に転送するため、転記ミスが原因のデザイン崩れが発生しません。プッシュ後はすべてのインスタンスが同じ値を継承するため、インスタンスごとの上書き状態のばらつきも解消されます。

【注意点】: プッシュ操作はチームライブラリを使用しているプロジェクトでは、他ファイルのインスタンスにも影響します。ライブラリの更新通知が他メンバーに届くため、本番前の変更は必ず事前共有してから実行してください。「プッシュ前にチームへ連絡する」というチームルールを設けるだけで、意図しない更新によるトラブルの大半は防げます。

Q: バリアントとコンポーネントプロパティはどう使い分ければいいですか？

A： バリアントは「見た目が大きく変わる状態違い（デフォルト/ホバー/エラー）」の管理に適しています。コンポーネントプロパティ（テキスト・ブール値・インスタンススワップ）は「見た目の構造は同じで、一部の要素だけが変わる」場面に適しています。ボタンのDefault/Hover状態はバリアント、ボタンのラベル文言はテキストプロパティ、アイコンの有無はブール値プロパティで管理するのが一般的です。

Q： インスタンスを切り離さずに、できるだけ多くの編集をインスタンス上で行う方法はありますか？

A： コンポーネントプロパティ（テキスト・ブール値・インスタンススワップ）とバリアントを組み合わせると、構造変更以外のほぼすべての編集をインスタンス上で完結できます。切り離しは「どうしても構造変更が必要で、かつ再利用が不要な場合」に限定するのが実務での推奨です。

インスタンス設計は実例2パターンで比較

インスタンスの編集方針を最初に決めることが、修正コストを大きく左右します。設計方針が曖昧なまま進めたプロジェクトと、方針を明確にしたプロジェクトでは後半の修正時間が異なります。

ケース1（成功パターン）: コンポーネントプロパティを先に設計したバナーUI

フリーランスデザイナーがECサイトのバナーUIを制作した事例です。初回ヒアリングで「文言・画像・背景色が案件ごとに変わる」と確認し、バナーコンポーネントにテキストプロパティ（バナータイトル・サブテキスト・CTAラベル）とブール値プロパティ（ロゴ表示/非表示）を設計段階で組み込みました。

3ヶ月間の運用で25件のバナーバリエーションを作成しましたが、インスタンスを切り離したのはゼロ件でした。クライアントからの「文言を変えてほしい」という依頼に対して、デザインパネルのプロパティ入力欄を更新するだけで対応でき、修正対応の操作ステップを削減できました。また作業効率を上げるための仕組み化という観点でも、プロパティ設計は実務を自動化する強力な手段です。

あわせて読みたい

作業効率上げる方法|フリーランスが5つの仕組みで時間を30%削減 フリーランスが作業効率を30%削減する5つの仕組みを解説。タスク優先順位の明確化、無料ツール活用、環境整備で月3〜5時間を回収できます。

Figmaコンポーネントの基礎解説と実務メモでは、「コンポーネントの変更はすべてのインスタンスに反映されますが、個別のインスタンスを編集することも出来ます。」と解説されており、この仕組みを最大限活用した事例です。

設計段階でプロパティを定義せず、インスタンスごとにダブルクリックで個別編集していた場合、25件分の変更追跡が困難になり、デザインシステムの一貫性が崩れていた可能性があります。

ケース2（失敗パターン）: 切り離しを多用した結果、管理コストが増大したアプリUI

別のフリーランスデザイナーが納品したモバイルアプリのUIで発生した事例です。「細かく個別調整したい」という理由でインスタンスを積極的に切り離し、画面ごとに独立したグループとして管理する設計を採用しました。

最初の1ヶ月はスムーズに進みましたが、2ヶ月目にボタンのデザイン仕様が変更になった時点で問題が顕在化しました。切り離し済みのグループが40箇所あり、すべてを手動で変更するのに多くの時間がかかりました。コンポーネントを維持していれば親を1箇所変更するだけで完了する作業でした。

Figmaインスタンス編集でオブジェクト移動や文字幅変更ができない相談でも同様の操作制限に関する質問が寄せられており、切り離し前にコンポーネントプロパティや自動レイアウトの調整を検討することで、切り離しなしで個別調整のニーズを満たせるケースがあります。

Q: 切り離しが多くなってしまったファイルを、コンポーネント管理に戻す方法はありますか？

A： 既存の切り離し済みグループをコンポーネントに変換することは可能です。対象グループを選択して右クリックから「コンポーネントを作成」で新たなコンポーネントとして登録し直せます。既存のインスタンスとの紐付けは自動では回復しないため、大規模なリファクタリングが必要な場合はFigmaプラグインの「Find and Replace」や「Component Replacer」を活用してください。

Q： インスタンスの上書き状態を一覧で確認する方法はありますか？

A： Figma標準機能では上書き状態の一覧表示はありません。Figmaプラグイン「Instance Finder」を使うと、同一コンポーネントのインスタンスを検索・一覧表示でき、上書き箇所の確認作業を効率化できます。

インスタンス編集を制する：3原則で修正コストを最小化する

インスタンスの編集は「テキスト・色・画像はインスタンス上で上書き」「構造変更は切り離しまたは親への反映」「繰り返す編集はプロパティ化」の3原則で整理できます。

切り離しをゼロにすることが目標ではありません。「インスタンスを切り離さずに解決できる方法を先に探し、どうしても必要な場合だけ切り離す」という判断基準を持つことで、修正コストを最小化しながら柔軟なデザイン管理が実現できます。

フリーランスの作業効率を高める仕組みづくりと同様に、Figmaの設計においても「仕組み化」の発想が長期的な時間節約につながります。

あわせて読みたい

時間管理術とタスク整理メソッド完全ガイド｜月40時間の余裕を生み出す手順 時間管理術を5段階で習得し、月40時間の余裕を生み出す方法を紹介。24時間記録、優先度スコア、90分集中ブロックなど実践的なメソッド完全ガイド。

Figmaインスタンス編集に関するよくある質問

Q: インスタンスを編集しても、親コンポーネントには反映されませんか？

A： 反映されません。インスタンス上の変更は「上書き」として保持され、親コンポーネントには影響しません。親への反映が必要な場合は「変更をメインコンポーネントにプッシュ」を使います（Figma公式ヘルプ：コンポーネントインスタンスの作成と挿入）。

Q： インスタンスをコピーして別のページに貼り付けると、コンポーネントとの紐付けは維持されますか？

A： 同一ファイル内でのコピー&ペーストであれば、インスタンスの紐付けは維持されます。別ファイルへのコピーの場合、コピー先のファイルにも同一コンポーネントが存在するか、共有ライブラリとして公開されている必要があります（Figma公式ヘルプ：コンポーネントインスタンスの作成と挿入）。

Q： コンポーネントプロパティとバリアントはどちらを先に設定すべきですか？

A： バリアントを先に設定してください。バリアントで状態の種類を定義した後、各状態で共通して変更可能にしたい項目（ラベル文言・アイコン表示など）をコンポーネントプロパティとして追加する順序が、設計の見通しを保ちやすいです（Figma公式ヘルプ：コンポーネントのプロパティを設定する）。

【出典・参照元】

Figma公式ヘルプ：コンポーネントインスタンスの作成と挿入 – インスタンスの作成・挿入・複製方法

Figma公式ヘルプ：コンポーネントのプロパティを設定する – コンポーネントプロパティの設定方法

Figmaコンポーネントの基礎解説と実務メモ – インスタンス個別編集とコンポーネント更新の関係

Figmaインスタンス編集でオブジェクト移動や文字幅変更ができない相談 – インスタンス編集制限の実例