Figma「インスタンス・スワップ」の真髄：レイヤー地獄を脱出し、最強のUI設計を手に入れる
こんにちは。プロダクトデザインの現場で日々「いかに効率化し、いかに美しくスケールさせるか」を追求しているエンジニア兼デザイナーです。
Figmaを使っていて、こんな経験はありませんか？
「カードコンポーネントの中にアイコンを配置したけど、別のアイコンに変えるたびにレイヤーパネルを深く潜って差し替えるのが面倒…」
「バリエーションが増えるたびに、コンポーネントがどんどん肥大化して収拾がつかなくなる…」
もしそうなら、「インスタンス・スワップ（Instance Swap）プロパティ」こそが、あなたの救世主になります。これをマスターすれば、UI設計の柔軟性は劇的に向上し、メンテナンスコストはゼロに近づきます。
今日は、この強力な機能を「現場で使えるレベル」に引き上げるための極意を、ステップ・バイ・ステップで紐解いていきましょう。
—
1. なぜ「インスタンス・スワップ」が必要なのか？
従来のFigma管理では、コンポーネントのバリエーションを増やすために「バリアント（Variants）」を大量に作っていました。しかし、アイコンを切り替えるためだけにバリアントを増やし続けると、コンポーネントセットは怪物化します。
インスタンス・スワップの役割は、「コンポーネントの構造（枠組み）」と「コンテンツ（中身）」を完全に分離することです。
これにより、私たちは「カードという枠」を1つ作るだけで、その中身（アイコンやイラスト）を外部から自由自在に差し替えられるようになります。
—
2. まずはここから！「HelloWorld」的な基本セットアップ
まずは、最もシンプルな「アイコン付きボタン」で、インスタンス・スワップの仕組みを体感しましょう。
手順①：ベースとなるコンポーネントを作る
1. `Icon/Search`、`Icon/User` という名前のアイコンコンポーネントを2つ用意します。
2. これらを束ねて「コンポーネントセット」にする必要はありません。別々のコンポーネントとして存在させてください。
手順②：親コンポーネントにプロパティを紐付ける
1. ボタンコンポーネントを作成し、中にアイコンを配置します。
2. そのアイコンインスタンスを選択した状態で、右サイドバーの「Instance」セクションの横にある「Swap Instance（交換アイコン）」をクリックしてください。
3. プロパティ名（例：`Icon Name`）を入力し、デフォルト値を設定します。
これだけで、親コンポーネントのプロパティパネルに「アイコンを選択するプルダウン」が出現します。 レイヤーを掘る必要はもうありません。
—
3. 上級テクニック：ライブラリを支配する「優先リスト」
ここからが本題です。大規模なデザインシステムでは、アイコンが100個単位で存在することもあります。プルダウンから100個のリストを探すのは苦痛ですよね。
そこで使うのが「Preferred Values（優先値）」の設定です。
- 設定の極意:
1. インスタンス・スワッププロパティの設定画面を開きます。
2. 「Preferred Values」という項目に、よく使うアイコン（例：`Icon/Search`, `Icon/Close`など）を追加します。
3. こうすることで、デザインパネルのプルダウンの最上部に、頻出アイコンが固定表示されます。
設計のポイント: デザイナーが「何をよく使うか」を予測してコンポーネントを設計する。これが、優れたデザインシステムの条件です。
—
4. レイヤーの肥大化を防ぐ「階層管理ルール」
インスタンス・スワップを極めると、レイヤーパネルが恐ろしく綺麗になります。ここで、現場で守るべき「命名規則」を共有します。
- ディレクトリ構造を意識する:
アイコンの命名を `Icon/Status/Success`、`Icon/Status/Error` のようにスラッシュ（`/`）で区切ります。Figmaはこれを自動的にグループとして認識するため、インスタンス・スワップの選択画面でも階層化され、視認性が爆上がりします。
- コンポーネントの「カプセル化」:
複雑なカードコンポーネントを作る際は、直接アイコンを置くのではなく、必ず「スロット（Slot）」となる空のコンポーネント、あるいはラッパーを介してください。
// 良い設計の例
Card Component
└ Slot (Icon Wrapper) <-- ここにインスタンス・スワップを適用
└ Current Instance (Icon/Search)
こうすることで、将来的に「アイコンのサイズを一括で変更したい」という要望が出ても、`Slot`側を調整するだけで全カードに修正が反映されます。
---
最後に：道具に使われるな、道具を使いこなせ
インスタンス・スワップは、単なる「置き換えツール」ではありません。「UIの抽象化」を行うための強力な設計思想です。
これをマスターすれば、あなたは「アイコンを置く作業」から解放され、「どのアイコンを配置すればユーザー体験が向上するか」という、本質的な意思決定に時間を割けるようになります。
まずは、今日作っているボタンコンポーネントのアイコンを、インスタンス・スワップに置き換えるところから始めてみてください。その瞬間に、あなたの作業効率は一段階上のステージへ引き上げられます。
何か詰まったことがあれば、いつでも聞いてください。プロダクトを最高のものにするために、共に突き詰めましょう！