こんにちは！ourlyでエンジニアをしている自称天使の大天使カリンエルです（@archkrnel）
この記事は「開発生産性コミュニティD-Plus🐬 Advent Calendar 2025 25日目」の投稿です🎄🎅
はじめに
Figma MCP ServerとClaudeを組み合わせれば、Figma上のデザインを参照してコードを生成できます。しかし、実際に試してみると 「Figmaデータの品質」に出力結果が大きく左右される という課題に直面します。
Auto Layoutやグルーピングが適切に設定されていない精度低めのFigmaデータを渡すと、Claudeは構造を正しく理解できず、レイアウト崩れや意図しない要素の配置が発生します。
そこで、「Figma Make」を中間処理として挟むアプローチを試したところ、データの質が多少悪くても、意図通りの実装を得られることが分かりました。
Figma MCP活用ハードルが下がり、ちょっとした修正の繰り返しが減るので、作業的にも気持ち的にも開発生産性爆アガりです！！！
本記事では、デザイン修正もプロンプト調整もせず、ツール利用の工夫だけでデザイン実装精度を高める手法を紹介します。
Figma MCPとFigma Makeについて
Figma MCPとは
Figma MCP (Model Context Protocol) は、AIエージェントに対し、Figma上のデザイン文脈（レイヤー構造、変数、スタイルなど）を正確に共有するための接続プロトコルです。
活用タイミング： デザイン参照させてコードに変換する際
Figma Makeとは
Figma Make は、自然言語のプロンプトから機能的なプロトタイプやWebアプリを「ゼロから生成・編集」できるAIツールです。React+Tailwindでコードを生成するため、プロトタイプとしては使えるが、プロジェクトのコードにそのまま使えない場合があります。
活用タイミング： 新規でデザイン・プロトタイプを作る際
Figma MCP+Claudeで実装した場合の課題
FigmaデザインデータをFigma MCPを使って参照させ、Claudeで実装した場合、以下のような課題に直面しました：
-
デザインの差異
レイアウト崩れや、アイコンが変わっている、配置が絶妙に違い「なんか思ってたのと違う...?」という状態に。
これはFigmaデザインデータの質に左右される部分です。 -
修正の繰り返し
上記の差異を整えるため結局Claudeに何度も修正させることになってしまった
「Figma Make」を中間処理で使う
ここで重要な発見がありました。Figma MakeのデータはFigma MCPで参照できるのです。
通常、Figma Makeは自然言語やFigmaデザインファイルから動くデザインを作成するツールとして使われます。
しかし今回は、その生成結果を最終成果物にするのではなく、「Claudeにデザイン構造を伝えるための翻訳機」 として利用します。
ワークフロー
-
Figma Makeでデザインを生成
- 雑なFigmaデータをFigma Makeに渡す
- Figma Makeがデザインを「いい感じ」に整えてくれる
-
Figma MCPで参照
- 生成されたFigma MakeのデータをFigma MCPで参照
- デザインデータが雑でも、Figma Makeが整えてくれているため、構造化されたデータとして扱える
-
Claudeで実装
- Figma MCPで参照したデータを基に、Claudeでコードを実装
- デザインの意図が正確に伝わるため、修正の繰り返しが減る
実際に試してみた
実際に、Auto Layoutやグルーピングが適切に設定されていない構造化が不十分なFigmaデータを使って、2つのアプローチでコード生成を試してみました。
「HTML/CSS/JSで作成して」という雑な指示でそれぞれどのようになるのかを確認してみます。
使用したFigmaデザインデータ
下記のような特徴を持つ、見た目はそれっぽいテスト用のFigmaデザインを用意しました。
- Auto-layoutが使われていない箇所がある
- 不必要なフレームのネスト
- 繰り返し要素がコンポーネント化されていない
- 不要な非表示レイヤーが残っている
A. Figma Makeを経由させない：Figma MCP + Claudeで直接実装
指示内容：
@{該当Figmaデータのリンク}
このFigmaデザインを参考にし、HTML/CSS/JSでサイトを作成し
て
1~2分ほどで完成
結果：
- レイアウト崩れが発生
- 要素の配置が意図と異なる
Figma MCP + Claudeで作成
B. Figma Makeを経由させる：Figma Make → Figma MCP + Claude
- Figma Makeで作成
指示内容：
{該当Figmaデータのリンク}
このFigmaデザインを参照しサイトを作成して
うまく生成できなかった場合は、細かく修正を加えるより、指示内容を変えて新規に生成し直す方が早かったりします。
Figma Makeで作成
- Figma MCP + Claude で作成
指示内容：
@{該当Figma Makeのリンク}
Figma Makeを参考にし、HTML/CSS/JSでサイトを作成して
もし取得できないと返答された場合は「ソースコード」を取得するように伝えます。
こちらは8分ほどで完成。気持ち時間はかかります。
結果：
- Figma Makeがデザインを「いい感じ」に整えてくれた
- レイアウト崩れは発生しなかった
Figma Make → Figma MCP + Claudeで作成
（参考）生成されたコードについて
コードの精度については、簡単な指示しかしていないためどちらも叩き台的なコードではありました。
また、指示の仕方によっても生成されるものが変わるので、一概な特徴とはいえないため、参考程度に記載します。
A. Figma Makeを経由させない場合
ファイル構成
- HTML/CSS/JSを3ファイルに分離
- CSSは:rootで変数（トークン）を定義
HTML/CSS
- クラス名: .global-nav, .nav-tab, .article-list
- アクティブ状態はCSS疑似要素(::after)で表現
- コンテナの最大幅は未指定
アセット
- ロゴはFigma API経由で画像取得
- サムネイルはグレーのプレースホルダー
- アイコンはシンプルな汎用SVG
JavaScript
- タブ切替機能あり
- 検索機能あり（alertでデモ）
- 記事カードにホバーエフェクトあり
- スムーズスクロール実装あり
- 記事データは静的HTML
B. Figma Makeを経由させる場合
ファイル構成
- 1つのHTMLファイルにCSS/JSをインライン
- CSS変数は未使用（直接値指定）
HTML/CSS
- クラス名: .header, .nav-link, .pickup-list
- アクティブ状態は実DOM要素(<div class="nav-indicator">)で表現
- コンテナの最大幅は835pxに制限
アセット
- ロゴはインラインSVGで直接描画
- サムネイルはUnsplashの実画像
- アイコンはFigmaから取得した詳細なSVG
JavaScript
- 記事データをJSオブジェクトで定義
- 記事・カテゴリを動的にレンダリング
- タブ切替・検索・ホバー効果はなし
まとめ
構造化が不十分なFigmaデータでも、Figma Makeを中間処理として挟むことで、デザイン修正もプロンプト調整もせずに、レイアウト崩れのない実装を簡単に生成できることがわかりました。
下記のような場合に使うことができます。
- デザインを完璧に整える余裕がない場合
- スタイルの反映が絶妙に上手くいかなくて「違う、そうじゃない」となった場合
最初に記載しましたが、Figmaデザインデータを適切に構造化し、MCPで取得して事前に設定した生成ルールに則ってプロダクトコードに変換するのがベストではあります。
ですので、余裕がない時や少しだけ実装を試してみたい場合などにFigma Makeを活用していだくのが良いかと思います！
少しでも皆様の生産性向上活動のお役に立てれば幸いです。ここまで読んでいただきありがとうございました！
（補足）
ちなみに、Figma Makeでは下記のようにコンポーネントだけ小さく生成することも可能です。
大きく作るより小さい部品に分けたほうが精度の高いものが生成できるのでこちらの方が活用機会がありそうです...！
Discussion