Figma（フィグマ）は、UIデザインやWebデザインの現場で広く使われているデザインツールです。特にコンポーネント（Component）機能は、UIパーツを効率よく管理できる重要な機能として多くのデザイナーに利用されています。
しかし実際のデザイン作業では、
- コンポーネントを解除したい
- インスタンスを自由に編集したい
- Detach instanceがどこにあるかわからない
- コンポーネント解除できない
といった悩みを持つ人も多いです。
この記事では、figma コンポーネント 解除の方法を初心者向けにわかりやすく解説します。
- コンポーネントとインスタンスの違い
- Detach instanceの使い方
- 解除できない原因と対処法
- 解除せずに編集する方法
- デザインシステムでの注意点
などを実務のUIデザイン現場の視点から詳しく解説するので、Figma初心者の方でも安心して理解できます。
figma コンポーネント 解除とは？初心者向けに基本を解説
まずは、Figmaの「コンポーネント解除」の意味を理解しましょう。
FigmaではUIパーツを再利用するためにコンポーネント機能が使われます。コンポーネントの仕組みを理解しておくと、UIデザインの効率が大きく上がります。
Figmaの「コンポーネント」と「インスタンス」の違い
Figmaでは同じUIパーツを何度も使う場合にコンポーネント（Component）を作成します。
例えば次のようなUIがコンポーネント化されることが多いです。
- ボタン
- カードUI
- ナビゲーション
- 入力フォーム
- モーダル
コンポーネントには次の2種類があります。
- メインコンポーネント（Main Component）
- インスタンス（Instance）
メインコンポーネントは「元のデザイン」です。
インスタンスは、そのコンポーネントを画面に配置したコピーです。
メインコンポーネントを変更するとすべてのインスタンスに反映されるため、大量のUIを効率よく管理できます。
これはデザインシステムやUI設計において非常に重要な仕組みです。
コンポーネント解除（Detach instance）とは何か
コンポーネント解除とは、
インスタンスとメインコンポーネントのリンクを切る操作です。
Figmaではこの操作を
Detach instance
と呼びます。
解除すると、そのインスタンスは普通のレイヤーとして扱われます。
つまり
- メインコンポーネントの影響を受けない
- 自由に編集できる
- 独立したデザインパーツになる
という状態になります。
コンポーネントを解除すると何が起きるのか
Detach instanceを実行すると、次のような変化が起こります。
- メインコンポーネントとのリンクが切れる
- デザインシステムの更新が反映されない
- レイヤー構造が通常のフレームになる
- 完全に自由に編集できる
例えばボタンコンポーネントを解除すると、
- 色変更
- サイズ変更
- レイアウト変更
などを自由に編集できます。
Figmaでコンポーネントが重要な理由
FigmaのUI設計ではコンポーネントは非常に重要です。
例えば100画面のアプリがあった場合、ボタンをすべて手作業で修正するのは大変です。
しかしコンポーネントを使えば、
1箇所変更するだけで全画面更新
できます。
この仕組みは
- デザインシステム
- UI設計
- チームデザイン
で必須の概念です。
figma コンポーネント を 解除する方法【Detach instance手順】
ここではFigmaでコンポーネントを解除する方法を紹介します。
初心者でもすぐにできる操作です。
方法① 右クリックでDetach instance
最も簡単な方法です。
- 解除したいインスタンスを選択
- 右クリック
- Detach instanceをクリック
これでコンポーネントが解除されます。
方法② 上部ツールバーから解除
インスタンスを選択すると、上部ツールバーにコンポーネント操作が表示されます。
そこにある
Detach instance
をクリックすれば解除できます。
方法③ ショートカットキーで解除
作業効率を上げたい場合はショートカットがおすすめです。
- Mac：Cmd + Option + B
- Windows：Ctrl + Alt + B
Figmaを日常的に使うデザイナーは、このショートカットを覚えておくと作業速度が大きく上がります。
figma コンポーネント 解除できない原因と対処法
Detach instanceが表示されない場合があります。
よくある原因を解説します。
インスタンスではない
選択しているオブジェクトがインスタンスではない場合、Detach instanceは表示されません。
例えば
- 通常フレーム
- グループ
- ベクター
の場合です。
この場合コンポーネント解除は必要ありません。
コンポーネントの一部だけ選択している
子レイヤーだけ選択していると解除できません。
必ず
インスタンスの親レイヤー
を選択しましょう。
編集権限がない
Figmaファイルの権限が
- View
- Comment
の場合、編集操作はできません。
編集権限（Edit）をもらう必要があります。
figma コンポーネント を解除せずに編集する方法
実は、コンポーネントは解除しなくても編集できる場合があります。
これをOverridesと呼びます。
テキスト変更
多くのコンポーネントではテキスト変更が可能です。
画像変更
カードUIなどでは画像を差し替えできます。
Variantsで状態変更
Variantsを使えば
- 通常
- ホバー
- 無効
などのUI状態を切り替えできます。
デザインシステムではVariantsがよく使われます。
figma コンポーネント解除の注意点
デザインシステム更新が反映されない
Detach instanceすると、コンポーネントの更新が反映されません。
そのためUIがバラバラになる可能性があります。
チーム制作では多用しない
UI設計では
コンポーネントを維持することが重要
です。
解除は最小限にしましょう。
まとめ
この記事ではfigma コンポーネント 解除について解説しました。
ポイントをまとめます。
- Detach instanceでコンポーネント解除できる
- ショートカットは Cmd + Option + B
- 解除するとメインコンポーネントとリンクが切れる
- できるだけ解除せずOverridesを使う
コンポーネントを理解すると、FigmaのUIデザイン効率は大きく向上します。
コメント