Figmaの「Variables（変数）」でプロトタイプを劇的に進化させる。静的なデザインからの脱却
こんにちは。現場で日々、デザインとコードの境界線を溶かしているエンジニアです。
かつて、私たちは「動くプロトタイプ」を作るために、何百枚ものフレームを線で繋ぎ、少しの修正で地獄のような再構築を繰り返していました。しかし、Figmaの「Variables（変数）」が登場したことで、その時代は終わりました。
変数は単なる「値の保存場所」ではありません。デザインシステムを論理的に駆動させるためのエンジンのようなものです。今回は、この強力な機能を使いこなし、言語切り替えやダークモードの実装、さらには動的な計算までをノーコードで実現する方法を伝授します。
—
1. 変数（Variables）とは何か？その本質
これまでFigmaで色や数値を管理する際は「Styles（スタイル）」を使っていましたが、スタイルは「固定値」です。対して変数は「動的な状態」を保持します。
- スタイル： 「このボタンは青色」という静的な定義。
- 変数： 「このボタンの色は、現在のモード（Light/Dark）によって変化する」という動的な定義。
この違いを理解するだけで、あなたのプロトタイプは「絵」から「アプリケーション」へと進化します。
—
2. 【セットアップ】最初のステップ
まずは、変数を定義して、それがどう動くかを確認する「Hello World」ならぬ「Hello Variables」をやってみましょう。
手順：
1. 右サイドバーの「Local variables」をクリック： 何も選択していない状態で右側のパネルにある調整アイコン（四角が4つ集まったもの）をクリックします。
2. 変数の作成： `Create variable` を押し、`Color` を選択します。
3. 名前と値を設定： 名前を `bg-primary`、値を `#FFFFFF` に設定します。
4. モードの追加： 右上の「+」ボタンを押し、`Dark Mode` という列を追加します。
5. 値を割り当て： `Dark Mode` の列に、背景色として `#1A1A1A` などの暗い色を指定します。
これで、あなたのデザインには「モードに応じた色の切り替えロジック」が埋め込まれました。
—
3. 実践：モード切替を実装する
作成した変数を使い、スイッチ一つでダークモードに切り替わるUIを作りましょう。
1. フレームへの適用： メインのフレームを選択し、右サイドバーのFill設定で、先ほど作った `bg-primary` 変数を選択します。
2. プロトタイプ設定：
- スイッチ用のボタンを作成し、`Prototype` タブへ移動。
- `On click` トリガーで `Change variable mode` を選択。
- ターゲットにメインフレームを指定し、`Dark Mode` を選択します。
これだけで、プレビュー上でのリアルタイムなテーマ切り替えが完成です。 実装コストはゼロ。これがFigmaの力です。
—
4. 高度なテクニック：条件分岐（Conditional）と数値計算
ここからが本番です。プロトタイプ上で「カウンター」や「条件による表示切り替え」を実装します。
カウンターの実装（数値計算）
1. 変数で `Number` 型の `count` を作成し、初期値を `0` にします。
2. テキストレイヤーに `count` 変数を紐付けます。
3. ボタンの `On click` アクションで `Set variable` を選択。
4. `count` を `count + 1` に設定します。
条件分岐（Conditional）
「値が10を超えたらアラートを出す」といったロジックも可能です。
- `On click` アクションで `Conditional` を追加。
- `if count > 10`
- `set alert-visible to true`
といった風に、まるでプログラミングのような制御が可能です。
—
5. なぜ、これがエンジニアとデザイナーの連携を加速させるのか？
この変数の最大の価値は、「エンジニアとデザイナーが同じ言語（ロジック）で会話できること」にあります。
デザイナーが変数を適切に設計しておけば、エンジニアはその変数をそのままコードのCSS変数やTailwindのConfigとしてインポートできます。「プロトタイプで動いたロジックが、そのまま実装の仕様になる」。このシームレスな体験こそが、開発効率を劇的に向上させる鍵です。
プロのアドバイス
初心者のうちは、「すべての色や数値を変数化しようとしない」ことがコツです。まずは「モード切り替え」や「頻繁に変わる数値」といった、論理的な意味を持つ箇所から変数化してみてください。
—
最後に：さあ、触ってみよう
Figmaの変数機能は、最初は難しく感じるかもしれません。しかし、一度ロジックを組んでしまえば、もう二度と「修正のために何十枚もフレームを書き直す」という作業には戻れなくなります。
プロトタイプは、ただの確認ツールではありません。あなたのアイデアが「正しく動くか」を検証するための、最も信頼できるテストベッドです。
ぜひ今日、小さなボタン一つから「変数」を取り入れてみてください。あなたのデザインが、息を吹き始めるはずです。
何か分からないことがあれば、またいつでも聞きに来てくださいね。あなたの挑戦を応援しています！