▶ 3日で初案件PR
この記事でわかること
Figmaのコンポーネント解除は、インスタンスを選択して右クリック→「インスタンスの切り離し」の3操作で完了します。メインコンポーネントは直接解除できないため、複製してインスタンス化してから切り離す手順が必要です。この記事では操作手順から解除できない場合の対処法まで解説します。
今の仕事について、一番近いものは？
この記事の結論
Figmaのコンポーネント解除は「インスタンスの切り離し」操作で実行します。対象がインスタンスであれば右クリックまたはショートカット（Mac: ⌘+Option+B / Windows: Ctrl+Alt+B）で即時完了し、プロパティはそのまま保持されます。メインコンポーネントだけがある場合は「複製→切り離し→元を削除」の3ステップが必要です。
今日やるべき1つ
切り離したいレイヤーを選択してレイヤーパネルのアイコンを確認し、インスタンス（菱形×4アイコン）であればショートカット（Mac: ⌘+Option+B）を1回押して解除完了まで確認する（所要時間: 2分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| インスタンスを今すぐ切り離したい | Figmaコンポーネント解除は3操作で完了 | 3分 |
| メインコンポーネントしかなく解除できない | メインコンポーネントは3ステップで解除 | 5分 |
| 自分の状況が解除可能か判断したい | コンポーネント解除を2分で診断 | 2分 |
| バリアントを通常フレームに戻したい | バリアント解除はドラッグ1操作で対応 | 3分 |
| 納品前にファイルを整理したい | Figmaコンポーネント解除は5つの仕組みで管理 | 10分 |
Figmaコンポーネント解除は3操作で完了
操作経路は右クリック・プロパティパネル・ショートカットの3種類があり、どれを使っても同じ結果になります。自分の作業スタイルに合った経路を選んでください。
インスタンスとメインコンポーネントの見分け方
Figmaのレイヤーパネルでは、メインコンポーネントは「◇」（塗りつぶし菱形）アイコン、インスタンスは「◈」（中抜き菱形×4）アイコンで表示されます。対象レイヤーを選択してアイコンを確認するのが最初の1ステップです。キャンバス上では、インスタンスを選択すると右クリックメニューに「インスタンスの切り離し」という項目が表示されます。この項目が表示されない場合は、選択しているのがメインコンポーネントである可能性が高いため、次のH2で説明する手順に切り替えてください。
右クリックから切り離す手順
インスタンスを選択した状態で右クリックし、表示されるメニューから「インスタンスの切り離し」（英語環境では「Detach instance」）を選択します。切り離しが完了すると、レイヤーのアイコンがフレーム（□アイコン）に変わり、レイヤー構造とプロパティ（色・テキスト・余白）はそのまま保持されます（Figma Help Center: インスタンスをコンポーネントから分離する）。見た目は変わらず、コンポーネントとしての「リンク」だけが切れた状態になります。この状態になって初めて、個別に自由な編集が可能です。
ショートカットで高速切り離し
ショートカットはMacが⌘+Option+B、WindowsがCtrl+Alt+Bです。インスタンスを選択してこのキーを押すだけで、メニューを開かずに即座に切り離せます。複数のインスタンスを同時に選択した状態でショートカットを実行すると、選択した全インスタンスを一括で切り離せるため、複数要素をまとめて編集したい場面で有効です。ただし一括切り離しは意図しないインスタンスが紛れやすい場面でもあります。本当に解除してよいインスタンスだけを選択しているか、実行前に選択範囲を必ず確認してください。Figmaを使った作業効率を上げる方法については、ショートカット活用が大きな効果をもたらします。
プロパティパネルから切り離す手順
インスタンスを選択すると、右サイドバーのデザインパネルにコンポーネント名と「メインコンポーネントへ移動」ボタンが表示されます。そのコンポーネント名の右側に「⋮」（オプションアイコン）があり、クリックすると「インスタンスの切り離し」が選択できます。右クリックメニューが見つからない場合や、プロパティパネルを見ながら作業したい場合に使いやすい経路です。
CHECK
▶ 今すぐやること: 切り離したいレイヤーをクリックして選択し、レイヤーパネルのアイコンがインスタンス（◈）であることを確認してから右クリック→「インスタンスの切り離し」を実行する（2分）
Q: 切り離した後に元のコンポーネントに戻せますか？
A： 切り離し直後であれば⌘+Z（Ctrl+Z）でアンドゥ可能です。一度保存したり別操作を挟んだりすると履歴が消えるため、切り離し前に必要なインスタンスのコピーを別ページに退避させておくことをおすすめします。
Q： 複数のインスタンスを一度に切り離せますか？
A： 可能です。Shiftクリックや範囲選択で複数のインスタンスを選択した状態でショートカット（Mac: ⌘+Option+B / Windows: Ctrl+Alt+B）を実行すると、選択中の全インスタンスが一括で切り離されます。
メインコンポーネントは3ステップで解除
Figmaではメインコンポーネントを「解除」する直接操作が存在しないため、回り道が必要になります。紫色のレイヤーに右クリックしても「インスタンスの切り離し」が表示されない場合は、このセクションの手順を使ってください。
なぜメインコンポーネントは直接解除できないのか
Figmaのメインコンポーネントは、全インスタンスの「大元」として機能しています。直接解除するボタンが存在しない理由は、誤って解除するとファイル内の全インスタンスに影響が及ぶリスクがあるためです。メインコンポーネントの解除操作は「影響範囲を確認してから実行する」前提の設計になっています。この前提を理解せずに操作すると、他のメンバーが使用中のインスタンスに予期しない変更が及ぶため、順序通りに進めてください（Figma Help Center: インスタンスをコンポーネントから分離する）。
インスタンスを作成して切り離す手順
メインコンポーネントをフレームに戻す手順は3ステップです。まず対象のメインコンポーネントを選択して⌘+D（Ctrl+D）で複製します。Figmaでメインコンポーネントを複製すると、複製されたものはインスタンスとして作成されます（Figma Help Center: コンポーネントの作成と管理）。次にそのインスタンスを右クリックして「インスタンスの切り離し」を実行します。最後に元のメインコンポーネント（◇アイコン）を選択してDeleteキーで削除します。この3ステップで、メインコンポーネントを実質的にフレームへ戻せます。
なお、メインコンポーネントを削除しても既存のインスタンスはFigmaファイル内に残ります。削除後のインスタンスは元のコンポーネントとのリンクが切れた状態でキャンバスに残り続けるため、削除前にどのページにインスタンスが存在するか確認しておいてください。
削除前の影響範囲確認方法
メインコンポーネントを削除する前に、関連インスタンスの数と配置箇所を把握してください。Figmaのアセットパネル（左サイドバーのComponents欄）でコンポーネント名を右クリックすると「メインコンポーネントへ移動」が選べます。また「Instance Finder」プラグイン（Figmaコミュニティより無料入手可）を使うと、ファイル内の全インスタンスを一覧表示できるため、影響範囲を数値で確認してから削除できます。削除前にインスタンス数を把握する習慣をつけることで、削除後のトラブルをほぼゼロに抑えられます。チームでFigmaを使っている場合は、著作権や納品物の管理に関するルールも合わせて整理しておくと安心です。
CHECK
▶ 今すぐやること: メインコンポーネント（◇アイコン）を選択→Ctrl+D（⌘+D）で複製→複製したインスタンスを右クリックして「インスタンスの切り離し」→元のメインコンポーネントを削除の3ステップを1件試す（5分）
Q: メインコンポーネントを削除したら既存のインスタンスはどうなりますか？
A： 既存のインスタンスはキャンバスに残ります。ただし元のコンポーネントとのリンクが切れた状態になるため、以降はメインコンポーネントの変更が同期されなくなります。
Q： 複製してインスタンス化する際、複製が元のコンポーネントと同じ見た目になりますか？
A： はい、複製（Ctrl+D / ⌘+D）で作成したインスタンスは元のメインコンポーネントと同じレイヤー構造・プロパティを持ちます。切り離し後もその状態が維持されます。
コンポーネント解除を2分で診断
「解除しようとしたのに操作が見つからない」という場面では、そもそも対象が何かを正確に把握できていないケースがほとんどです。自分の状況がどのパターンに該当するかを2分で確認できます。
Q1: 対象レイヤーのアイコンを確認してください。菱形が塗りつぶされていますか？
Yes（◇ 塗りつぶし菱形）の場合はQ2へ進んでください。No（◈ 中抜き菱形、または□ フレーム）の場合はResult Aへ進んでください。
Q2: 右クリックメニューに「インスタンスの切り離し」が表示されますか？
Yesの場合はResult Bへ、Noの場合はResult Cへ進んでください。
Result A: 対象はインスタンスまたはフレームです。
インスタンス（◈アイコン）であれば右クリック→「インスタンスの切り離し」で即時解除できます。フレーム（□アイコン）であれば既に解除済みの状態です。追加の操作は不要です。
Result B: 対象はメインコンポーネントです。
「インスタンスの切り離し」はメインコンポーネントには表示されません。完全にフレームへ戻すには「複製→切り離し→元を削除」の3ステップが必要です。前のH2の手順を参照してください。
Result C: 解除操作が見つからない状態です。
グループや別のフレーム内に入れ子になっている可能性があります。レイヤーパネルで親要素を展開し、インスタンスのレイヤーを直接選択してから再操作してください。それでも見つからない場合は、Figmaのアセットパネルで対象コンポーネントを検索し、配置場所を特定してください。
CHECK
▶ 今すぐやること: 解除したいレイヤーを選択してレイヤーパネルのアイコンを確認し、上記のQ1から診断を開始する（2分）
Q: グループ化されたレイヤー内のインスタンスだけを切り離せますか？
A： はい、グループ内のインスタンスレイヤーをレイヤーパネルから直接クリックして選択すれば、グループごと選択することなくそのインスタンスだけを切り離せます。
Q： 「インスタンスの切り離し」を実行しても見た目が変わらないのはなぜですか？
A： 正常な挙動です。切り離しはコンポーネントとのリンクを削除する操作であり、見た目のプロパティは保持されます。レイヤーパネルのアイコンがフレーム（□）に変わっていれば切り離し成功です。
PR提供: 日本デザインスクール（デザスク）
バリアント解除はドラッグ1操作で対応
バリアントと通常のコンポーネントは別の構造を持つため、解除手順も異なります。バリアントの一部だけ取り出して単独で使いたい場面では、2つのアプローチから状況に応じて選択してください。
バリアントの構造と解除の考え方
バリアントはコンポーネントセット（紫の枠線で囲まれた領域）の中に複数のコンポーネントが入った構造です。バリアント全体を「フレームに戻す」という単一操作は存在しないため、必要なコンポーネントをバリアントセットから切り出すか、インスタンスを作成してから切り離すか、どちらかのアプローチを選ぶことになります。
バリアントをセットから切り出す手順
バリアントセット内の個別コンポーネントをセットの外にドラッグすると、そのコンポーネントはバリアントセットから独立したメインコンポーネントになります。独立後は通常のメインコンポーネントと同じ扱いになるため、前述の「複製→切り離し→元を削除」の手順でフレームに戻せます。ただし、そのバリアントのインスタンスがファイル内に存在する場合、切り出したコンポーネントに紐づくインスタンスとの関係が変化します。切り出し前にInstance Finderで影響範囲を確認してください。
バリアントのインスタンスを切り離す手順
バリアントのインスタンスをキャンバス上で選択すると、通常のインスタンスと同様に右クリックメニューに「インスタンスの切り離し」が表示されます。これを実行するとバリアントとのリンクが切れてフレームになります。バリアント特有のプロパティ（バリアント名や値）はフレーム変換後に意味を持たなくなりますが、見た目のスタイルはそのまま保持されます。見た目だけを保持して個別編集したい場面に適した操作です。
CHECK
▶ 今すぐやること: バリアントセット（紫枠）内の対象コンポーネントを選択し、セット外にドラッグして独立させてから通常の切り離し手順を実行する（3分）
Q: バリアントを全部フレームに戻す一括操作はありますか？
A： いいえ、Figmaの標準機能では一括操作がありません。バリアントセット内のコンポーネントを1つずつ切り出すか、インスタンスを1つずつ切り離す手順が必要です。
Q： バリアントを削除するとインスタンスはどうなりますか？
A： メインコンポーネントの削除と同様に、そのバリアントのインスタンスはキャンバスに残ります。リンクが切れた状態でデザインは保持されますが、以降の変更は同期されません。
Figmaコンポーネント解除は5つの仕組みで管理
制作フローの中に解除の判断基準を組み込んでおくことで、作業ミスと工数の両方を抑えられます。納品直前に「このコンポーネントを全部解除しなければ」という状況になってから対応するより、日常的な5つのハックを習慣化する方が実務上の効率は大きく上がります。
ハック1: 解除前の複製保存でリスクを30分以内にゼロに
【対象】: 解除後に元に戻せなくなることを懸念しているデザイナー
【手順】: Figmaの左サイドバーでページを右クリック→「ページを複製」を選択し、作業前のスナップショットを作成する（2分）。次に解除対象のレイヤーを特定して切り離し操作を実行する（5分）。最後に複製ページと現在のページを見比べて、差分が意図通りか確認する（3分）。
【コツと理由】: 「アンドゥで戻れる」という前提で作業を進めると、セッションをまたいだ段階で履歴が消えて戻れなくなります。複製ページをバックアップとして用意しておけば、切り離し後に問題が発覚しても素早くロールバックできます。Figmaのバージョン履歴機能も同様の目的で使えますが、Starterプラン（無料）では30日分、有料プランでは無制限に保存されます（Figma Help Center: バージョン履歴の表示と復元）。即時性という点では、作業前にページを複製しておく方法が最も手軽です。
【注意点】: ページ複製は完全なコピーのためファイルサイズが増加します。納品後は作業用複製ページを削除してファイルを整理してください。
ハック2: レイヤーアイコン確認で解除ミスを防止
【対象】: メインコンポーネントとインスタンスを誤って操作してしまうデザイナー
【手順】: 解除したいレイヤーをレイヤーパネルで選択する（10秒）。レイヤー名の左側のアイコンを確認し、◈（インスタンス）か◇（メインコンポーネント）かを判別する（10秒）。インスタンスであればそのまま切り離し、メインコンポーネントであれば複製→切り離し→削除の手順に切り替える（操作に応じて1〜3分）。
【コツと理由】: 「右クリックメニューにインスタンスの切り離しが出ない」というトラブルは、アイコンを確認せずに操作しているのが原因である場合がほとんどです。レイヤーアイコンを確認する1手順を挟むだけで、誤操作の発生率を大幅に下げられます。確認コストより修正コストの方が高くなるため、事前確認が実質的な時短になります。
【注意点】: キャンバス上でコンポーネントが紫色に見えるからといって必ずしもメインコンポーネントとは限りません。インスタンスも紫色のアウトラインで表示されます。色ではなくレイヤーパネルのアイコンで判断してください。
ハック3: Instance Finderで影響範囲を削除前に数値確認
【対象】: メインコンポーネントを削除する前に影響範囲を把握したいデザイナー
【手順】: FigmaコミュニティでInstance Finderを検索して無料インストールする（3分）。対象のメインコンポーネントを選択した状態でプラグインを実行する（30秒）。表示されたインスタンス一覧の件数と配置ページを確認し、削除してよいか判断する（2分）。
【コツと理由】: チームファイルや共有ライブラリ経由で他のページに使われているケースは想定より多くあります。Instance Finderで「0件」を確認してから削除することで、予期しない影響を事前に排除できます。削除後に他ページのデザインが崩れるリスクを、プラグイン1本で定量的に管理できる点が実務上の価値です。
【注意点】: Instance Finderは現在開いているFigmaファイル内のインスタンスを検索します。別ファイルや別プロジェクトのインスタンスは検索できません。複数ファイルにまたがるデザインシステムでは、別途ファイルを開いて個別確認が必要です。
ハック4: 納品前の解除基準を3分類で整理
【対象】: 納品時にどのコンポーネントを解除すべきか判断できないフリーランス
【手順】: 納品ファイル内のコンポーネントを「今後も使い回す」「今回限り」「クライアントが編集する」の3分類でタグ付けする（10分）。「今回限り」と「クライアントが編集する」に分類したコンポーネントのインスタンスをすべて切り離す（件数×1分）。「今後も使い回す」に分類したコンポーネントはそのまま残す。
【コツと理由】: クライアント側がFigmaに不慣れな場合、コンポーネント構造が逆に編集障壁になります。解除の判断基準を「相手が編集しやすいかどうか」に置くと、全解除でも全維持でもなく、最適な状態で納品できます。この3分類を使うことで、納品後のサポートコストを大幅に下げられます。フリーランスとして納品書や契約書の管理をあわせて整備しておくと、クライアントとの認識ズレを防げます。
【注意点】: クライアントが将来的にFigmaで修正する可能性がある箇所はコンポーネントを残しておく方が有利です。引き渡し前にクライアントの使用環境を確認してから分類方針を決定してください。
ハック5: 解除後のレイヤー名リネームで編集効率を向上
【対象】: 解除後にレイヤー名が自動変更されて混乱するデザイナー
【手順】: インスタンス切り離し直後にレイヤーパネルを確認し、「Frame 123」のような自動命名になっていないかチェックする（30秒）。意味のわかる名前（例: button-primary-cta）にリネームする（1分/レイヤー）。解除済みのレイヤーがわかるよう命名規則を統一する（例: 末尾に「-detached」を付与）。
【コツと理由】: Figmaは切り離し後のレイヤーに「Frame 123」のような連番を付与するケースがあります。命名規則なしで解除を進めると、10件以上の解除後にどのレイヤーが何を意味するか判別できなくなります。解除直後にリネームする習慣をつけることで、後から「このフレームは何だったか」を調べる時間を省けます。数ヶ月後にファイルを開き直す場面でも、自分自身のために命名が機能します。
【注意点】: 解除後のレイヤーは通常のフレームと完全に同じ扱いになるため、コンポーネント用の命名規則（アンダースコアやスラッシュ区切り）をそのまま使う必要はありません。コンポーネント命名規則を解除済みフレームに流用するとアセットパネルに表示されることがあるため、命名ルールは切り離し後に見直してください。
CHECK
▶ 今すぐやること: 現在進行中のFigmaファイルを開いてコンポーネントを1件選択し、ハック2の手順でアイコン確認→切り離し→レイヤー名リネームまでを10分以内に完了させる（10分）
Q: 解除したコンポーネントを後から再コンポーネント化できますか？
A： はい、フレームを選択して右クリック→「コンポーネントを作成」（またはCtrl+Alt+K / ⌘+Option+K）で再度コンポーネント化できます。ただし以前のコンポーネントとは別の新規コンポーネントとして作成されます。
Q： チームでFigmaを使っているとき、自分が解除するとチームに影響しますか？
A： 切り離し自体は自分のファイル内の操作のみで完結しますが、メインコンポーネントの削除はチーム全体に影響します。削除前にInstance Finderで確認してからチームに周知してください。
コンポーネント解除はインスタンス確認から
Figmaのコンポーネント解除は、対象がインスタンスかメインコンポーネントかを最初に確認する1手順が、その後の操作ミスをほぼゼロにします。インスタンスであれば右クリック→「インスタンスの切り離し」または⌘+Option+B（Ctrl+Alt+B）で即時完了し、プロパティは保持されます。メインコンポーネントは「複製→切り離し→元を削除」の3ステップで対応してください。
作業前にページ複製でバックアップを取り、切り離し後にレイヤー名をリネームする2つの習慣を加えれば、解除作業で困る場面はほぼなくなります。今日1件のファイルで一連の手順を試してみてください。Figmaをはじめとしたデザインツールの活用は、フリーランスWebデザイナーの仕事獲得にも直結する実務スキルです。
| 状況 | 次の一歩 | 所要時間 |
| インスタンスを今すぐ切り離したい | ⌘+Option+B（Ctrl+Alt+B）を1回押す | 10秒 |
| メインコンポーネントをフレームに戻したい | 複製→切り離し→削除の3ステップを実行 | 5分 |
| 影響範囲を確認してから削除したい | Instance Finderをインストールして実行 | 3分 |
| 納品前に整理方針を決めたい | 3分類（使い回す/今回限り/編集用）で仕分け | 10分 |
Figmaコンポーネント解除に関するよくある質問
Q: Figmaの無料プランでもコンポーネント解除はできますか？
A： はい、無料プランでも「インスタンスの切り離し」「メインコンポーネントの削除」を含む全操作が利用できます。プランによる機能制限はコンポーネント解除には関係しません。
Q： 解除（切り離し）と削除は何が違いますか？
A： 解除（切り離し）はコンポーネントとのリンクを切って通常のフレームに変換する操作で、レイヤーはキャンバスに残ります。削除はレイヤーそのものをキャンバスから取り除く操作です。解除を意図した場合に削除を選ぶとレイヤーが消えてしまうため、操作前に目的を明確にしてから選択してください。
Q： コンポーネントを解除するとオートレイアウトも解除されますか？
A： いいえ、オートレイアウトは独立した機能のため、コンポーネントの切り離しを実行してもオートレイアウトは保持されます。切り離し後もフレーム内のオートレイアウト設定はそのまま機能します。
【出典・参照元】
Figma Help Center: インスタンスをコンポーネントから分離する – インスタンスの切り離しに関する公式ドキュメント
Figma Help Center: コンポーネントの作成と管理 – メインコンポーネントの複製挙動に関する公式ドキュメント
Figma Help Center: バージョン履歴の表示と復元 – バージョン履歴の保存期間に関する公式ドキュメント