Figmaコンポーネントプロパティの深淵：保守性を極める「ネスト」と「命名」の流儀
やあ。UI/UXの現場で日々戦い続ける君たちへ。
Figmaの「コンポーネントプロパティ」が登場してから、私たちのワークフローは劇的に変わった。しかし、多くのチームが「ただ便利になった」という段階で止まっている。今日は、プロトタイピングの真髄である「堅牢なコンポーネント設計」と、その裏側にある「設計思想」について話をしよう。
これをマスターすれば、コンポーネントの修正に怯える日々は終わり、チーム全員が魔法のように直感的に扱えるデザインシステムが手に入るはずだ。
—
1. コンポーネントプロパティとは何か？（本質的な理解）
プロパティ（Boolean, Text, Instance Swap, Variant）は、単なる「切り替えスイッチ」ではない。これは「コンポーネントのAPI」だ。
開発者が関数に引数（Argument）を渡すように、デザイナーはプロパティを通じてUIの状態を制御する。ここを意識するだけで、君のコンポーネントは「ただの絵」から「動的なモジュール」へと進化する。
最初のセットアップ：HelloWorld的な設計
まずは最もシンプルな「ボタン」で、プロパティの力を実感しよう。
1. フレーム作成: 8pxの角丸、塗りありのフレームを一つ作る。
2. Textプロパティ: 中のテキストレイヤーを選択し、右サイドバーの「Content」横のアイコンをクリック。`Label` と名付ける。
3. Booleanプロパティ: アイコン用のレイヤーを作り、「Layer」セクションで `Has Icon` という名前のBooleanプロパティを割り当てる。
これだけで、インスタンス側では「テキストを書き換える」「アイコンの表示/非表示を切り替える」という操作が、レイヤーパネルを掘り返すことなく右サイドバーだけで完結するようになる。
—
2. インスタンスの入れ子（ネスト）と継承の罠
ここからが本題だ。「コンポーネントの中にコンポーネントを入れる」時、多くの人が挫折する。特に「親のプロパティを孫に渡す」という概念が重要だ。
継承のベストプラクティス：露出（Expose）戦略
ネストされたインスタンスのプロパティを親に「露出」させる機能を使えば、深い階層にある孫のプロパティを、親のインスタンスを選択するだけで操作できるようになる。
コツは以下の通り:
- 「隠蔽」が基本: 何でもかんでも露出させない。操作に必要なものだけを親に引き上げる。
- ネーミングの統一: 孫の `Label` プロパティを親にも露出させる際、親のプロパティ名も同じ `Label` にする。これにより、データが論理的に繋がる。
—
3. チームを救う「命名規則」の鉄則
「何がどこにあるか分からない」という悲劇は、命名規則の崩壊から始まる。僕が現場で推奨しているのは「階層構造を意識したドット連結（Dot Notation）」だ。
推奨される命名規則のテンプレート
プロパティ名には、以下の形式を推奨する。
- `Type / Status / Size`
- 例: `Button / Primary / Active`
- 例: `Icon / Size / 24px`
なぜこれが重要か？
Figmaの右サイドバーでプロパティがアルファベット順に並ぶ際、スラッシュ（`/`）で区切ることで、自動的にグループ化され、メニューが整理されるからだ。
// コンポーネントプロパティの命名案
- State / Hover (Boolean)
- Theme / DarkMode (Boolean)
- Content / Label (Text)
- Asset / Icon (Instance Swap)
これをチームでルール化するだけで、新しく参画したメンバーも「直感的に」UIを構築できるようになる。
—
4. 現場で震えるほど役立つ「設計の極意」
最後に、プロフェッショナルとして君たちに伝えたい「設計の思想」を二つだけ。
① 「Variant」と「プロパティ」を使い分ける
すべてをVariantで作る必要はない。
- Variant: 「構造が根本的に変わるもの」（例：ボタンの形状、サイズのバリエーション）
- プロパティ: 「状態やコンテンツが変化するもの」（例：テキスト内容、アイコンの有無、色のモード）
この境界線を意識するだけで、コンポーネントセットの肥大化を防げる。
② 「メンテナンス」を考慮した設計を
プロパティを追加する際は、「半年後の自分がこれを見て、一瞬で意図を理解できるか？」を自問自答してほしい。複雑すぎるネストは、数ヶ月後に必ず負債になる。シンプルな構造を維持し、必要最小限の露出に留めることが、結果として最強のUI/UXを生む。
—
最後に：ツールはあくまで「手段」
Figmaの機能は日々進化している。しかし、本質は変わらない。「誰が使っても迷わず、壊れず、期待通りに動くものを作ること」。
まずは今日、手元のボタンコンポーネントを一つ、プロパティを使って「API化」してみてほしい。その時、君の作業効率は確実に一段階上のステージへ上がるはずだ。
デザインシステムは、一朝一夕には成らない。だが、こうした小さな「こだわり」の積み重ねが、やがて巨大で美しいプロダクトを支える土台になる。
分からないことがあれば、いつでも聞いてくれ。君の挑戦を応援しているよ。