【入門編】Figmaの「Component Property」と「Boolean」を組み合わせた無限に拡張可能な汎用カードコンポーネントの作り方 – UI/UX・デザインツール活用バイブル

こんにちは。UI/UXの最前線で戦う皆さん、そしてデザインシステムの深淵に足を踏み入れたばかりの皆さん。

今日は、Figmaの「Component Properties（コンポーネントプロパティ）」を使いこなし、「管理不能な巨大コンポーネント」を「拡張可能なアートピース」へと変える魔法についてお話しします。

多くの現場で「カードコンポーネントがバリアント（Variants）で埋め尽くされ、修正するたびに地獄を見る」という光景をよく目にします。今日はその悪習を断ち切り、たった一つのメインコンポーネントで無限の可能性を秘めたカードを作る極意を伝授しましょう。

—

初心者の方が最初に陥る罠が、あらゆる組み合わせをバリアントとして作成することです。

これらを組み合わせると、バリアントの数は指数関数的に増え、Figmaは重くなり、修正時の心理的コストは跳ね上がります。「バリアントはデザインの『状態（State）』を示すもの」であり、「コンテンツの『有無』を示すものではない」という原則を心に刻んでください。

ここで登場するのが、Boolean（真偽値）プロパティです。これは「表示する(True) / しない(False)」をプロパティパネルからワンクリックで切り替える機能です。

1. ベースを作る: 必要なパーツ（Icon, Image, Title, Subtitle, Button）をAuto Layoutで縦に並べたカードを作ります。
2. Booleanの割り当て:

3. 魔法の瞬間: これだけで、デザインパネルからスイッチ一つでボタンを消したり出したりできるようになります。

プロの極意: Booleanは「名前」が命です。`Show Button` や `Has Icon` など、直感的に挙動がわかる命名を徹底してください。

—

Booleanとセットで覚えてほしいのが、「インスタンス・スワップ（Instance Swap）」プロパティです。

先ほどのカード内のアイコンが常に固定だと不便ですよね？
1. アイコンのレイヤーを選択。
2. 「Instance Swap」プロパティを作成し、「Icon」と名前をつけます。
3. これで、プロパティパネルから、ライブラリ内のあらゆるアイコンに即座に差し替えが可能になります。

これが最強の理由：
レイヤーを直接触る必要が一切なくなります。デザイナーは「構造（レイヤー構成）」を意識せず、「プロパティ（設定値）」を触るだけでデザインを完結させられるのです。

—

デザインシステムを運用する際、最も恐ろしいのは「コンポーネントが肥大化して誰も触れなくなること」です。以下のルールをチームの憲法にしてください。

—

今回紹介した技術は、単なるFigmaのテクニックではありません。「デザイナーの思考をシステムに落とし込むための作法」です。

まずはシンプルなカードで試してみてください。「ボタンを消すと、下の余白が自動で詰まる」という挙動を初めて体験したとき、あなたはもう以前の非効率な作業には戻れなくなっているはずです。

デザインシステムは、一度作って終わりではありません。チーム全員が使いやすく、かつ拡張し続けられる「生きているプロダクト」です。今回紹介したプロパティの組み合わせで、ぜひあなたのプロダクトに究極の柔軟性をもたらしてください。

何か詰まったら、いつでも聞きに来てくださいね。技術の深淵を覗くのは、いつだって最高にエキサイティングな冒険ですから。