PR|3日で初案件

Figmaインスタンス解除は3手順で完了|ショートカットと解除できない時の対処

◆ ◆ ◆

Homeフリーランスの仕事術 › Figmaインスタンス解除は3手...

FREELANCE CAREER GUIDE
フリーランスの仕事術
Figmaインスタンス解除は3手順で完了|ショートカットと解除できない時の対処
フリ転。
目次

この記事でわかること

Figmaのインスタンス解除は、Mac: ⌥+⌘+B / Windows: Ctrl+Alt+Bのショートカット1つで30秒以内に完了します。コンポーネント本体はインスタンス経由の3段階手順でフレームに戻せます。複数インスタンスの一括解除から実務効率化のノウハウまで、操作別に解説します。

Figmaのインスタンス解除は、右クリックまたはMac: ⌥+⌘+B、Windows: Ctrl+Alt+Bのショートカットで3手順以内に完了します。コンポーネント自体は直接解除できず、インスタンス経由の手順が必要です。本記事では操作別の手順から解除できない原因と対処法まで解説します。

今の仕事について、一番近いものは?

この記事の結論

Figmaのインスタンス解除は、対象を選択して「インスタンスの切り離し」を実行するだけで完了します。コンポーネント自体を直接解除する機能は存在しないため、インスタンスを介した3段階の手順が唯一の方法です。ショートカットを覚えれば1秒以内に実行でき、作業効率が大幅に向上します。

Figmaと組み合わせて活用したいデザインツールの選び方については、CanvaとFigmaの違いと使い分けも参考にしてください。

今日やるべき1つ

インスタンスを1つ選択してMac: ⌥+⌘+B(Windows: Ctrl+Alt+B)を押し、レイヤー名が変わることを確認する(所要時間: 30秒)。

状況別ショートカット

状況読むべきセクション所要時間
まず基本操作を知りたいインスタンス解除は3ステップで完了2分
コンポーネントが解除できないコンポーネント解除は3段階の迂回手順が必要3分
今すぐ解除できるか自己診断したいインスタンス解除の対応を2分で診断2分
複数まとめて解除したい複数インスタンスは5ステップで一括解除2分
実務ノウハウを効率化したいインスタンス解除は5つの仕組みで効率化5分

インスタンス解除は3ステップで完了

Figmaのインスタンス解除は、右クリックメニューとプロパティパネルの2ルートから実行できます。どちらも結果は同じで、実行後にレイヤー名の末尾から「インスタンス」の表示が消え、通常のフレームに変換されます(Figma Help Center: インスタンスをコンポーネントから分離する)。

右クリックメニューで30秒以内に解除できる

キャンバス上で解除したいインスタンスを1回クリックして選択します。選択状態で右クリックするとコンテキストメニューが表示されます。メニューの中から「インスタンスの切り離し」を選択すれば解除が完了します。レイヤーパネルを見ると、紫色のコンポーネントアイコンが消え、通常のフレームアイコンに変わっていることで解除を確認できます。「どこにメニューがあるか」さえ分かれば、初めてでも30秒以内に完了します。

プロパティパネルのインスタンスメニューで解除できる

右クリックに慣れていない場合は、画面右のプロパティパネルからも解除できます。インスタンスを選択すると右パネルの上部に「インスタンス」という項目が表示されます。その右横にある4点ドットのメニューアイコンをクリックすると「インスタンスの切り離し」の選択肢が出てきます。右クリックと操作経路は異なりますが、実行される処理はまったく同じです。マウスの位置によって使いやすい方を選ぶと効率的です。

ショートカットで1秒以内に解除できる

頻繁に解除作業を行う場合は、ショートカットキーが最も高速です。Macでは⌥(Option)+⌘(Command)+Bを同時押し、WindowsではCtrl+Alt+Bを同時押しします。インスタンスを選択した状態でショートカットを入力するだけで、メニューを開く手間なく即時に切り離しが実行されます。1日に10回以上解除操作をするフリーランスであれば、ショートカットを覚えることで年間1時間以上の作業時間を節約できます。

作業効率を上げる方法についてはこちらも参考になります。ショートカット活用もその一部です。

CHECK

▶ 今すぐやること: キャンバス上の任意のインスタンスを1つ選択し、ショートカット(Mac: ⌥+⌘+B、Windows: Ctrl+Alt+B)を押してレイヤーパネルの変化を確認する(30秒)

Q: 解除後、見た目は変わりますか?

A: 変わりません。インスタンス解除は見た目のレイヤーとプロパティをそのまま保持しつつ、コンポーネントへのリンクだけを削除します。ただし、解除後はコンポーネントの変更が反映されなくなります。

Q: 解除は取り消せますか?

A: 解除直後であれば、⌘+Z(Mac)またはCtrl+Z(Windows)で元に戻せます。ファイルを閉じた後は取り消しができないため、重要なファイルでは事前に複製を取ってください。

コンポーネント解除は3段階の迂回手順が必要

Figmaの仕様として、コンポーネント自体を直接解除する機能は存在しません。コンポーネントをフレームに戻すには、迂回手順を踏む必要があります。

コンポーネントを直接解除できない理由を把握する

Figmaでは、コンポーネントはインスタンスの「マスター(本体)」として機能しています。インスタンスはコンポーネントを参照するコピーであり、解除(切り離し)操作はインスタンスとマスターの接続を断つ処理です。コンポーネント本体に対しては接続を断つ対象が存在しないため、操作が成立しません。この構造を理解しておくと、「なぜ直接解除できないのか」という混乱がなくなります。

Master Componentは3段階の手順でフレームに戻せる

実務ではコンポーネント自体をフレームに戻したいケースがあります。その場合は3段階で対応します。まず対象のコンポーネントを選択し、右クリックから「インスタンスを作成」を選んでインスタンスを生成します。次に作成したインスタンスを選択して⌥+⌘+B(またはCtrl+Alt+B)で切り離し、通常のフレームに変換します。最後に元のコンポーネント(Master Component)を選択して削除します。この3段階を経ることで、コンポーネントをフレームとして残すことができます(wentz-design.com: Figmaのコンポーネント化を解除・削除する方法)。

解除前に複製を取る習慣で作業ミスを防げる

Master Componentを削除する手順は取り消しが複雑になりやすく、元に戻したい場面で困ることがあります。解除作業を始める前に、対象のコンポーネントを⌘+D(またはCtrl+D)で複製し、非表示レイヤーとして保管してください。「解除してしまったが、やはり元に戻したい」という事態は実務でも一定の頻度で発生するため、1分かけて複製を取る習慣は長期的に時間の節約につながります。

CHECK

▶ 今すぐやること: テスト用のコンポーネントを1つ作成し、「インスタンス作成→切り離し→元コンポーネント削除」の3段階を実際に試す(3分)

Q: コンポーネントのメニューに「インスタンスの切り離し」が表示されない場合は?

A: 選択しているオブジェクトがインスタンスではなくコンポーネント本体である可能性が高いです。レイヤーパネルでアイコンを確認し、紫色のコンポーネントアイコンが表示されている場合はコンポーネント本体です。上記の3段階手順で対応してください。

Q: 複数のコンポーネントをまとめてフレームに戻せますか?

A: 現状のFigma標準機能では、コンポーネント→インスタンス作成→切り離し→削除の操作を1つずつ行う必要があります。数が多い場合は次のセクションで紹介する複数解除の手順も参考にしてください。

インスタンス解除の対応を2分で診断

自分の状況がインスタンスの解除で解決できるのか、コンポーネントの迂回手順が必要なのかを以下の質問で特定してください。2分以内に必要な操作が絞り込めます。

Q1: 解除しようとしているオブジェクトのレイヤーアイコンは何色ですか?

紫色のコンポーネントアイコン(◇マーク)の場合はQ2へ進んでください。通常のグレーフレームアイコンの場合はすでに解除済みです。そのまま編集できます。

Q2: そのアイコンの形は「塗りつぶした◇」ですか、「枠線のみの◇」ですか?

枠線のみの◇(インスタンスを示すアイコン)の場合はResult A(インスタンス解除)へ。塗りつぶした◇(コンポーネント本体を示すアイコン)の場合はResult B(コンポーネント迂回手順)へ。

Q3(Result A該当者向け): 複数のインスタンスをまとめて解除したいですか?

Noの場合はResult A(単体解除)です。Yesの場合はResult C(複数解除)へ。

Result A: 単体インスタンスの解除

インスタンスを選択して⌥+⌘+B(またはCtrl+Alt+B)を押すだけです。「インスタンス解除は3ステップで完了」のセクションを参照してください。

Result B: コンポーネント本体をフレームに戻す

インスタンス作成→切り離し→元コンポーネント削除の3段階手順が必要です。「コンポーネント解除は3段階の迂回手順が必要」のセクションを参照してください。

Result C: 複数インスタンスの一括解除

Enterによる階層移動とショートカットの繰り返しで対応します。「複数インスタンスは5ステップで一括解除」のセクションを参照してください。

CHECK

▶ 今すぐやること: レイヤーパネルで解除したいオブジェクトのアイコンを確認し、Result A〜Cのどれに該当するかを特定する(1分)

Q: レイヤーアイコンの形が小さくて見分けにくい場合は?

A: レイヤーパネルの上部にある検索ボックスでオブジェクト名を検索するか、オブジェクトを選択した状態で右クリックし、「インスタンスの切り離し」が表示されるかどうかで判断してください。表示される場合はインスタンスです。

Q: 「インスタンスの切り離し」を実行したのに変化がない場合は?

A: Auto Layoutが適用されている親フレームの影響で、位置やサイズが見かけ上変わらないケースがあります。レイヤーパネルのアイコンが変わっていれば解除は成功しています。

事務作業に時間を取られている方へ

フリーランスの働き方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

複数インスタンスは5ステップで一括解除

標準機能だけで複数インスタンスをまとめて解除する手順が存在します(blog.pentagon.tokyo: 複数のインスタンスをまとめて解除する方法)。数が多くても、手順を固定することで作業時間を大幅に短縮できます。

Enterで階層移動しながらショートカットを繰り返す手順

複数のインスタンスを含む親フレームを選択します。Enterキーを押すと、親フレームの中の子要素(インスタンス群)の最初の1つが選択状態になります。この状態でショートカット(⌥+⌘+B またはCtrl+Alt+B)を押すと、選択中のインスタンスが解除されます。Tabキーを押すと次のインスタンスに選択が移るため、再びショートカットを押します。「Tab→ショートカット」の繰り返しで、親フレーム内のインスタンスを順番に解除していけます。5つのインスタンスであれば、慣れると1分以内に完了します。

一括選択してからショートカットを押す方法も有効

同一階層に複数のインスタンスが並んでいる場合は、Shift+クリックまたは範囲ドラッグで複数選択してから⌥+⌘+B(またはCtrl+Alt+B)を押すと、選択中の複数インスタンスを一度に解除できます。ただし、深い階層に入れ子になっているインスタンスは、この方法では解除できないケースがあります。入れ子構造の場合は、Enterで階層を1段ずつ降りながら対応する手順が確実です。

Instance Finderプラグインは20個以上の解除で検討する価値がある

標準機能による複数解除は10個程度までは許容範囲ですが、20個以上になると作業効率が低下します。Instance Finderなどのプラグインを活用するとファイル内のインスタンスを一覧表示でき、管理が容易になります。プラグインの導入自体は5分以内に完了するため、大量解除が定期的に発生する業務では導入を検討してください。標準機能だけでも20個以内の解除は問題なく完了できます。

CHECK

▶ 今すぐやること: インスタンスが2つ以上含まれるフレームを選択し、Enter→ショートカット→Tabの手順を1サイクル試してみる(2分)

Q: 複数選択で解除すると、Auto Layoutが崩れることはありますか?

A: Auto Layoutが設定されている親フレーム内で複数解除を行うと、子要素の配置が崩れる場合があります。解除後にAuto Layoutの設定を確認し、必要に応じて再設定してください。解除前に親フレームを複製しておくと安全です。

Q: Instance Finderは無料ですか?

A: Instance FinderはFigmaコミュニティプラグインとして無料で提供されています。Figmaのプラグインメニューから「Instance Finder」で検索してインストールできます。

インスタンス解除は5つの仕組みで効率化

解除の基本操作を習得したら、次は作業全体の効率を上げる実務ノウハウを整理しておきましょう。ここでは実務上の判断基準を含めて解説します。

ハック1: 解除前のレイヤー確認で無駄な操作をゼロにする

【対象】: インスタンス解除の操作ミスが多いFigma初中級者

【手順】: まず解除したいオブジェクトを選択します(5秒)。次にレイヤーパネルのアイコン形状を確認し、インスタンスかコンポーネントかを判別します(10秒)。インスタンスと確認できた場合のみショートカットを実行します(5秒)。

【コツと理由】: 「選択してすぐに解除操作を実行」より「選択対象がインスタンスかどうかを確認してから実行」の方が無駄な操作と混乱を防げます。コンポーネントを選択した状態でショートカットを押しても何も起きないため、「なぜ解除できないのか」と時間を浪費するパターンが多く見られます。レイヤーアイコンの確認に10秒かけることで、その後の試行錯誤を防げます。

【注意点】: 右クリックメニューを開いて「インスタンスの切り離し」が表示されないことで判断するより、レイヤーアイコンの確認の方が確実で速いです。

ハック2: 解除とリセットを使い分けて編集範囲を最小化する

【対象】: コンポーネントの特定プロパティだけ変更したいFigma中級者

【手順】: まず「完全に切り離したいのか、一時的にプロパティを変更したいだけなのか」を判断します(30秒)。一時的な変更の場合は解除せず、インスタンス選択状態でプロパティパネルから個別プロパティを上書き編集します(作業量に応じて変動)。完全切り離しが必要な場合のみ⌥+⌘+Bを実行します(5秒)。

【コツと理由】: 「プロパティを変えたいから解除する」より「インスタンスのまま上書き編集する」アプローチを取る理由があります。解除するとコンポーネントへのリンクが永久に失われ、デザインシステムの変更が反映されなくなります。インスタンスを保ったまま編集すれば、必要に応じてコンポーネントの変更を再度受け取ることができます。解除は「本当にリンクを切断したい」場合の最終手段として位置づけることが、長期的なファイル管理の品質向上につながります。

【注意点】: インスタンスのプロパティ上書き編集では、親コンポーネントで削除されたレイヤーが解除後のフレームに残る場合があります。解除前後でレイヤー構造が変わる可能性を念頭に置いてください。

ハック3: チーム共有ファイルでの解除前確認で他メンバーへの影響をゼロにする

【対象】: 複数人で同じFigmaファイルを編集しているチームのデザイナー

【手順】: 解除作業の前に、対象コンポーネントがファイル内の他の箇所でも使用されていないかを確認します(1分)。使用箇所の確認はコンポーネントを右クリックして「使用箇所を選択」で可能です。他メンバーが使用している箇所がある場合は、Slack等で解除の意図を共有してから実行します(5分)。解除対象が自分の担当範囲のみであることを確認した後に⌥+⌘+Bを実行します(5秒)。

【コツと理由】: インスタンスの切り離し自体は対象のインスタンス1つにしか影響しませんが、「解除したいコンポーネント本体の削除」を伴う場合に他メンバーのインスタンスに影響が出ます。特にデザインシステムファイルと接続したライブラリコンポーネントの場合、解除・削除がチーム全体に波及します。事前確認に5分かけることで、後の修正作業30分以上を防げます。

【注意点】: インスタンスのみの解除(切り離し)は他メンバーの作業に直接影響しません。影響が出るのはコンポーネント本体を削除する場合です。この違いを理解しておくことで、過剰に慎重になる場面を回避できます。

ハック4: 解除後の確認を30秒で習慣化してトラブルを未然に防ぐ

【対象】: 解除操作後に予期しない見た目の変化に困ったことがあるFigmaユーザー

【手順】: 解除を実行した直後に、レイヤーパネルでアイコンがフレームに変わっているかを確認します(5秒)。次にキャンバス上の見た目が解除前と変わっていないかを目視で確認します(10秒)。Auto Layoutが適用されている親フレーム内での解除の場合は、子要素の配置が崩れていないかを確認します(15秒)。

【コツと理由】: 「解除直後に30秒の確認を入れる」ことで問題の早期発見につながります。解除によりAuto Layoutの挙動が変わったり、制約(Constraints)の設定が期待と異なる動作をするケースが実務では一定頻度で発生します。気づかずに作業を続けた後でトラブルを発見すると、修正に10〜30分かかることもあります。

【注意点】: 見た目が変わっていなくても解除が失敗しているとは限りません。レイヤーアイコンの確認が最も信頼できる判断基準です。見た目での判断だけで「解除できていない」と結論づけてショートカットを連打する操作は不要です。

ハック5: ショートカットの組み合わせで複製→解除を15秒で完了する

【対象】: インスタンスをベースに独自改変したパーツを素早く作りたいFigmaユーザー

【手順】: 改変元にしたいインスタンスを選択し、⌘+D(またはCtrl+D)で複製します(3秒)。複製されたインスタンスを選択した状態で⌥+⌘+B(またはCtrl+Alt+B)を押して解除します(3秒)。解除されたフレームを任意の位置に配置して独自編集を開始します(9秒)。

【コツと理由】: 「解除してから複製」より「複製してから解除」の順番の方が元のインスタンスを安全に保持できます。先に解除するとコンポーネントとのリンクが失われ、「やはり元のデザインシステムの変更を反映したい」となった際に対応できません。複製→解除の順番を固定することで、原本を常に残した状態で安全に改変作業を進められます。

【注意点】: 「複製してから解除」の後、不要になった元のインスタンスを削除し忘れるとファイルが散らかります。解除後に「使わない複製を削除する」をセットで習慣化してください。

CHECK

▶ 今すぐやること: ショートカット(複製: ⌘+D → 解除: ⌥+⌘+B)を1セット実際に試し、15秒以内に完了できることを確認する(15秒)

Q: ハック4で確認するAuto Layoutの崩れは、どうやって修正しますか?

A: 解除後にAuto Layoutが崩れた場合は、親フレームを選択してプロパティパネルのAuto Layout設定を確認します。「Hug contents」や「Fixed」の設定が変わっている場合は、解除前の状態に戻してください。⌘+Z(またはCtrl+Z)での取り消しが最も確実です。

Q: Instance Finderプラグインでインスタンスを検索してから解除できますか?

A: Instance Finderはインスタンスの一覧表示と選択を支援するプラグインですが、解除操作は標準のショートカット(⌥+⌘+B)で行う必要があります。プラグインで対象を選択した後に標準ショートカットで解除するという組み合わせが実務上の使い方です。

まとめ: インスタンス解除はショートカットで完了

Figmaのインスタンス解除は、⌥+⌘+B(Mac)またはCtrl+Alt+B(Windows)のショートカット1つで完了します。コンポーネント本体の解除には「インスタンス作成→切り離し→削除」の3段階が必要で、この区別が実務上最も重要なポイントです。解除前にレイヤーアイコンで対象を確認し、複製を取ってから実行する習慣を持つことで、ミスのない作業ルーティンが確立できます。

インスタンスを解除して自由に編集できるようになることは、Figmaで独自のデザインを素早く作り上げるための基本スキルです。今日1つのインスタンスでショートカットを試すだけで、明日からの作業効率は変わります。

デザイン業務でのFigmaと並行してCanva AIも活用している方は、Canva AIデザインをフリーランスが仕事に使う5つの実践法も参考にしてみてください。

状況次の一歩所要時間
ショートカットを初めて試す任意のインスタンスを選択して⌥+⌘+B(またはCtrl+Alt+B)を押す30秒
コンポーネントをフレームに戻したいテスト用コンポーネントで3段階手順(インスタンス作成→切り離し→削除)を試す3分
複数解除を効率化したいインスタンスが複数ある親フレームでEnter→Tab→ショートカットを繰り返す5分
ファイル全体のインスタンスを管理したいInstance Finderプラグインをインストールして使用状況を確認する10分

Figmaインスタンス解除に関するよくある質問

Q: インスタンスを解除すると、他のインスタンスにも影響しますか?

A: 影響しません。インスタンスの切り離しは、操作対象のインスタンス1つだけに適用されます。コンポーネント本体や他のインスタンスはそのままの状態を保ちます。ただし、コンポーネント本体を削除する場合は、そのコンポーネントから派生した全インスタンスに影響が出るため注意してください。

Q: 解除したフレームをもう一度コンポーネントに戻せますか?

A: 解除後のフレームを選択し、右クリックから「コンポーネントを作成」を選ぶことで、新しいコンポーネントとして再登録できます。ただし、解除前にリンクしていたコンポーネントへの接続を復元する機能はないため、元のコンポーネントとは別の新規コンポーネントとして扱われます。

Q: Figmaのバリアント(Variants)を含むインスタンスは解除できますか?

A: 解除できます。バリアントを含むインスタンスも通常のインスタンスと同じ手順で切り離し可能です。解除後はバリアントの切り替え機能が使えなくなり、選択していたバリアントの状態でフレームに変換されます。

【出典・参照元】

Figma Help Center: インスタンスをコンポーネントから分離する – インスタンスの切り離し方法、ショートカット、解除後の挙動に関する公式解説

blog.pentagon.tokyo: 複数のインスタンスをまとめて解除する方法 – Enterによる階層移動とショートカット繰り返しによる複数解除手順

wentz-design.com: Figmaのコンポーネント化を解除・削除する方法 – コンポーネント本体の迂回解除手順と削除の関係解説

事務作業に時間を取られている方へ

フリーランスの働き方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

フリ転編集部 jpndesft
フリーランス専門メディア「フリ転。」編集部。独立・案件獲得・税務など、フリーランスが直面する課題をわかりやすく解説することを使命としています。

フリーランスデザイナーのためのキャリア・案件・税務情報をお届けしています

お問い合わせ →

人気キーワード

フリーランスの案件・単価を調べる

フリーランス求人を探す週1〜2日・リモートOKの案件を毎日自動収集職種別の単価相場を見る48職種の月額単価を実データから集計実務ツールを使う見積・請求書・税金計算など51種を無料で

カテゴリから記事を探す

フリーランスの独立術フリーランスの資金術フリーランス職種図鑑