こんにちは。UI/UXの現場で数々の修羅場をくぐり抜けてきたエンジニアです。
Figmaを使っていると、必ずぶつかる壁がありますよね。「ボタンのホバー、フォーカス、エラー、ローディング…画面が増えるたびに同じようなパーツを量産して、管理が崩壊する」という悪夢です。
今日は、そんな泥沼からあなたを救い出す「Component Set」によるステート管理の真髄を伝授します。これをマスターすれば、あなたのデザインデータは「管理するもの」から「自動的に呼吸するもの」へと進化します。
—
1. なぜ「バラバラのパーツ」を捨て去るべきなのか？
初心者のうちは、ボタンを一つ作るたびに「Button/Default」「Button/Hover」「Button/Error」と別々のコンポーネントを作りがちです。しかし、これが地獄の入り口です。
Component Set（バリアント）を使うと、これらを一つの「論理的な箱」に閉じ込めることができます。
- 管理の集約: コンポーネントを修正すれば、全ステートに即座に反映される。
- エンジニアとの共通言語: 「このボタンは `state` プロパティが `error` の時、枠線が赤になる」という仕様を、そのままコードの型定義に直結できる。
—
2. 【実践】最強のフォーム部品を作るセットアップ
まずは、最も利用頻度の高い「入力フォーム（Input Field）」を例に、極限の管理体制を構築しましょう。
ステップ1：最小単位のコンポーネントを作る
まずは「何もない状態のInput」を1つ作ります。
1. `Frame` で枠を作り、中にテキスト（プレースホルダー）を配置。
2. `Auto Layout` を適用し、パディングを整える。
3. これをコンポーネント化（`Cmd + Option + K`）。
ステップ2：Component Setへの昇華
ここからが魔法です。
1. 作ったコンポーネントを選択し、右サイドバーの「+」ボタンから 「Combine as variants」 を選択します。
2. これでコンポーネントが「箱（Set）」に入りました。
ステップ3：プロパティの極意
右サイドバーの「Properties」設定で、論理構造を整理します。
- Property 1: `State` (Default, Focus, Error, Disabled)
- Property 2: `Icon` (None, Left, Right)
ここで重要なのは、「命名の規則性をコードに合わせる」こと。
エンジニアが `type: ‘error’` と書くなら、デザイン側も `State: error` とします。この乖離をなくすことが、デザインシステム構築の第一歩です。
—
3. 動作確認：HelloWorldならぬ「StateSwitch」の儀式
設定が終わったら、正しく動くか確認しましょう。
1. 配置: Setからインスタンスを一つキャンバスにドラッグします。
2. 切り替え: インスタンスを選択し、右サイドバーのプルダウンを操作してみてください。
3. 観察: 瞬時に「Default」から「Error」へ、あるいは「アイコン付き」へと姿を変えるはずです。
【ここでプロのワンポイントアドバイス】
`Boolean` プロパティを活用してください！
例えば「アイコンの表示・非表示」は、個別にバリアントを作るのではなく、Propertyの「Boolean」を追加して、アイコンのレイヤーの「目玉アイコン」をバインドさせるのです。これでバリアントの数が半分以下になり、管理コストが劇的に下がります。
—
4. 現場で震えるほど役立つ「設計思想」
最後に、一つだけ覚えて帰ってください。「コンポーネントは、プロダクトの仕様を語るドキュメントである」ということです。
複雑なフォームUIを設計するとき、私は必ず以下の手順を意識しています。
1. 状態の洗い出し: 実装前に「発生しうる全ステート」を書き出す。
2. 階層化: `Boolean` プロパティで切り替えられるものは別バリアントにしない（複雑化を防ぐ）。
3. エンジニアとの握り: 「このセットアップで、フロントエンドの型定義（TypeScriptのUnion型など）と一致しているか？」を確認する。
設定の考え方（疑似コード例）
// Figmaのプロパティ構造は、まさにこのコードを視覚化したものです
type InputState = ‘default’ | ‘focus’ | ‘error’ | ‘disabled’;
interface InputProps {
state: InputState;
hasIcon: boolean; // Booleanプロパティで制御
label: string;
}
—
まとめ：今日からあなたの仕事は変わる
FigmaのComponent Setを使いこなすと、デザイン作業は「描く」ことではなく「システムの挙動を定義する」ことに変わります。
最初は設定が面倒に感じるかもしれません。しかし、一度この「型」を作ってしまえば、あとはパズルを組み立てるようにUIを構築できるようになります。修正依頼が来ても、マスターコンポーネントを一つ直すだけで、全画面に反映される快感。これを味わうと、もう以前のやり方には戻れません。
さあ、あなたの次の画面設計で、まずは「ボタン」から試してみてください。
毎日の作業が劇的に楽になる未来は、すぐそこにありますよ。応援しています！