【Figma】Component(コンポーネント)を解除してフレームに戻す方法をパパッと解説!

Figmaで一度設定したコンポーネントが解除できなくて困ってます!

上記のようなお悩みをパパッと解決します。

  • FigmaのComponent(コンポーネント)が解除できない問題を解決
  • Master ComponentとInstanceの違い

本記事の筆者は現役のデザイナーとして、Figmaを使ったデザイン仕事で月40万円以上稼いでいます。

今回は、FigmaのComponent(コンポーネント)を解除してFrameに戻す方法を解説します。

Master ComponentとInstanceの違いも紹介しているので、ぜひ最後まで読んでみてくださいね!

【結論】FigmaのComponent(コンポーネント)を解除する方法

【Figma】Component(コンポーネント)を解除してフレームに戻す方法 Master ComponentとInstanceの関係

FigmaのComponent(コンポーネント)には、2種類あります。

  1. Master Component(マスターコンポーネント)
  2. Instance(インスタンス)

Figmaでは、親Componentを「Master Component」、子Componentを「Instance」と呼びます。

  • Master Component:スタイルを編集・変更できる
  • Instance:スタイルは変更不可。Master Componentのスタイルに自動同期される

Master ComponentとInstanceのComponentを解除してフレームに戻す方法は、それぞれ以下の通り。

  1. 解除したいComponentをクリックして選択
  2. コピペ(Ctrl+C→Ctrl+V)して、同じ場所に貼り付け
  3. 貼り付けたComponentを右クリック→メニューから[Detach Instance]を選択
  4. 元のMaster Componentを削除

  1. 解除したいComponentをクリックして選択
  2. 右クリック→メニューから[Detach Instance]を選択

Master Componentの解除方法

【Figma】Component(コンポーネント)を解除してフレームに戻す方法 Master Componentの解除方法

Figmaでは、Master Componentの状態では解除できません。

そのため、一度Master ComponentをコピペしてInstanceを生成します。

1.解除したいComponentをクリックして選択

まずは、解除したいComponentをクリックして選択します。

2.コピペ(Ctrl+C→Ctrl+V)して、同じ場所に貼り付け

Componentをコピペ(Ctrl+C→Ctrl+V)して、同じ場所に張り付けます。

これで、Master ComponentからInstanceを生成できました。

3.右クリック→メニューから[Detach Instance]を選択

生成したInstanceを右クリック→メニューから[Detach Instance]でフレームに戻します。

4.元のMaster Componentを削除

最後に、元のMaster Componentを削除すれば完了です。

少し遠回りに感じますが、Master Componentを解除してフレームに戻す最短ルートはこの方法です。

Instance(インスタンス)の解除方法

【Figma】Component(コンポーネント)を解除してフレームに戻す方法 Instanceの解除方法

Instanceをフレームに戻す場合は、右クリック→メニューから[Detach Instance]でOKです。

Instance=子Componentのこと。

1.解除したいComponentをクリックして選択

まずは、解除したいComponentをクリックして選択します。

2.右クリック→メニューから[Detach Instance]を選択

選択された状態で右クリック→メニューから[Detach Instance]でフレームに戻します。

【まとめ】FigmaのComponent(コンポーネント)を解除してフレームに戻す方法

今回は、デザインツールFigmaのComponent(コンポーネント)を解除してフレームに戻す方法を解説しました。

Figmaについてもっと勉強したい方には、オンライン講座のデイトラ Webデザインコースがおすすめです。

⇒デイトラ Webデザインコース

筆者もデイトラ Webデザインコースをきっかけに、フリーランスWebデザイナーになることができました。

もし気になることや不安なことがあれば、Twitterまたはお問い合わせフォームから気軽にお問合せくださいね。

\ 1日1題でプロのWEBスキルを手に入れよう /