結論から書くと、Figmaのデタッチは、インスタンスとメインコンポーネントのつながりを切って、普通のフレームにする操作です。
右クリックの「インスタンスの切り離し」かCtrl+Alt+Bで実行でき、切り離した後は親を直しても変わりません。
直後ならCtrl+Zで元のインスタンスに戻せますが、切り離したフレームを選んでも「インスタンスに戻す」項目はありませんでした。
中の文字や部品を足したいだけなら、デタッチせずにスロットを使うと、親の変更を受け取ったまま中身を変えられます。
- 撮影：2026年11月1日、Figmaデスクトップアプリ126.10.13（日本語表示）、Windows 11 Pro、無料のスタータープランのドラフト
- 実機で試したこと：右クリック・インスタンスのメニュー・Ctrl+Alt+Bでのデタッチ、Ctrl+Zでの取り消し、親を直したときの反映、入れ子のインスタンスと上書きの残り方、バージョン履歴の表示
- あわせて試したこと：スロットへの変換、スロットの設定の窓、インスタンスでスロットに中身を足す、スロットのリセット
- 練習の素材：24×24の四角のアイコン、アイコン・見出し・本文を縦に並べたカード（すべて自作）
- 有料プランで確かめたこと（2026年11月2日）：教育プランのアカウントで、ライブラリから置いたインスタンスのデタッチ、「変更をメインコンポーネントにプッシュ」、名前付きの版の保存と復元
- 確かめていないこと：30日より前の版が実際に残るか（新しいファイルで試したため）、ブラウザー版とmacOSのFigma
最短の手順と早見表
デタッチの手順は次の3つです。
- カンバスかレイヤーの一覧で、インスタンスを選ぶ
- 右クリックして「インスタンスの切り離し」を押す（ショートカットはCtrl+Alt+B）
- 間違えたときは、ほかの操作をする前にCtrl+Zで取り消す
デタッチしたくなったときは、先に次の表で別の手が使えないかを見てください。
| やりたいこと | まず試す | だめなときの次の一手 |
|---|---|---|
| 文字だけ変えたい | インスタンスで文字を直接打ち直す（上書き） | 親にテキストプロパティを作る |
| アイコンを出す・消す | ブール値のプロパティ | 表示の切り替えで足りなければバリアント |
| アイコンを別の部品に替える | インスタンスの入れ替え | 候補を絞るなら優先されるインスタンス |
| 通常・無効など状態を切り替える | バリアント | 色だけの違いならバリアブル |
| 中に行や部品を好きな数だけ足したい | スロット | どうしても形を変えるならデタッチ |
| この1枚だけ形を大きく変えたい | デタッチ | 何度も使う形なら、新しいコンポーネントにする |
テキスト・ブール値・入れ替え・バリアントの作り方は、Figmaのコンポーネントプロパティとはにまとめています。
Figmaのデタッチとは
デタッチは英語の「切り離す」で、日本語の画面では「インスタンスの切り離し」と表示されます。
公式ヘルプでは、デタッチするとインスタンスが通常のフレームになり、元のコンポーネントへのリンクが消え、コンポーネントの変更が届かなくなると説明されています。
同じヘルプには、すべてのプランで使え、ファイルの編集権限があればデタッチできると書かれています。
実際に、無料のスタータープランのドラフトでも、3つの方法すべてでデタッチできました。
| 見るところ | インスタンスのまま | デタッチした後 |
|---|---|---|
| レイヤーの印 | 中が空いたひし形 | フレームの印（オートレイアウトの印） |
| 右パネルの見出し | コンポーネント名と「このファイルから」 | 「フレーム」 |
| 親の変更 | 届く | 届かない |
| 見た目・名前・オートレイアウト | 親のまま | 切り離した時点のまま残る |
デタッチする3つの方法
右クリックのメニュー
カンバスのインスタンスを右クリックすると、「インスタンスをリセット」の下に「インスタンスの切り離し」が並びました。
すぐ下の「メインコンポーネントに移動」（Ctrl+Alt+Shift+K）は、親の場所へ移るだけで、切り離しではありません。
右パネルのインスタンスのメニュー
インスタンスを選び、右パネルの一番上にある「…」を押します。
一覧には「コンポーネントを作成」「インスタンスの切り離し」「インスタンスをリセット」「名前のリセット」が出ました。
インスタンスで何かを変えた後は、この一覧に「変更をメインコンポーネントにプッシュ」と「特定の変更をリセット」も足されていました。
ショートカット
Windowsのショートカットは、メニューの表示どおりCtrl+Alt+Bです。
公式ヘルプによると、Macでは⌥ Option＋⌘ Command＋Bです（Macでは試していません）。
デタッチすると何が変わるか
練習用に、アイコン（コンポーネント）・見出し「お知らせ」・本文を縦に並べたカードをコンポーネントにし、インスタンスを3枚置きました。
そのうちの「カードA」をデタッチして、残りと比べています。
レイヤーはフレームになる
デタッチした直後、レイヤーの印はひし形からオートレイアウトのフレームの印に変わり、右パネルの見出しも「フレーム」になりました。
名前「カードA」、大きさ200×102、間隔やパディング、角の半径は、切り離す前のまま残りました。
親を直しても反映されない
メインコンポーネントの塗りを青から緑に変えると、インスタンスのままのカードは緑になり、デタッチしたカードAだけ青のまま残りました。
親のデザインを後から直す予定があるものは、デタッチすると直し漏れの元になります。
中に入れたインスタンスはインスタンスのまま
カードAの中のアイコンは、デタッチした後もレイヤーの一覧でインスタンスの印のままでした。
そこでアイコンのメインコンポーネントの色をオレンジから水色に変えると、デタッチしたカードAの中のアイコンも水色になりました。
切れるのは選んだ1段目のつながりだけで、中の部品は親の変更を受け取り続けます。
上書きは見た目のまま残る
別のインスタンスで見出しを「セール」に書き換えてからデタッチすると、文字は「セール」のまま、色も切り離した時点の緑のまま残りました。
公式ヘルプの「今のレイヤーとプロパティを保ったままフレームにする」という説明どおりで、上書きした値は消えずに、そのまま普通の値になります。
上書きそのものの扱いは、Figmaのオーバーライドとはで詳しく書いています。
デタッチは元に戻せるか
| 方法 | 結果 | 使える場面 |
|---|---|---|
| Ctrl+Zで取り消す | インスタンスに戻った | デタッチの直後 |
| 切り離したフレームのメニュー | 戻す項目は無かった | 使えない |
| バージョン履歴 | ファイル全体を前の版に戻す仕組み | 無料プランは30日以内の版だけ |
| インスタンスを置き直す | 新しいインスタンスになる | 時間がたった後 |
直後ならCtrl+Zで戻る
デタッチの直後にCtrl+Zを押すと、カードAは右パネルに「カード」と「このファイルから」が出るインスタンスに戻りました。
取り消しは操作の順に戻るので、デタッチの後に別の操作を重ねた場合は、その分も一緒に戻ります。
切り離したフレームに「戻す」項目は無い
デタッチしたフレームを右クリックすると、「インスタンスをリセット」「インスタンスの切り離し」「メインコンポーネントに移動」が消え、残るのは「コンポーネントを作成」でした。
一度フレームになったものを、同じメインコンポーネントのインスタンスへつなぎ直す項目は見当たりませんでした。
バージョン履歴は無料プランで30日以内
ファイル名の右の「∨」→「バージョン履歴の表示」で、右側に履歴の一覧が開きました。
無料のドラフトでは、一覧の下に「これ以前の履歴は利用できません」と、プロフェッショナルプランにアップグレードすると30日以上前のバージョンを表示できる、という案内が出ていました。
履歴はファイル全体を前の状態に戻す仕組みなので、デタッチの後に入れたほかの変更も戻る点に注意してください。
無料のドラフトでは一覧を見ただけで、前の版への復元は下の「有料プランで確かめたこと」の節で試しています。
時間がたったら、インスタンスを置き直す
戻す項目が無い以上、現実的なのは、左の「アセット」から同じコンポーネントのインスタンスを置き、デタッチ版と同じ位置に合わせて、文字などの上書きを入れ直す方法です。
入れ直したら、デタッチしたフレームは消します。
部品を置いて上書きする基本は、Figmaのアセット・コンポーネントの使い方にあります。
有料プランで確かめたこと：ライブラリ・プッシュ・バージョン履歴
2026年11月2日に、有料の教育プランのアカウントで、無料では試せなかった3つを確かめました。
練習用に、文字をテキストプロパティにしたボタンを1つ作り、ライブラリとして公開して別のファイルで使っています。
ライブラリとして公開する手順と、更新を受け取る流れは、Figmaのコンポーネントプロパティとはの有料プランの節に画面つきで書いています。
ライブラリから置いたインスタンスをデタッチする
別のファイルにライブラリから置いたボタンで、文字を「送信する」に変えてから右パネルの「…」を開きました。
並んだのは「コンポーネントを作成」「インスタンスの切り離し」「インスタンスをリセット」「「ラベル」をリセット」の4つです。
同じファイルの中のインスタンスで出ていた「変更をメインコンポーネントにプッシュ」は、ここにはありません。
「インスタンスの切り離し」を押すと、右パネルの見出しは「フレーム」になり、名前の下のライブラリのファイル名も消えました。
文字「送信する」と、その時点の緑の塗りは残っています。
続けてライブラリ側で塗りをオレンジにして公開し、使う側で「すべて更新」を押しました。
インスタンスのままのボタンはオレンジになり、デタッチしたボタンは緑のままです。
ライブラリの部品でも、切り離した後は更新を受け取っても元に戻りません。
チームで直す予定のある部品は、デタッチする前に、ライブラリ側にプロパティやスロットを足せないかを確かめてください。
「変更をメインコンポーネントにプッシュ」の動き
プッシュが出たのは、メインコンポーネントと同じファイルに置いたインスタンスでした。
ライブラリのファイルの中でインスタンスの塗りを紫に変えると、「…」の一覧に「変更をメインコンポーネントにプッシュ」と「塗りのリセット」が足されています。
押すと「変更がメインコンポーネントにプッシュされました」と出て、メインコンポーネントも紫になりました。
インスタンスで直した見た目を、親の側に書き戻す操作です。
親を書き換えるので、ライブラリの利用者に届けるには、その後に公開が要ります（今回はプッシュした変更を公開していません）。
有料プランのバージョン履歴
有料プランのファイルでも、ファイル名の右の「∨」→「バージョン履歴の表示」で一覧が開きます。
無料のドラフトで一覧の下に出ていた「これ以前の履歴は利用できません」とアップグレードの案内は、ここには出ませんでした。
ライブラリを公開するたびに、「コンポーネント公開」という版が自動で足されています。
名前を付けて残す手順と、前の版に戻す手順は次のとおりです。
- バージョン履歴の右上の「＋」を押し、「バージョン履歴に追加」の窓でタイトル（例：紫に変更した版）を入れて保存する
- 戻したい版を右クリックし、「このバージョンを復元」を押す
右クリックの一覧には、ほかに「バージョン情報を編集」「複製」「バージョン情報を削除」「リンクをコピー」も並びます。
前の「コンポーネント公開」の版を復元すると、ファイルはその時点のオレンジのボタン1つに戻り、後から置いた紫のインスタンスは消えました。
履歴には「復元されたバージョン: コンポーネント公開」が新しく足され、復元の前に保存した「紫に変更した版」も一覧に残っています。
ドラフトのファイルの履歴には、編集中に Ctrl+Alt+S でも版を追加できるという案内が出ていました。
復元はファイル全体が戻るので、デタッチだけを戻したいときは、直前の版に名前を付けておくと戻る先を選びやすくなります。
デタッチしないで済ませる：スロット
スロットは、メインコンポーネントの中に「インスタンスで中身を自由に足してよい場所」を作るコンポーネントプロパティです。
公式ヘルプ（英語）は、インスタンスをデタッチせずにコンテンツを足したり並べ替えたりできる仕組みとして紹介しており、すべてのプランで、ファイルの編集権限があれば使えるとしています。
スロットを作る手順
- メインコンポーネントの中にある、スロットにしたいフレーム（今回は「本文」）を選ぶ
- 右クリックして「スロットに変換」を押す（ショートカットはCtrl+Shift+S）
- メインコンポーネントを選ぶと、「プロパティ」に「本文・1個のアイテム」と出る
- 行にマウスを重ねて編集のアイコンを押すと、「スロットプロパティの編集」の窓が開く
変換すると、レイヤーの印が桃色のスロットの印に変わり、大きさの表示も桃色になりました。
「スロットプロパティの編集」の窓には、名前・説明のほか、最小レイヤー数、最大レイヤー数、優先インスタンスのみ許可、デフォルトでは空のスロットを表示、優先されるインスタンスの項目が並んでいました。
インスタンスで中身を足す
インスタンス「カードB」のレイヤーの一覧でスロット「本文」を開き、中の文字を選んでCtrl+Dを2回押すと、文字が3つになりました。
最初は3つの文字が同じ位置に重なったので、メインコンポーネント側のスロットを選んでShift+Aでオートレイアウトを付け、縦並び・左上揃え・間隔4にしました。
公式ヘルプのとおり、スロットの並び方や位置はインスタンスでは変えられず、メインコンポーネントで決めます。
メイン側を直すと、カードBの3行はそのまま縦に並び、カードの高さは102から140に伸びました。
デタッチ版と並べて、親を直したときを比べる
最後に、メインコンポーネントの塗りを緑から紫に変えました。
| カード | 中身 | 親を紫にした後 |
|---|---|---|
| カードB（スロットに3行足したインスタンス） | 本文3行 | 紫になり、3行も残った |
| カードC（見出しを書き換えてデタッチ） | 見出し「セール」 | 緑のまま |
| カードA（そのままデタッチ） | 元の1行 | 最初の青のまま |
スロットに足した中身は、右パネルで「本文」の横に「変更済み」と出ていました。
インスタンスの「…」→「特定の変更をリセット」→「「本文」をリセット」を押すと、足した2行が消えて元の1行に戻り、表示は「デフォルト」に変わりました。
スロット・入れ替え・バリアントの違い
公式ヘルプの整理を短くまとめると、次のとおりです。
- インスタンスの入れ替え：決まった場所の部品を1つだけ差し替える。位置や大きさは変えさせない
- バリアント：通常・ホバー・無効のような状態や種類を切り替える
- スロット：決めた場所に、中身を好きな数だけ足したり並べ替えたりできる
今までバリアントを大量に作って中身の違いを表していた所は、スロットに置き換えるとセットが小さくなります。
バリアント自体の作り方はFigmaのバリアントの使い方を見てください。
スロットが表示されない・使えないとき
「スロットに変換」がメニューに出ない
インスタンスや、どのコンポーネントにも入っていないフレームを選んでいる可能性があります。
スロットにできるのは、メインコンポーネントの中にあるフレームです。
公式ヘルプによると、コンポーネントのいちばん外側のレイヤーはスロットにできません。
文字やグループなどフレームでないものは、公式ヘルプでは右クリックから新しいスロットで包む操作が案内されています（日本語の表示名は確かめていません）。
「プロパティ」の＋にスロットが無い
今回の126.10.13では、メインコンポーネントの「プロパティ」の＋に、バリアント・テキスト・ブール値・インスタンスの入れ替え・スロットの5つが並び、ベータの表示はありませんでした。
出ないときは、選んでいるのがメインコンポーネントかどうかと、デスクトップアプリが最新かどうかを確かめてください（古い版での表示は試していません）。
インスタンスで並べ替えや位置が変えられない
スロットの位置・並び方・制約は、インスタンスでは変えられない仕様です。
今回のように中身が重なるときは、メインコンポーネント側のスロットにオートレイアウトを付けてください。
スロットの中の文字にプロパティを付けられない
公式ヘルプによると、スロットの中のレイヤーにはコンポーネントプロパティを付けられません。
プロパティを付けた別のコンポーネントのインスタンスをスロットに入れれば、そのプロパティは使えます。
デタッチでうまくいかないとき
メニューに「インスタンスの切り離し」が無い
選んでいるのがメインコンポーネント（塗りつぶしたひし形の印）か、すでにデタッチしたフレームの可能性があります。
レイヤーの一覧で、中が空いたひし形の印のレイヤーを選び直してください。
デタッチしたのに一部だけ親の変更が届く
中に入れたインスタンス（今回はアイコン）は、外側をデタッチしてもインスタンスのままです。
中まで切り離したいなら、中のインスタンスを選んで、もう一度Ctrl+Alt+Bを押します。
親を直したのに変わらないインスタンスがある
そのインスタンスがデタッチされているか、その項目を上書きしているかのどちらかです。
右パネルの見出しが「フレーム」ならデタッチ済み、コンポーネント名なら上書きなので、上書きは「…」の「インスタンスをリセット」で親の値に戻せます。
ライブラリの更新が届かないときの調べ方は、Figmaのライブラリ更新が反映されない原因と対処法にあります。
まとめ
- デタッチは、インスタンスとメインコンポーネントのつながりを切り、普通のフレームにする操作
- 右クリックの「インスタンスの切り離し」、右パネルの「…」、Ctrl+Alt+Bの3通りでできる
- 切り離した後は親を直しても変わらないが、中に入れたインスタンスは親の変更を受け取り続ける
- 直後ならCtrl+Zで戻せるが、時間がたつとインスタンスを置き直すしかない
- 中身を足したいだけなら、メインコンポーネントの中のフレームをスロットにすると、デタッチせずに済む
- ライブラリから置いたインスタンスにプッシュは出ず、デタッチすると更新を受け取っても戻らない（有料の教育プランで確認）
- 有料プランでは、名前を付けた版を保存し、ファイル全体を前の版に復元できる
次の一歩は、手元のファイルでデタッチしたフレームを探し、文字だけの違いはプロパティに、中身の違いはスロットに置き換えられないか見直すことです。
参考：インスタンスをコンポーネントから分離する、スロットの作成と使い方（英語）、スロット・インスタンスの入れ替え・バリアントの違い（英語）（いずれもFigma公式ヘルプ、2026年11月1日に確認。有料プランでの実機確認は11月2日）。