Figma でコンポーネントを解除する方法 — インスタンスの切り離し・削除との違い

「インスタンスをコンポーネントから切り離して、ただのフレームとして自由に編集したい」「コンポーネントの解除ってどうやるの？」「解除と削除って何が違う？」— コンポーネントの扱いは Figma に慣れるまで迷いやすいポイントです。ですが、インスタンスを解除（切り離す）操作は Figma の標準機能で、プラグインを入れなくても右クリックやショートカット一発で行えます。

本記事では、インスタンスの解除（Detach instance）→ 削除との違い → 入れ替え・画像差し替え → 再コンポーネント化 までを順に説明します。最後に、Adobe XD から移行したコンポーネントを整理するコツもまとめました。

まず覚える入り口

解除したいインスタンスを選んで、Option + Command + B（Mac）/ Ctrl + Alt + B（Windows） を押すと、マスターコンポーネントから切り離せます。右クリック →「Detach instance」でも同じです。切り離したあとは、ただのフレームとして自由に編集できます。

この記事で得られること

インスタンスをコンポーネントから解除（切り離す）する基本操作
よく混同される「解除」と「削除」の違い
解除しなくても済むケース（インスタンスの入れ替え・画像の差し替え）
解除した後に再びコンポーネント化する方法
XD から移行したコンポーネントを整理するコツ

🧩 「コンポーネント解除」には2つの意味がある

まず整理しておきたいのが、「コンポーネントを解除したい」という言葉には、実は2つの異なる操作が含まれているという点です。

① インスタンスを切り離す（Detach instance） — マスターコンポーネントとのリンクを切り、そのコピーを独立したフレームにする。最も多い「解除」の意味で、本記事のメインです。
② コンポーネント（マスター）自体を削除する — コンポーネントの定義そのものを消す。これは「解除」ではなく「削除」で、影響範囲が大きい別の操作です（後述）。

この2つを混同すると「解除したつもりが消えてしまった」といった事故につながります。まずは①のインスタンス解除から見ていきましょう。

✂️ インスタンスを解除（切り離す）

インスタンス（コンポーネントを配置したコピー）をマスターから切り離すには、次のいずれかの方法を使います。

右クリック — 切り離したいインスタンスをキャンバスまたはレイヤーパネルで選択し、右クリック →「Detach instance」を選択。
ショートカット — 選択した状態で Option + Command + B（Mac）/ Ctrl + Alt + B（Windows）。
右パネル — 右サイドバーの Instance セクションにある「…」（三点メニュー）→「Detach instance」。

解除すると、そのインスタンスは次の状態になります。

通常のフレームになる — 現在のレイヤー構成とプロパティ（適用済みのオーバーライド）はそのまま保持されます。
マスターとのリンクが切れる — 以後、元のコンポーネント側を変更しても、このフレームには反映されません。

解除は「複製して中身を残す」操作

解除してもデザインの見た目やレイヤーは消えません。あくまで「コンポーネントとのつながり」だけが切れて、独立した普通のフレームになるイメージです。だから安心して中身を組み替えられます。

🗑️ 「解除」と「削除」はどう違う？

検索でよく並ぶ「コンポーネント解除」と「コンポーネント削除」は、まったく別の操作です。混同しやすいので整理しておきます。

解除（Detach instance） — インスタンスをマスターから切り離す。見た目もレイヤーも残る。マスターコンポーネントは無傷。
インスタンスの削除（Delete） — 配置したインスタンスを 1 つ消すだけ。Delete キーで消えます。マスターコンポーネントは影響を受けません。
マスターコンポーネントの削除 — コンポーネントの定義そのものを消す操作で、影響範囲が大きいため注意が必要です。チームライブラリで共有している場合は特に、削除前に使用箇所を確認しましょう。

マスターの削除は慎重に

「使っていないと思ったコンポーネントを消したら、別のページで使われていた」という事故は起こりがちです。マスターコンポーネントを消す前に、本当にどこからも参照されていないかを確認してください。単に「このコピーをコンポーネントから外したいだけ」なら、削除ではなく解除（Detach instance）が正解です。

🔁 解除せずに済むケース（入れ替え・画像差し替え）

「解除したい」と思っても、目的によっては解除しないほうが良いケースがあります。コンポーネントのつながりを保ったまま中身だけ変えられるなら、そのほうが後の管理が楽だからです。

インスタンスの入れ替え（Swap instance） — 右パネルの Instance セクションでコンポーネント名のドロップダウンを開き、別のコンポーネントに差し替えられます。ボタンやアイコンを「別の種類のコンポーネントに置き換えたい」ときは、解除よりこちらが向いています。
画像の差し替え — インスタンスの中の画像レイヤーを選び、塗り（Fill）の画像を差し替えれば、コンポーネントを保ったまま写真やアイコンだけ変えられます。

まず「入れ替え／差し替えで足りないか」を考える

中身を少し変えたいだけなら、解除する前に「入れ替え」や「画像差し替え」で済まないかを確認しましょう。解除してしまうと以後コンポーネント側の更新が届かなくなるので、つながりは保てるなら保っておくのが無難です。

🔧 解除した後に再びコンポーネント化する

解除して中身を作り替えたあと、「やっぱりこれをコンポーネントにしたい」というときは、改めてコンポーネント化できます。

対象のフレーム／レイヤーを選択し、Option + Command + K（Mac）/ Ctrl + Alt + K（Windows）。
または右クリック →「Create component」。

これで選択した要素が新しいマスターコンポーネントになり、以後はそこからインスタンスを配置して再利用できます。「解除 → 編集 → 再コンポーネント化」は、既存のコンポーネントをベースに新しい部品を作るときの定番の流れです。

🔄 XD から移行したコンポーネントを整理する

Adobe XD から移行したファイルでは、コンポーネント（XD ではシンボル）まわりの整理が必要になることがあります。XD のシンボルと Figma のコンポーネントは仕組みが異なるため、移行後に「解除して組み直す」「コンポーネント化し直す」といった作業が発生しやすいからです。

移行直後は、どの要素がインスタンスでどれがマスターかを把握してから整理を始めると安全です。
不要になったつながりは解除（Detach instance）で切り、必要な部品は改めてコンポーネント化してライブラリを整えると、その後の再利用がスムーズになります。

XD のシンボルやステートが Figma のコンポーネントへどう変換されるか（オーバーライドやバリアントの扱いを含む）は、XD のコンポーネント / シンボルを Figma へ移行する完全ガイド（以降「コンポーネント移行ガイド」）で詳しく解説しています。移行手段を選ぶ際は、コンポーネント構造をできるだけ保ったまま変換できるものを選ぶと、移行後の整理が最小限で済みます。

💬 よくある質問

Q: Figma でコンポーネントを解除するには？

切り離したいインスタンスを選択して、Option + Command + B（Mac）/ Ctrl + Alt + B（Windows）を押すか、右クリック →「Detach instance」を選びます。解除するとマスターとのリンクが切れ、現在のレイヤーやプロパティを保ったまま通常のフレームになります。

Q: 解除するとデザインは消えてしまいますか？

消えません。解除は「コンポーネントとのつながり」を切るだけで、見た目もレイヤーもそのまま残ります。以後、元のコンポーネント側の変更が反映されなくなるだけです。

Q: 「解除」と「削除」はどう違いますか？

解除（Detach instance）はインスタンスをマスターから切り離す操作で、中身は残ります。削除はインスタンスやマスターコンポーネントそのものを消す操作です。特にマスターコンポーネントの削除は影響範囲が大きいので、使用箇所を確認してから行ってください。

Q: 解除せずに中身だけ変えられますか？

変えられます。別のコンポーネントに替えたいときは右パネルの Instance セクションから「入れ替え（Swap instance）」、画像だけ変えたいときはインスタンス内の画像レイヤーの塗りを差し替えれば、コンポーネントを保ったまま編集できます。

Q: 解除した後にまたコンポーネントにできますか？

できます。対象を選択して Option + Command + K（Mac）/ Ctrl + Alt + K（Windows）、または右クリック →「Create component」で、新しいマスターコンポーネントになります。

Q: XD から移行したらコンポーネントがうまく扱えません。

XD のシンボルと Figma のコンポーネントは仕組みが異なるため、移行後に解除や再コンポーネント化が必要になることがあります。変換時にコンポーネント構造を保てる移行手段を選ぶと整理の手間が減ります。詳しくはコンポーネント移行ガイドを参照してください。

🎯 まとめ

コンポーネントの「解除」は、標準の Detach instance 機能で行えます。本記事の要点は次の 4 つです。

#	やりたいこと	使う機能
1	インスタンスを解除	右クリック → Detach instance / Opt+Cmd+B・Ctrl+Alt+B
2	解除と削除の違い	解除＝つながりを切る / 削除＝消す
3	解除せず中身を変える	入れ替え（Swap）/ 画像差し替え
4	再びコンポーネント化	Opt+Cmd+K / Ctrl+Alt+K

インスタンスの解除は Opt+Cmd+B / Ctrl+Alt+B、つながりを保ったまま変えたいなら入れ替え・画像差し替え、作り直したら再コンポーネント化。この流れを押さえれば、コンポーネントまわりで迷いにくくなります。そしてファイルのベースが Adobe XD で作成されたものなら、コンポーネント構造を保ったまま移行することが、解除や組み直しの手間を減らすいちばんの近道です。

🚀 Pixel Fine Converter を Figma Community からインストール

Figma Communityから1クリックで追加できます