Figmaで「本物」を超える：Conditional Logicで構築する究極のEコマース・プロトタイピング術
こんにちは。UI/UXの世界へようこそ。
デザインツールを「絵を描く道具」だと思っていませんか？もしそうなら、今日でその認識をアップデートしましょう。FigmaのConditional Logic（条件分岐）を使いこなせば、プロトタイプは単なる「画面遷移の紙芝居」から、エンジニアがコードを書く前にロジックを検証できる「動的なプロダクト」へと進化します。
今回は、Eコマースにおける「カート機能」を題材に、この魔法のような機能を深掘りしていきます。
—
1. なぜ「Conditional Logic」がプロトタイピングの限界を突破するのか
従来のプロトタイプは「Aを押せばBに飛ぶ」という静的な接続が限界でした。しかし、実際のEコマースでは「個数を変えると合計金額が変わる」「在庫が0ならボタンが無効化される」といった状態（State）の管理が不可欠です。
Conditional Logicを導入する最大のメリットは、「エンジニアとの仕様齟齬を、開発前に100%潰せること」です。画面遷移図では見えないエッジケース（例：カートが空の時の表示、上限数に達した時のアラート）を、Figma上で直接体験・検証できる。これが、最高峰のプロダクト開発における共通言語なのです。
—
2. 準備：最も重要な基礎セットアップ
まずは、Figmaの「変数（Variables）」をセットアップしましょう。これがロジックの心臓部です。
1. 変数の作成:
- 右サイドバーの「Local Variables」を開きます。
- `cartCount` (Number): 初期値 0
- `itemPrice` (Number): 例 1000
- `totalPrice` (Number): 初期値 0
- これらを作成することで、画面上のテキストが「値」に紐づくようになります。
2. テキストのバインド:
- カートの合計金額を表示するテキストレイヤーを選択し、右サイドバーの「Text」セクションにある「Apply variable（変数適用）」から `totalPrice` を選択します。これで、変数の値が変われば画面の数字も自動で書き換わります。
—
3. 実践：カート機能を動的に構築する
では、実際に「＋ボタン」を押した時に、数量が増え、金額が計算されるロジックを組みましょう。
手順：インタラクションの構築
1. 「＋ボタン」を選択し、「Prototype」タブへ。
2. 「+」をクリックしてインタラクションを追加。
3. Conditional（条件分岐）を選択し、以下のロジックを記述します。
// プロトタイプのロジック設定（擬似コード的表現）
// 1. カウントを増やす
cartCount = cartCount + 1;
// 2. 合計金額を更新
totalPrice = cartCount itemPrice;
// 3. もし個数が10個を超えたら警告を出す（エッジケースのシミュレーション）
if (cartCount > 10) {
// アラート用のフレームを表示するアクション
set Variable alertVisible to true;
}
この設定により、ユーザーがボタンを押すたびに、Figma内でリアルタイムに計算が行われます。
—
4. ユーザーテストで「震えるほど」役立つリアルな挙動
ユーザーテストで「カートが空の時はどうなりますか？」と聞かれた時、わざわざ画面を作って遷移させる必要はありません。
- 動的な表示切り替え:
`cartCount == 0` の時だけ「カートは空です」というフレームを表示し、それ以外は隠す（Boolean変数で制御）。
これだけで、ユーザーは「本当に買い物をしている」ような感覚を覚えます。この「没入感」こそが、テストから質の高いフィードバックを引き出す鍵なのです。
—
先輩エンジニアからのアドバイス：習得のコツ
初心者のうちは、最初から複雑なロジックを組もうとせず、まずは「変数を1つだけ変えて、画面の文字が変わる」というHelloWorld的な実装から始めてみてください。
1. ボタンを置く。
2. 変数 `count` を作成。
3. ボタンを押すと `count = count + 1` になるように設定。
4. テキストに `count` を紐付ける。
この最小の成功体験こそが、プロトタイピングの技術を習得する最短ルートです。
最後に
Figmaは単なるデザインツールではありません。あなたのアイデアが「動く体験」に変わる、最強のキャンバスです。今日学んだConditional Logicは、あなたの設計思想をエンジニアへ、そしてユーザーへとダイレクトに伝えるための「魔法の杖」になるはずです。
さあ、次はあなたの番です。まずは「＋ボタン」を一つ、動かしてみるところから始めてみましょう。これからの作業が劇的に楽しくなることを、私が約束します。