【実務・中級編】Figmaの「Instance Swap Property」を極める！ネストされたコンポーネントを自由自在に操る上級テクニック – UI/UX・デザインツール活用バイブル

Figmaの「Instance Swap Property」を極める！ネストされたコンポーネントを自由自在に操り、開発スピードを劇的に高める上級テクニック

どうも、テックリードの皆さん。日々の開発、お疲れ様です。デザインと開発の橋渡し、そしてチーム全体の生産性向上に日々奔走されていることでしょう。今日は、皆さんが日頃から愛用しているであろうFigmaの、まさに「知る人ぞ知る」強力な機能、「Instance Swap Property」に焦点を当て、その真髄を徹底的に解き明かしていきます。

「Instance Swap Property」と聞くと、単にコンポーネントのバリエーションを切り替えるだけの機能だと思っていませんか？ もちろん、それも正しいのですが、そのポテンシャルはそんなものではありません。これを使いこなすことで、ネストされたコンポーネントの管理を劇的に効率化し、デザインの柔軟性を損なうことなく、レイヤーの肥大化を防ぐことができます。まさに、開発スピードを爆速に加速させるための隠し玉と言えるでしょう。

この記事では、単なる機能紹介に留まらず、実務で「震えるほど役立つ」実践的なテクニックを、開発者目線で、そしてデザイナーとの連携をスムーズにするための視点から、徹底的に解説していきます。

1. なぜ「Instance Swap Property」なのか？ – その本質を理解する

まず、なぜ私たちが「Instance Swap Property」に注目すべきなのか、その背景を理解しましょう。

1.1. コンポーネント化のジレンマ：柔軟性と管理コストのトレードオフ

FigmaでUIを構築する上で、コンポーネント化は避けて通れません。共通パーツをコンポーネント化することで、一貫性を保ち、修正の手間を省くことができます。しかし、コンポーネントが複雑化するにつれて、以下のような課題に直面します。

  • コンポーネントのネストが深くなる: ボタンの中にアイコン、カードの中にテキストフィールド、といった具合に、コンポーネントが入れ子構造になります。
  • バリエーション管理の煩雑化: アイコンの種類、ボタンのサイズ、カードのスタイルなど、考えられるバリエーションが増えるほど、個別のコンポーネントを作成・管理するのが大変になります。
  • レイヤー名のカオス: ネストが深くなると、レイヤーパネルが意味不明な名前で埋め尽くされ、目的の要素を見つけるのが困難になります。
  • パフォーマンスの低下: 複雑なコンポーネントや多数のインスタンスは、Figmaのパフォーマンスに影響を与える可能性があります。

1.2. Instance Swap Propertyが解決する課題

ここで登場するのが「Instance Swap Property」です。これは、親コンポーネントのプロパティとして、子コンポーネントのインスタンスを差し替える機能です。これにより、以下のメリットが得られます。

  • 「一つのコンポーネントで、無数のバリエーションを表現」: 例えば、アイコンコンポーネントを一つ作り、それを差し替えることで、様々なアイコンを持つボタンやリストアイテムを表現できます。
  • 「レイヤー構造のシンプル化」: 複雑なバリエーションごとにコンポーネントを作成する必要がなくなり、親コンポーネントとその中に配置される「差し替え可能なスロット」だけで構成できます。
  • 「管理コストの劇的な削減」: バリエーションの追加・削除・修正が、親コンポーネントのプロパティ設定だけで完結します。
  • 「デザインの一貫性の担保」: 差し替えられるコンポーネント（例: アイコン）は、あらかじめデザインシステムで定義されたものに限定することで、意図しないデザインの崩れを防ぎます。

2. Instance Swap Propertyの基本 – 理論と実践

まずは、この機能の基本的な仕組みを理解しましょう。

2.1. 基本概念：コンポーネントの「スロット」を作る

「Instance Swap Property」は、コンポーネント内の特定のレイヤー（通常はコンポーネントのインスタンス）に対して、「この場所には、こういう種類のコンポーネントが差し替え可能ですよ」という「スロット」を定義する機能だと考えてください。

設定手順（基本）:

1. 親コンポーネントを作成: まず、ベースとなるコンポーネント（例: アイコン付きボタン）を作成します。
2. 差し替えたい要素をコンポーネント化: 差し替えたい要素（例: 各種アイコン）を、それぞれ独立したコンポーネントとして作成します。これらは「差し替え候補」となります。
3. 親コンポーネントにインスタンスを配置: 親コンポーネント内に、差し替え候補となるコンポーネントのインスタンスを配置します。
4. 「Swap Instance」プロパティを設定:

  • 配置したインスタンスを選択します。
  • 右側のインスペクターパネルにある「Instance」セクションで、「Swap instance」という項目を探します。
  • 「+」ボタンをクリックし、「Create property」を選択します。
  • プロパティ名（例: `Icon`）を設定し、タイプを「Instance Swap」に指定します。
  • 「Default value」として、初期状態で表示させたいインスタンス（例: `Search Icon`）を選択します。
  • 「Available components」で、このスロットに差し替え可能なコンポーネント（例: `Icons/Search`, `Icons/User`, `Icons/Settings` など）をすべて指定します。

5. インスタンスとして配置・利用: 作成した親コンポーネントを、別の場所でインスタンスとして配置します。
6. プロパティで差し替え: インスタンスを選択し、右側のインスペクターパネルの「Instance Swap」プロパティから、ドロップダウンメニューで好きなコンポーネントを選択すれば、瞬時に差し替えが完了します。

2.2. 具体例：カードコンポーネントにおける活用

画像、タイトル、説明文、アクションボタンなど、複数の要素で構成されるカードコンポーネントを考えてみましょう。

  • 親コンポーネント: `Card`
  • 差し替え候補コンポーネント:
  • `Image/Product` (商品画像)
  • `Image/UserAvatar` (ユーザーアバター)
  • `Image/IconPlaceholder` (アイコンプレースホルダー)
  • `Typography/TitleLarge`
  • `Typography/BodyRegular`
  • `Button/Primary`
  • `Button/Secondary`

これらのコンポーネントを`Card`コンポーネント内の適切な位置に配置し、それぞれに「Instance Swap Property」を設定します。

  • `Card` コンポーネントの設定例:
  • `Card.Image` → `Image` (Instance Swap Property)
  • Default: `Image/Product`
  • Available: `Image/Product`, `Image/UserAvatar`, `Image/IconPlaceholder`
  • `Card.Title` → `Title` (Instance Swap Property)
  • Default: `Typography/TitleLarge`
  • Available: `Typography/TitleLarge`, `Typography/TitleMedium`
  • `Card.Body` → `Body` (Instance Swap Property)
  • Default: `Typography/BodyRegular`
  • Available: `Typography/BodyRegular`, `Typography/BodySmall`
  • `Card.Action` → `Action` (Instance Swap Property)
  • Default: `Button/Primary`
  • Available: `Button/Primary`, `Button/Secondary`, `Link/Text`

これにより、`Card`コンポーネント一つで、商品カード、ユーザープロフィールカード、お知らせカードなど、様々な種類のカードを、テキストやボタンのバリエーションごと簡単に切り替えながら作成できるようになります。

3. ネストされたコンポーネントを極める – 上級テクニックと設計思想

ここからが本番です。Instance Swap Propertyを「使いこなす」レベルから「極める」レベルへ引き上げるための、より実践的で洗練されたテクニックを紹介します。

3.1. アイコンセットを「Instance Swap Property」で管理する

アイコンはUIデザインで最も頻繁に差し替えられる要素の一つです。これをInstance Swap Propertyで管理するのは非常に強力です。

設計思想:

  • アイコンは独立した「Atomic Design」のAtomとして定義: 各アイコンは、サイズや色などのバリエーションを持たせる場合でも、基本的には単一のコンポーネントとして作成します。
  • アイコンを配置する「親」コンポーネントでInstance Swap Propertyを設定: ボタン、リストアイテム、タブなど、アイコンを内包するコンポーネント側で、アイコンの差し替えプロパティを定義します。

具体的な設定手順:

1. アイコンコンポーネント群の作成:

  • `Icons` というフレームを作成し、その中に各アイコンコンポーネントを配置します。（例: `Icons/Search`, `Icons/User`, `Icons/Settings`）
  • 可能であれば、アイコンのサイズ（例: `Icons/16/Search`, `Icons/24/Search`）や色（例: `Icons/Primary/Search`, `Icons/Secondary/Search`）といった構造で整理すると、さらに管理しやすくなります。

2. アイコンを利用するコンポーネントの作成:

  • 例: `Button/IconLeft` というコンポーネントを作成します。
  • このコンポーネント内に、アイコンを配置するためのFrame（例: `IconWrapper`）を作成します。

3. Instance Swap Propertyの設定:

  • `Button/IconLeft` コンポーネントを選択し、右側のパネルで `IconWrapper` フレームを選択します。
  • 「Swap Instance」プロパティを作成します。
  • Name: `Icon`
  • Type: `Instance Swap`
  • Default value: （初期表示したいアイコン、例: `Icons/Search`）
  • Available components: `Icons/Search`, `Icons/User`, `Icons/Settings`, … （ここで、`Icons`フレーム内のすべてのアイコンコンポーネントを指定します。FigmaのUIで複数選択して追加できます。）

利点:

  • ボタンコンポーネントは一つでOK: アイコンの種類が増えても、`Button/IconLeft` コンポーネント自体は増えません。
  • アイコンの追加・削除が容易: `Icons` ライブラリにアイコンを追加・削除するだけで、それを利用しているすべてのコンポーネントに反映されます。
  • デザイナーとの連携がスムーズ: デザイナーは、ボタンのインスタンスを選択し、プロパティパネルからアイコンをドロップダウンで選ぶだけで、アイコンを切り替えられます。

3.2. ネストされたコンポーネントの「プロパティ」をさらにネストする

「Instance Swap Property」は、さらにその内側のコンポーネントのプロパティ（Variant PropertyやInstance Swap Property）を操作することも可能です。

例: `Card` コンポーネントが、`Image`（Instance Swap Propertyでアイコンや画像を選択可能）と `Button`（Variant PropertyでPrimary/Secondaryを選択可能）を持っているとします。

この `Card` コンポーネントを、さらに別のコンポーネント（例: `FeaturedCard`）のInstance Swap Propertyで利用する場合、`FeaturedCard` のインスタンスから、`Card` の中の `Image` や `Button` のプロパティにアクセスできます。

設定方法:

1. `Card` コンポーネントで、`Image` に `Icon` という Instance Swap Property、`Button` に `Variant` という Variant Property を設定しておきます。
2. `FeaturedCard` コンポーネントを作成し、その中に `Card` コンポーネントのインスタンスを配置します。
3. `Card` のインスタンスを選択し、右側のインスペクターパネルを確認します。
4. 「Overrides」セクションの `Card` の下に、`Icon` (Instance Swap Property) や `Variant` (Variant Property) が表示され、ここで直接操作できるようになります。

設計思想:

  • コンポーネントの階層構造を意識したプロパティ設計: 親コンポーネントが持つべきプロパティと、子コンポーネントが持つべきプロパティを明確に分離します。
  • 「Facade Pattern」の適用: 複雑な内部構造を持つオブジェクト（コンポーネント）に対して、シンプルで統一されたインターフェース（プロパティ）を提供するイメージです。

3.3. 設計ルール：レイヤー肥大化を防ぎ、可読性を保つ

Instance Swap Propertyは、レイヤーの肥大化を防ぐ強力な手段ですが、使い方を誤ると、かえって複雑になることもあります。以下のルールを意識しましょう。

  • 「差し替え候補」は、最小単位のコンポーネント（Atom）とする: 例えば、アイコンは単一のアイコンコンポーネントとして、テキストスタイルは定義済みのTypographyコンポーネントとして用意します。
  • 親コンポーネントの役割を明確にする: 親コンポーネントは、あくまで「配置とレイアウト」に責任を持つようにします。色やフォントなどの具体的なスタイリングは、差し替え候補のコンポーネントに委譲します。
  • Instance Swap Propertyの「Available components」は最小限に: 実際に差し替えたいコンポーネントだけを指定します。あまりに多くのコンポーネントを指定すると、選択肢が多すぎて混乱を招きます。
  • 命名規則を徹底する:
  • 親コンポーネント名: `[ComponentCategory]/[ComponentName]` (例: `Button/Primary`, `Card/Profile`)
  • 差し替え候補コンポーネント名: `[Category]/[Name]` (例: `Icons/Search`, `Typography/Title/Large`)
  • Instance Swap Property名: 意味が分かりやすい単数形 (例: `Icon`, `Avatar`, `Action`)
  • Default Valueを適切に設定する: 最も一般的、または初期状態として表示されるべきコンポーネントをデフォルトに設定します。
  • Instance Swap Propertyは、コンポーネントの「Atomic」な部分に適用する: 例えば、ボタンの「アイコン」や「テキストラベル」、カードの「画像」や「アクションボタン」など、交換可能な要素に限定します。ボタンの「色」や「サイズ」といった、コンポーネント自体のバリエーションは、Variant Propertyで管理する方が適切です。

4. 開発スピードを劇的に高める隠れたキーボードショートカットと神プラグイン

実務でFigmaを使い倒すには、ショートカットとプラグインは必須です。Instance Swap Propertyをさらに効率化するものを紹介しましょう。

4.1. 隠れたキーボードショートカット

  • `Cmd + Option + K` (macOS) / `Ctrl + Alt + K` (Windows): 選択したレイヤーをコンポーネントに変換。Instance Swap Propertyを設定する前に、差し替え候補をコンポーネント化する際に重宝します。
  • `Cmd + /` (macOS) / `Ctrl + /` (Windows): コマンド検索。Instance Swap Propertyのプロパティ設定画面を開く際にも、この検索から「Swap instance」と入力してアクセスできます。
  • `Option` キー（macOS）/ `Alt` キー（Windows）を押しながらドラッグ: 選択したコンポーネントのインスタンスを複製。Instance Swap Propertyで差し替え候補を配置する際に、既存のインスタンスを元に複製すると、プロパティ設定が引き継がれるため便利です。

4.2. 絶対に入れるべき神プラグイン

  • Instance Finder:
  • 概要: デザインファイル内で、特定のコンポーネントがどこで使用されているかを検索・表示してくれるプラグイン。Instance Swap Propertyで設定したコンポーネントが、どの親コンポーネントのどのプロパティで使われているかを追跡するのに役立ちます。
  • Instance Swap Propertyとの連携: 例えば、「`Icons/Search` が使われている場所」を検索し、その親コンポーネントの `Icon` プロパティで使われていることを特定できます。これは、デザインの修正やリファクタリング時に非常に強力です。
  • Similayer:
  • 概要: 選択したレイヤーと類似したプロパティを持つレイヤーをすべて選択してくれるプラグイン。Instance Swap Propertyを設定したい複数のインスタンスを一度に選択し、まとめてプロパティを設定したい場合に役立ちます。
  • Instance Swap Propertyとの連携: 例えば、複数のボタンコンポーネントで、それぞれ異なるアイコンをInstance Swap Propertyで設定したい場合、まず一つのボタンで設定した後、`Similayer` を使って他のボタンを選択し、Instance Swap Propertyをコピー＆ペースト（または、プロパティ設定を適用）すると効率的です。
  • Master – Component Management:
  • 概要: コンポーネントの管理、リネーム、整理を効率化するプラグイン。Instance Swap Propertyで登録するコンポーネントが乱雑にならないよう、ライブラリを綺麗に保つのに役立ちます。
  • Instance Swap Propertyとの連携: Instance Swap Propertyの「Available components」に登録する際、コンポーネントの命名規則が統一されていると、後から探しやすくなります。このプラグインでライブラリ全体を整理しておきましょう。

5. チーム開発で役立つ設定の共有化ルールとベストプラクティス

Figmaはチームで使うツールです。Instance Swap Propertyの設定をチーム全体で共有し、一貫性を保つためのルールを定めましょう。

5.1. 設定の共有化ルール

  • デザインシステムの定義にInstance Swap Propertyのルールを組み込む:
  • 「アイコンは`Icons/[Name]`という命名規則のコンポーネントとして管理し、ボタンやリストアイテムなどのコンポーネントでは`Icon`というInstance Swap Propertyで差し替える」といった具体的なルールをドキュメント化します。
  • 「画像アセットは`Images/[Category]/[Name]`として管理し、カードコンポーネントでは`Image`というInstance Swap Propertyで差し替える」なども定義します。
  • Figmaライブラリの活用:
  • Instance Swap Propertyで利用するコンポーネント（アイコン、画像、テキストスタイルなど）は、必ずFigmaライブラリとして公開します。
  • 親コンポーネント（例: `Button`, `Card`）もライブラリとして公開し、チームメンバーがそれを利用する形にします。
  • コンポーネントの命名規則の徹底:
  • 前述の通り、Instance Swap Propertyで参照されるコンポーネントの命名規則は非常に重要です。チーム内で合意した命名規則を厳守します。
  • デザインレビューでの確認:
  • デザインレビューの際に、Instance Swap Propertyが意図した通りに設定されているか、利用できるコンポーネントの範囲が適切かなどを確認します。

5.2. 実用的な設定ファイル（YAML/JSON/XML）のベストプラクティス構成例

Figma自体は設定ファイルを直接エクスポート/インポートする機能は限定的ですが、デザインシステムをコードで管理する際のデータ構造や、プラグイン開発、あるいは外部ツールとの連携を考えると、YAMLやJSON形式での定義は非常に有用です。

ここでは、Instance Swap Propertyで利用されるコンポーネント群の定義を、YAML形式で表現する例を示します。これは、デザインシステムドキュメントや、コード生成ツールの入力データとして活用できます。

design_system/components.yaml

— Icons —
icons:
# 検索アイコン
search:
name: “Icons/Search” # Figmaライブラリ上のコンポーネントパス
tags: [“utility”, “navigation”]
description: “検索を実行するためのアイコン”
properties:
size: “24px” # Variant Propertyなどで管理する場合
color: “primary”

# ユーザーアイコン
user:
name: “Icons/User”
tags: [“account”, “profile”]
description: “ユーザープロフィールを示すアイコン”
properties:
size: “24px”
color: “secondary”

# 設定アイコン
settings:
name: “Icons/Settings”
tags: [“utility”, “settings”]
description: “設定画面への遷移を示すアイコン”
properties:
size: “24px”
color: “primary”

— Typography —
typography:
title:
large:
name: “Typography/Title/Large”
properties:
weight: “bold”
color: “text/primary”
medium:
name: “Typography/Title/Medium”
properties:
weight: “medium”
color: “text/secondary”

body:
regular:
name: “Typography/Body/Regular”
properties:
weight: “regular”
color: “text/primary”

— Buttons —
buttons:
primary:
name: “Buttons/Primary”
properties:
size: “medium”
icon_position: “left” # Instance Swap PropertyでIconを操作する際の補助情報

— Cards —
cards:
profile:
name: “Cards/Profile”
# このカードコンポーネントが持つInstance Swap Propertyとそのデフォルト値、利用可能なコンポーネント群
properties:
avatar: # Instance Swap Property名
type: “instance_swap”
default: “Images/Avatars/Default” # Figmaライブラリ上のコンポーネントパス
available:

  • “Images/Avatars/Default”
  • “Images/Avatars/User1”
  • “Images/Avatars/User2”

title: # Instance Swap Property名
type: “instance_swap”
default: “Typography/Title/Medium”
available:

  • “Typography/Title/Medium”
  • “Typography/Title/Large”

action: # Instance Swap Property名
type: “instance_swap”
default: “Buttons/Secondary”
available:

  • “Buttons/Secondary”
  • “Links/Text”

— Example Usage in a Component —
Example: A component that uses the ‘cards/profile’ definition
This part demonstrates how a parent component might define its own Instance Swap Properties
that delegate to the child’s Instance Swap Properties.
This is conceptual and might be implemented via code generation or specific plugin logic.
components:
user_profile_card:
name: “Sections/UserProfileCard”
properties:
# This property in ‘Sections/UserProfileCard’ maps to the ‘avatar’ property within the ‘Cards/Profile’ instance.
user_avatar:
type: “instance_swap_delegate” # Custom type to indicate delegation
target_component: “Cards/Profile”
target_property: “avatar”
default: “Images/Avatars/Default”
available:

  • “Images/Avatars/Default”
  • “Images/Avatars/User1”
  • “Images/Avatars/User2”

user_name_text:
type: “instance_swap_delegate”
target_component: “Cards/Profile”
target_property: “title”
default: “Typography/Title/Medium”
available:

  • “Typography/Title/Medium”
  • “Typography/Title/Large”

解説:

  • `icons`, `typography`, `buttons`, `cards`: それぞれのコンポーネントカテゴリを定義します。
  • `name`: Figmaライブラリ上のコンポーネントパスを示します。Figmaのコンポーネント構造と一致させるのが重要です。
  • `properties`:
  • `avatar`, `title`, `action`: これらは、親コンポーネント（例: `Cards/Profile`）のInstance Swap Property名です。
  • `type: “instance_swap”`: このプロパティがInstance Swap Propertyであることを示します。
  • `default`: 初期値として設定されるコンポーネントのパス。
  • `available`: 差し替え可能なコンポーネントのパスのリスト。
  • `components/user_profile_card`: これは、さらに上位のコンポーネント（例: `Sections/UserProfileCard`）が、内部の `Cards/Profile` インスタンスのInstance Swap Propertyを操作する際の例です。`instance_swap_delegate` のようなカスタムタイプを定義し、どのコンポーネントのどのプロパティにマッピングされるかを明示します。

このYAML定義は、Figmaファイル内のコンポーネント構造とInstance Swap Propertyの設定を、人間が読める形で表現するのに役立ちます。これを元に、コード生成スクリプトを作成したり、デザインシステムドキュメントを自動生成したりすることが可能になります。

まとめ：Instance Swap Propertyを使いこなし、チームの生産性を最大化しよう

Instance Swap Propertyは、Figmaにおけるコンポーネント管理の効率を飛躍的に向上させるための、まさに「秘密兵器」です。これをマスターすることで、

  • デザインの柔軟性を維持しながら、コンポーネントの数を最小限に抑えられます。
  • レイヤー構造がシンプルになり、Figmaのパフォーマンスも向上します。
  • デザイナーとエンジニア間のコミュニケーションコストが削減され、開発スピードが劇的に向上します。

今回ご紹介したテクニック、ショートカット、プラグイン、そして設定共有のルールをぜひ日々の業務に取り入れてみてください。Instance Swap Propertyを「極める」ことで、皆さんのチームのUI/UX開発は、より洗練され、より高速になるはずです。

もし、Instance Swap Propertyの活用で「こんな使い方があったのか！」という発見や、「このプラグインが便利だった！」といった情報があれば、ぜひコメントで共有してください。皆でFigmaの真価を引き出し、より良いプロダクト開発を目指しましょう！

スポンサーリンク
タイトルとURLをコピーしました