Figmaで一度設定したコンポーネントが解除できなくて困ってます！
上記のようなお悩みをパパッと解決します。
- FigmaのComponent（コンポーネント）が解除できない問題を解決
- Master ComponentとInstanceの違い
本記事の筆者は現役のデザイナーとして、Figmaを使ったデザイン仕事で月40万円以上稼いでいます。
今回は、FigmaのComponent（コンポーネント）を解除してFrameに戻す方法を解説します。
Master ComponentとInstanceの違いも紹介しているので、ぜひ最後まで読んでみてくださいね！
【結論】FigmaのComponent（コンポーネント）を解除する方法
FigmaのComponent（コンポーネント）には、2種類あります。
- Master Component（マスターコンポーネント）
- Instance（インスタンス）
Figmaでは、親Componentを「Master Component」、子Componentを「Instance」と呼びます。
- Master Component：スタイルを編集・変更できる
- Instance：スタイルは変更不可。Master Componentのスタイルに自動同期される
Master ComponentとInstanceのComponentを解除してフレームに戻す方法は、それぞれ以下の通り。
- 解除したいComponentをクリックして選択
- コピペ（Ctrl+C→Ctrl+V）して、同じ場所に貼り付け
- 貼り付けたComponentを右クリック→メニューから［Detach Instance］を選択
- 元のMaster Componentを削除
- 解除したいComponentをクリックして選択
- 右クリック→メニューから［Detach Instance］を選択
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デザインコースをきっかけに、フリーランスWebデザイナーになることができました。
もし気になることや不安なことがあれば、Twitterまたはお問い合わせフォームから気軽にお問合せくださいね。
＼ １日１題でプロのWEBスキルを手に入れよう ／