Figmaの「Advanced Prototyping」を極める：静止画から「動的な体験」へのパラダイムシフト
こんにちは。UI/UXの現場で数々のプロダクトを形にしてきたエンジニアとして、今日は君に「Figmaの真の力」を伝授しようと思う。
多くのデザイナーがFigmaを「画面の配置ツール」だと思っているが、それは氷山の一角に過ぎない。今のFigmaは、「Variables（変数）」と「Conditional Logic（条件分岐）」を駆使することで、コードを書かずにバックエンドのロジックまでシミュレートできる強力なプロトタイピング環境なんだ。
これをマスターすれば、エンジニアに「ここ、どう動くの？」と聞かれて言葉に詰まることはなくなる。むしろ、エンジニアが「完璧な仕様だ」と唸るようなドキュメントを、君自身が手元で作れるようになる。
さあ、退屈な静的デザインの世界から脱出しよう。
—
1. なぜ「Advanced Prototyping」なのか？
従来のプロトタイプは「Aを押したらBへ遷移する」という単一的なリンクに過ぎなかった。しかし、今のプロダクトは違う。
- ショッピングカートの個数による合計金額の変化
- パスワード入力時の、リアルタイムなバリデーションチェック
- ダークモードとライトモードの動的な切り替え
これらを「画面の枚数」で解決しようとすると、プロトタイプは地獄のようなスパゲッティ状態になる。Variables（変数）を使えば、たった1枚の画面で、無限の動的状態を再現できるんだ。
—
2. 基礎セットアップ：Variablesを理解する
まずは、Figmaの右サイドバーにある「Local Variables」を開こう。ここで定義する変数が、君のプロトタイプの「脳」になる。
ステップ1: 変数の定義
1. Local Variablesをクリックし、「Create variable」を選択。
2. 以下の3つを作ってみてほしい。
- `cart_count` (Number): 初期値 0
- `price_unit` (Number): 初期値 1000
- `total_price` (Number): 初期値 0
これだけで、君のプロトタイプは「状態を持つ」ことができるようになった。
—
3. HelloWorld：動的計算ロジックを組む
「ボタンを押すと個数が増え、合計金額がリアルタイムに計算される」という機能を実装しよう。
手順：
1. フレームを用意: 「＋」ボタンと「個数表示テキスト」、そして「合計金額テキスト」を配置。
2. テキストをバインド: 合計金額のテキストレイヤーを選択し、右サイドバーの「Text」セクションにある「変数アイコン」から `total_price` を紐付ける。
3. インタラクションを記述:
- 「＋」ボタンを選択し、Prototypeタブへ。
- `+` ボタンをクリック > `On click` を選択。
- Set variable: `cart_count` を `cart_count + 1` に設定。
- Set variable: `total_price` を `cart_count price_unit` に設定。
これだけで完了だ。 プレビューを再生してほしい。ボタンを押すたびに数字が書き換わるだろう？ これが「UIがロジックと同期する」ということだ。
—
4. 条件分岐（Conditional Logic）でバリデーションを作る
次に、もう少し高度な「パスワードバリデーション」に挑戦しよう。
「8文字以下なら赤字でエラーを出し、9文字以上で青字（成功）にする」というロジックだ。
プロトタイプの書き方（擬似コード的思考）
Prototypeパネルで、入力フィールドに「On change」イベントを設定し、以下のロジックを組む。
// プロトタイプのロジック構造
if (input_length < 8) {
// 文字数が足りない場合
Set variable: is_valid = false
Set color: text_color = "red"
} else {
// 条件を満たした場合
Set variable: is_valid = true
Set color: text_color = "blue"
}
FigmaのUI上では、「Conditional」を選択し、`if` 条件式を記述する。この直感的なインターフェースは、プログラミングの基礎そのものだ。ここを理解すれば、エンジニアとの会話の質が劇的に変わる。
—
5. 現場で震えるほど役立つ「プロのコツ」
1. 「マスターコンポーネント」を汚さない: 変数の変更は、インスタンス側の「Set variable」で完結させよう。コンポーネント自体にロジックを埋め込むと、再利用性が高まる。
2. 計算式はシンプルに: Figmaの計算式は四則演算（`+`, `-`, “, `/`）が基本だ。複雑なロジックが必要な場合は、一度変数を分けて計算結果を保持する「中間変数」を作るのがコツ。
3. エンジニアへの引き継ぎ: 「この変数が、君のコードのどの状態変数に対応するか」をDev Modeのコメントに残しておこう。これだけで手戻りが半分になる。
—
最後に
UI/UXデザインにおいて、ツールはあくまで「表現手段」だ。しかし、FigmaのAdvanced Prototypingを使いこなすことは、「デザインの解像度」を極限まで高めることに他ならない。
「動くはずがない」と思っていたUIを、自分の手元で、論理的に動かしてみる。その成功体験が、君をただのデザイナーから、プロダクトの全貌を設計できる「プロダクトエンジニア」へと押し上げてくれるはずだ。
さあ、次のスプリントから、君のプロトタイプに命を吹き込んでいこう。分からないことがあったら、いつでもまた聞きに来てくれ。君の挑戦を応援しているよ。