Figma「Component Property」の極致：無限拡張可能なカードコンポーネント設計論
現場のデザイナーやエンジニアが陥る典型的な地獄がある。それは「バリエーションが増えるたびにバリアントを増やし、コンポーネントセットが巨大な墓標のようになる」ことだ。
特にカードUIは、その犠牲になりやすい。「アイコンあり/なし」「バッジあり/なし」「アクションボタンの種類」……これらを全てバリアントで管理すれば、メンテナンスコストは指数関数的に跳ね上がる。
今日は、Component Property（特にBoolean）を駆使して、バリアントの爆発を食い止め、コードとの同期を極限までスムーズにする「疎結合な設計術」を伝授する。
—
1. 肥大化を防ぐ：バリアントは「状態」、プロパティは「構成」
多くの初心者は「表示・非表示」をバリアントで管理しようとする。これが間違いの元凶だ。
バリアントは「見た目の差異（ホバー、プレス、サイズ）」に使い、プロパティは「構成要素の有無（アイコン、ラベル）」に使う。 これが鉄則だ。
実践：Boolean Propertyの最適化
カード内の全要素（アイコン、タグ、説明文など）をレイヤーパネルで選択し、右側のプロパティパネルで「Boolean」を割り当てる。
- プロパティ名の命名規則: `Show [要素名]` ではなく、シンプルに `Has [要素名]` または `[要素名]` とし、Boolean値で管理する。
- Auto Layoutの魔法: Booleanで非表示にしても、Auto Layoutの「Canvas stacking」が適切に設定されていれば、要素は魔法のように自動で詰められる。これでレイアウト崩れとは無縁になる。
—
2. 開発スピードを加速する「プロの武装」
絶対に入れるべき神プラグイン
- [PropStar](https://www.figma.com/community/plugin/1042777353112379373/propstar):
作成したコンポーネントの全プロパティの組み合わせを自動生成する。ドキュメント化の手間がゼロになる。
- [Tokens Studio for Figma](https://tokens.studio/):
FigmaのデザインデータをJSONとして書き出し、そのままコードのトークンとして同期する。これを使わずに「デザインシステム」を語ることはできない。
開発者が震えるショートカット
- `Shift + A`: Auto Layoutの即時適用（基本中の基本だが、これの入れ子構造を意識せよ）。
- `Opt + Command + C/V`: プロパティのコピー&ペースト。これを使うと、複雑なインスタンス設定を一瞬で別コンポーネントに移植できる。
—
3. コードとの同期：デザインシステムのJSON化
UIを実装する際、Figmaのプロパティ構造と、フロントエンドのコンポーネントPropsは1対1で対応させるべきだ。以下は、デザインシステムから書き出した設定ファイルのベストプラクティス例である。
{
“card”: {
“variants”: {
“size”: [“small”, “medium”, “large”]
},
“props”: {
“hasIcon”: { “type”: “boolean”, “default”: true },
“hasBadge”: { “type”: “boolean”, “default”: false },
“hasAction”: { “type”: “boolean”, “default”: true }
},
“spacing”: {
“gap”: “16px”,
“padding”: “24px”
}
}
// このJSONを基に、StorybookやReactコンポーネントを自動生成する設計が最強
}
—
4. チーム開発で生き残るための「共有化ルール」
1. 「階層構造の強制」:
メインコンポーネント内では、必ずレイヤー名に「/」を含めること（例: `Icon/Left`, `Icon/Right`）。これにより、Figmaのインスタンスパネルで要素の入れ替えが瞬時に行える。
2. 「Componentのドキュメント化」:
Figmaのコンポーネント詳細欄（Description）には、必ず「どのPropsをいじると何が起きるか」を短い文章で書け。これはコードのREADMEと同じだ。
3. 「命名の統一」:
デザイン側の `HasBadge` と、エンジニア側の `hasBadge` プロパティ名は必ず一致させる。ここがズレると、コミュニケーションコストという名の隠れ負債が溜まる。
—
最後に：完璧を目指すな、拡張性を目指せ
「完成されたコンポーネント」を作ろうとすると、逆に使い勝手の悪い産廃ができあがる。
「最小限の構成要素をBooleanで切り替えられるようにし、あとはAuto Layoutの柔軟性に任せる」。これが、プロダクトがどんなに巨大化しても破綻しないコンポーネント設計の極意だ。
Figmaはただのお絵描きツールではない。プロダクトのソースコードそのものを定義する「設計図」である。その意識を持って、次のコンポーネントを設計してほしい。現場のエンジニアが、あなたの作ったコンポーネントを見て「これ、実装しやすいわ」と呟く未来を作ろう。