【Figma】インスタンスとは｜編集可能な範囲や活用法を解説

Figmaにおける「インスタンス」は、コンポーネントを複製したものでありながら、
一部をカスタマイズできる便利な存在です。
本記事では、インスタンスの正しい理解と使いこなし方を、図解と動画ともに解説します。

インスタンスの基礎理解

コンポーネントとは

Figmaにおけるコンポーネントは、再利用可能なパーツを定義するテンプレートのようなものです。
たとえば、ボタンやカードといったUI部品を一度作っておけば、あらゆるページで同じ見た目とルールを保って利用できます。

インスタンスとは

インスタンスは、そのコンポーネントから生成された複製です。
複製とはいえ、ただのコピーではなく、親であるコンポーネントの仕様を維持しながら一部だけカスタマイズが可能という特徴があります。

• コンポーネントのコピーであり、親のルールを保持
• 色やテキスト、画像などは個別編集可能

インスタンスの編集可能な範囲

編集可能項目	具体例
テキスト	ボタンのラベルや説明文など
塗りの色	背景色や文字色
境界線	枠線の太さや色
ドロップシャドウ	カードの影効果
画像やアイコン	差し替えによるカスタマイズ

親コンポーネントと同期する内容

インスタンスは自由に編集できる一方で、「親と常に同期する項目」も存在します。

同期される項目の例

• レイアウト構造（Auto layoutなど）
• スペーシング（パディング、マージン）
• レイヤー構造・整列設定
• 非表示レイヤーの表示切り替え

インスタンスの活用例

以下は、インスタンスの便利な活用方法の一例です。

1. ボタンの共通化

• ラベルや色違いを簡単に管理可能
• サイズのバリエーションも量産しやすい

2. カード型コンテンツの複数展開

• レイアウトや装飾は統一しつつ、内容だけを差し替える使い方

3. フォームUIの標準化

• テキストフィールド、チェックボックス、ボタン類をコンポーネント化し、ページごとにインスタンスで配置

インスタンスの限界と対処法

インスタンスには制限もあります。
「特定のレイヤー構造を変更したい」「要素の追加・削除をしたい」など、構造自体の変更はできません。

対処法①：コンポーネントの解除

• 一度コンポーネントとの関連を解除し、完全に自由なオブジェクトとして編集可能
• ただし、今後は親コンポーネントの変更は反映されなくなります

コンポーネントの解除についての記事はこちら

【Figma】1秒でコンポーネント解除！ 編集できないときの最速対処法

対処法②：バリアントを使う

• コンポーネントの**別バージョン（状態）**を作りたいときに有効
• hover / disabled / icon付き などの状態差を管理

まとめ

インスタンスは、Figmaにおけるコンポーネント運用を効率化するための非常に強力な仕組みです。
特に、大規模なUI設計やチーム開発では、「再利用性」と「保守性」を両立する鍵になります。

インスタンス活用のポイント

• 編集可能な範囲と不可範囲を把握する
• 必要に応じて「バリアント」や「解除」を活用する
• 親コンポーネントの設計が整っているほど、インスタンスは生きる

「親を変えれば子も変わる」この仕組みを理解すれば、
FigmaでのUI設計はもっとスピーディーかつスマートになります。