やあ。プロダクトデザインの最前線へようこそ。
Figmaを触り始めて、「コンポーネントを入れ子にしたら、中のパーツをいじるために何度もダブルクリックして階層を潜らなきゃいけない……これ、面倒じゃない？」と感じたことはないかな？
今日は、その「階層の沼」から脱出し、魔法のようにUIを操るための「Instance Swap Property（インスタンスの入れ替えプロパティ）」の真髄を伝授するよ。これをマスターすれば、君の作ったデザインシステムは、まるで呼吸をするように柔軟で、強靭なものに生まれ変わるはずだ。
—
1. なぜ「階層の深さ」が敵なのか？
デザインシステムが成長すると、コンポーネントは多層構造になる。「カード」の中に「アバター」があり、その中に「ステータスアイコン」がある……といった具合だ。
従来のやり方だと、最上位の「カード」から中の「アイコン」を変えようとすると、何度もクリックしてドリルダウンする必要があったよね。これは単に手数がかかるだけでなく、「どこを触ればいいか分からない」という認知負荷をチーム全員に強いることになる。
真のプロの設計とは、ユーザー（自分自身や他のデザイナー）が「直感的にプロパティパネルだけで操作を完結できる状態」を指すんだ。
—
2. Instance Swap Property：魔法の配線術
Instance Swap Propertyは、コンポーネントの「受け皿」をプロパティパネルに引き上げる機能だ。これを使えば、階層を潜ることなく、親の顔色を変えるだけで子孫を制御できる。
ステップ1：コンポーネントの「受け皿」を定義する
まずは、アバターコンポーネントの中に「アイコン」という枠を置いてみよう。
1. アイコンのベースとなるコンポーネント群を作成する（例：`icon/status/online`, `icon/status/offline`）。
2. アバターコンポーネントの中に、適当なアイコンを配置する。
3. そのアイコンインスタンスを選択し、右側のプロパティパネルの「Instance」セクションの横にある「Create instance swap property」アイコン（矢印が上下しているマーク）をクリックする。
4. 名前を「Status Icon」と名付けよう。
これで、アバターを選択するだけで、プロパティパネルに「Status Icon」というドロップダウンが現れるようになる。
ステップ2：ネストの極意「共通の親」で束ねる
ここからがプロの領域だ。複数の異なるアバターセットがある場合、それぞれに個別にアイコンを設定してはいけない。
- 裏技： 共通の「Iconコンポーネント」を一つ挟むこと。
- 全てのアイコンを「Icon」という名前のコンポーネントセットとして定義し、それらを入れ替えるように設計する。これにより、将来的にアイコンの種類が増えても、プロパティの再設定なしで自動的に選択肢が増えるという「拡張性」が手に入る。
—
3. 精度高い「HelloWorld」：動作確認の儀式
まずは、この設計が正しく動いているか確認しよう。
1. ベース作成: `Icon/Base` というコンポーネントセットを作る（中身はシンプルな円形や星形でOK）。
2. 親コンポーネント: `Card` というコンポーネントを作り、中に `Icon/Base` のインスタンスを配置する。
3. プロパティ付与: `Icon/Base` を選択し、Instance Swap Propertyを付与。
4. 動作確認: キャンバス上に `Card` を配置し、プロパティパネルの「Status Icon」をクリックする。ここで、あなたが作った別のアイコンがリストに表示され、クリック一つで切り替われば成功だ。
—
4. メンテナンス性を無限に高める設計の哲学
最後に、設計者として大切なことを一つだけ伝えておくよ。
「完璧なコンポーネントを作ろうとしないこと」だ。
Instance Swap Propertyの最大の強みは、「後から差し替え可能であること」。最初は一つのアイコンだけで始めていい。後から種類が増えたら、それを既存のコンポーネントセットに追加するだけで、デザインシステム全体が自動的にアップデートされる。
- 命名規則の徹底: `Icon/State/Name` のようにスラッシュ区切りで整理すること。
- デフォルト値の重要性: 一番よく使うアイコンをデフォルトに設定しておくこと（これはプロパティ作成時のダイアログで指定できる）。
—
先輩エンジニアからのメッセージ
UIデザインは、コードと同じだ。コンポーネントは「疎結合」であるべきで、親が子の中身を直接知る必要はない。Instance Swap Propertyは、その疎結合を実現するための強力な「インターフェース」なんだ。
最初は少し難しく感じるかもしれないが、一度この「プロパティパネルから全てを制御する快感」を知ってしまったら、もう元の泥臭い修正作業には戻れないはずだよ。
さあ、君のUIを、もっと美しく、もっと賢いシステムへと進化させてみてくれ。何か詰まったら、いつでも聞かせてね。応援しているよ。