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

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

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

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

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

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

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

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

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

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

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

Master Componentの解除方法

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

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

１．解除したいComponentをクリックして選択

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

２．コピペ（Ctrl+C→Ctrl+V）して、同じ場所に貼り付け

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

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

３．右クリック→メニューから［Detach Instance］を選択

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

４．元のMaster Componentを削除

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

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

Instance（インスタンス）の解除方法

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

Instance＝子Componentのこと。

１．解除したいComponentをクリックして選択

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

２．右クリック→メニューから［Detach Instance］を選択

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

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

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

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

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

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

＼　１日１題でプロのWEBスキルを手に入れよう　／