【実務・中級編】Figmaの「Advanced Prototyping」を極める！数式と条件分岐を使った複雑なマイクロインタラクションの実装 – UI/UX・デザインツール活用バイブル

Figmaの「Advanced Prototyping」を極める：数式と条件分岐による動的UIシミュレーションの実装

こんにちは。テックリードとして日々プロダクト開発の最前線に立っていると、「画面遷移だけのハリボテのプロトタイプ」に限界を感じる瞬間が訪れます。ステークホルダーやQAエンジニア、そして実装を担当するフロントエンドエンジニアに、本当に意図したインタラクションを伝えるには、静的なデザインでは情報が圧倒的に不足しています。

FigmaのAdvanced Prototyping（変数・条件分岐・数式）は、単なるお絵描きツールだったFigmaを、実用的なステートマシン（状態機械）へと昇華させました。

この記事では、ショッピングカートの動的計算や、厳密なパスワードバリデーションをFigma上で完全にシミュレートし、実装フェーズへシームレスに引き継ぐための極限の知見を共有します。

—

1. 開発スピードを劇的に高める：隠れたキーボードショートカット

プロトタイピングの速度は、思考のスピードと直結しています。マウス操作を排除し、ショートカットを指に叩き込んでください。

—

2. 絶対に入れるべき「神プラグイン」3選

Figma標準の変数機能は強力ですが、手動で何十個ものJSONデータを流し込むのはエンジニアの仕事ではありません。以下のプラグインで自動化します。

1. Tokens Studio for Figma

概要: Design Tokensのデファクトスタンダード。GitHubとの双方向同期が可能。
現場での活用: コード側のStyle Dictionaryと連携させ、デザインシステムの色・スペーシング・数値をFigmaのVariablesに完全同期させます。

2. Advanced Variables

概要: 変数のインポート・エクスポート（CSV/JSON）や、一括置換を行うプラグイン。
現場での活用: 大量のモックデータ（商品名、価格、在庫数）を一瞬でFigmaの変数に流し込みます。

3. Prototyping Inspector

概要: 画面全体にあるインタラクションと変数の依存関係をグラフ可視化するツール。
現場での活用: 誰が作ったか分からないスパゲッティ状態のプロトタイプをデバッグする際、バグの温床を一発で特定できます。

—

3. 実践：ショッピングカートの動的計算ロジックの実装

「商品の数量を変更すると、小計、消費税、合計金額がリアルタイムで変動する」という、ECサイトでは当たり前のインタラクションをFigma上で実装します。

ステップ1：変数の定義 (Variables)

Variablesパネルで以下の変数を作成します。

`cart_item_price` (Number): `2500` （単価）
`cart_quantity` (Number): `1` （数量）
`cart_subtotal` (Number): `expression` を用いて計算 (`cart_item_price cart_quantity`)

ステップ2：コンポーネントへのバインド

テキストレイヤーを選択し、右サイドバーの「Text」プロパティの右側にある変数アイコン（◇のようなマーク）から、`cart_subtotal` をバインドします。

ステップ3：条件分岐と数式を使ったアクションの設定

「＋」ボタンをクリックした際のアクションに、以下を設定します。

[On] Click
[Set variable] cart_quantity = cart_quantity + 1
[Set variable] cart_subtotal = cart_item_price cart_quantity

これだけで、ボタンを押すたびにFigmaがリアルタイムで計算を行い、UIの数値を書き換えます。もはやエンジニアへの「こういう動きです」という口頭説明は不要です。

—

4. 実践：リアルタイム・パスワードバリデーションの実装

次は、セキュリティ要件の厳しいフォームで必須となる、条件付きバリデーションのシミュレーションです。

要件

8文字以上であること
大文字を含んでいること
数字を含んでいること

実装アプローチ

Figmaには正規表現エンジンはありませんが、ネストされた条件分岐（Condition）を駆使することで、これに近い挙動を再現できます。

[On] Text change (入力フィールド)
[Conditional] If input_text.length >= 8
[Set variable] err_length = false
[Else]
[Set variable] err_length = true

[Conditional] If err_length == false AND err_number == false
[Set variable] is_form_valid = true
[Else]
[Set variable] is_form_valid = false

エラーメッセージ用のテキストレイヤーの「Layer Visibility（表示/非表示）」を変数 `err_length` にバインドしておけば、入力文字数に応じてエラー表示がダイナミックに切り替わります。

—

5. チーム開発で役立つ設定の共有化ルール

変数やプロトタイプをチーム全体（デザイナー＋エンジニア）でスケールさせるためのガバナンスルールです。

1. 命名規則（Naming Convention）の厳格化

スコープごとにプレフィックスを必ず付与する。
グローバル： `global/`
カート機能固有： `feature/cart/`
フォーム固有： `component/form/`

2. モード（Modes）を活用したデザインシステムの多言語・テーマ対応

Light / Dark モードだけでなく、`Jp` / `En` の言語モードもVariablesのModesで管理し、プロトタイプ上で言語切り替えを検証可能にする。

3. VariablesのSource of Truth（真実の情報源）の定義

Figma内の変数を勝手に変更させず、後述するJSONファイルを起点としたCI/CDパイプラインでFigmaへ同期するフローを構築する。

—

6. 実用的な設定ファイル（JSON）のベストプラクティス構成例

デザインシステムやトークンをコードベースからFigmaへ、あるいはFigmaからコードベースへエクスポートする際に準拠すべき、洗練されたJSONの構造体です。W3C Design Tokens Community Group (DTCG) のフォーマットに準拠させておくと、後々のエンジニアリングコストが激減します。

{
“$schema”: “https://design-tokens.github.io/community-format/format.json”,
“global”: {
“cart”: {
“itemPrice”: {
“$value”: 2500,
“$type”: “number”,
“$description”: “標準商品のベース単価（JPY）”
},
“taxRate”: {
“$value”: 0.10,
“$type”: “number”,
“$description”: “消費税率（インボイス制度対応）”
}
},
“validation”: {
“minLength”: {
“$value”: 8,
“$type”: “number”,
“$description”: “パスワードの最小文字数セキュリティ要件”
}
}
}
}

—

結びにかえて

FigmaのAdvanced Prototypingをここまで使い倒すエンジニアやデザイナーは、まだ少数派です。しかし、この領域を制したチームは、「仕様書の行き違い」「実装後の手戻り」「要件定義の解釈のズレ」という、ソフトウェア開発における最大の時間泥棒を根絶することができます。

デザインは、もはや「見た目」を定義するだけのフェーズではありません。振る舞い（Behavior）までをコードレスで定義し、エンジニアへ最高品質のコンテキストを渡すこと。それが、真のプロダクトデザインエンジニアリングです。

今日のスプリントから、あなたのFigmaファイルを「動く仕様書」へとアップデートしてください。チームの生産性は、確実に次のステージへ飛躍します。