コンテンツにスキップ
非エンジニアのためのVibeCoding入門

Figmaのデザインをコードにする(＋自社トークンの持ち込み)

この章でわかること: 手元の Figmaのデザインを、どうやってコードにするか。 そして、自社で育ててきた Figmaの変数(デザイントークン)をAIに持ち込み、「これだけ使って」と縛るやり方。 デザインシステムの章はデジタル庁のデザインシステム(DADS)を例に説明しましたが、 ここでは主役をあなたの会社のデザインに置き換えます。

まず、AIにFigmaを「どう渡すか」の3択

Section titled “まず、AIにFigmaを「どう渡すか」の3択”

AIはあなたのFigmaファイルを勝手に覗けません。こちらから情報を渡す必要があります。 渡し方は大きく3つ。それぞれ「手軽さ」と「正確さ」が逆立ちの関係にあります。

渡し方何を渡す向いている場面弱点
(a) スクリーンショット(Vision)見た目の画像まず雰囲気を形にしたい・単発色や余白の正確な数値は推測になる
(b) Dev Modeの書き出しCSSや変数の値(テキスト)数値まで正確に起こしたい手作業のコピペ、画面単位で手間
(c) Figma連携(MCP)構造データを直接読ませる継続的に・大きな画面を正確に設定と認証が必要、発展的

(a) スクリーンショット(Vision)— 一番手軽

Section titled “(a) スクリーンショット(Vision)— 一番手軽”

Figmaの画面をスクショで撮り、「このデザインに寄せて作って」と貼るだけ。 Vision(画像を読み取ってコードに起こす力)を使う方法で、最初の一歩に最適です。 ただしAIは画像から色や余白を目分量で推測するので、#0055FF のはずが微妙に違う、 といったズレが出ます。詳しい渡し方のコツは画像・ブランド素材の渡し方にあります。

(b) Dev Modeの書き出し — 数値を正確に

Section titled “(b) Dev Modeの書き出し — 数値を正確に”

Figmaには Dev Modeという、デザイナーの作ったものを開発者向けに「仕様書」として見せるモードがあります。 要素を選ぶと、色・余白・フォントサイズといった正確な数値やCSSが表示され、コピーできます。 このテキストをAIに渡せば、推測ではなく実際の値でコードを起こせます。 スクショが「写真」なら、Dev Modeは「材料の分量が書かれたレシピ」だと思ってください。

(c) Figma連携(MCP)— 継続するなら本命

Section titled “(c) Figma連携(MCP)— 継続するなら本命”

MCPという仕組みでAIエディタをFigmaにつなぐと、スクショやコピペを介さず、 Figmaの構造データ(レイアウト・コンポーネント・変数)を直接読み取れるようになります。 毎回手で渡す手間が消え、大きな画面でも精度が保てるのが強みです。 設定・認証が必要な発展的な方法なので、仕組みと導入はMCPで道具を増やすにまとめています。

「コードになりやすいFigma」を作っておく

Section titled “「コードになりやすいFigma」を作っておく”

同じデザインでも、Figmaの作り方次第でAIの精度は大きく変わります。 料理でいえば、食材が整理された台所ほど手早く正確に作れるのと同じ。上流を整えると、下流(コード)が楽になります。

  • Variables(変数)で色・余白を定義する: #0055FF を直接塗るのではなく、color/primary のような名前の付いた変数にしておく。AIは「この色には意味がある」と理解でき、コード側の変数とも対応づけやすくなります。
  • Auto Layout(オートレイアウト)を使う: 要素を手で並べるのではなく「縦に並べ、間隔は16」といった規則で配置する。この規則がそのまま flex や gap などのレイアウトコードに翻訳されます。
  • 一貫した命名にする: レイヤーやコンポーネントの名前をバラバラにしない。btn_1 ボタンコピー2 のような命名は、AIにとっても人間にとっても迷子のもとです。

自社のトークンを持ち込んで、AIを縛る

Section titled “自社のトークンを持ち込んで、AIを縛る”

ここが本題です。デザインシステムの章で見た 3層の一番下——トークン層を、 DADSではなく自社のFigma Variablesで用意し、AIに使わせます。手順の骨格はこうです。

  1. 書き出す: Figma Variablesを、プラグインなどで JSON(tokens.json) として書き出す。あるいは Dev Mode 上で変数の値を確認し、開発側の設定ファイルに写します。
  2. コードが使える形に変換する: 書き出したJSONを Style Dictionary のようなツールに通すと、CSS変数・tailwind.config・各種プラットフォーム向けの形へ一括変換できます。「デザイナーの言葉」を「開発者の言葉」へ翻訳する両替所のような役割です。
  3. AIに読ませて縛る: できた tokens.css や tailwind.config をAIに渡し、**「このトークンだけを使え。デフォルトの色や任意の16進数は禁止」**と制約する。

なぜ大事か

Section titled “なぜ大事か”

デザイナーにとって、Figmaで詰めた判断がコードで崩れるのは一番つらい瞬間です。 渡し方(スクショ / Dev Mode / MCP)を場面で選び分け、さらに自社トークンを持ち込んでAIを縛ると、 「なんとなく似ている」ではなく「意図どおり」のコードが返るようになります。 DADSはあくまで分かりやすい公開例。ここで身につけた流れを、そのまま自社のデザインシステムに当てはめてください。 渡し方の実務は画像・ブランド素材の渡し方、連携の設定はMCPで道具を増やすへ続きます。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”