はじめに
最近話題の Figma × MCP を試してみました！
具体的には Figma のデザインを元に「MCP × Figma で生成した画面」、「スクショ添付で生成した画面」で比較して、精度がどれほどのものか検証しました！
普段から業務でも Figma を使用しており、社内の画面設計にも活用しています。
「Figma ファイルからコードを自動生成って、どれくらいの精度なんだろう？」と気になり、自宅で検証を兼ねて試してみました。
実行環境
- Figma 無料版
- Windows 11
- cursor 0.48
Figma MCP とは
Figma MCP は、AI が Figma のデザインデータに直接アクセス・理解・操作できるようにする仕組みです。
Figma-MCP サーバーを通じて、ファイルやコンポーネント、スタイル情報にアクセス可能になり、正確なコード変換や UI 実装の自動化を支援します。
これにより、Figma 上のデザインを AI コーディングツール（例：Cursor）と連携させることで、手作業による実装を効率化し、一貫性のある UI コンポーネントを高速に生成できるのが大きなメリットです。
手順
手順に関しては他の記事でも詳しく紹介されているので、ここでは割愛します。
ただ、Windows の場合は、Figma-Context-MCP に記載されている方法ではうまくいかなかったため、以下のように設定しました（ここで少し詰まりました……）。
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "figma-developer-mcp",
"args": ["--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
MCP × Figma の使い方
1. 対象デザインの URL を取得
Figma 上で対象のコンポーネントやフレームを選択し、「選択範囲へのリンクをコピー」で URL を取得します。
2. 画面実装
Cursor の Agent モードで、取得したデザイン URL を元に指示を出して画面を実装していきます。
このとき、cursor_rules を活用して、技術スタックや使用する UI ライブラリ（今回は Element Plus）を明記しておくと、より精度の高い実装が可能でした。
結果
比較画像とあわせて、それぞれのケースごとの所感をまとめました。
※ ちなみに MCP × Figma の結果は「一発出し」、スクショ添付の方はエラーが出て何度かやり直しが必要でした。
① 簡単な入力フォーム
- どちらもあまり差はなかったように思いますが、両者とも Figma のデザインと若干ズレがありました（ボタンが左寄せ、アドレスのラベルが改行される など）。
- 見た目はスクショ添付の方が少し整っている印象。
- どちらも自動でバリデーションまで追加されていたのはびっくりでした。
Figma のデザイン
MCP × Figma で生成した画面
スクショ添付で生成した画面
② 少し複雑なケース
- こちらもデザインから少しズレはありました（ボタンの左寄せやフォーム幅など）。
- ただ大きく違うのは MCP × Figma はデザインと同じくラベルとフォームが横並びで、スクショ添付は縦並びになっていました。
デザイン的にはどちらも問題ないと思いますが、精度面では MCP × Figma にやや軍配が上がりそうです。
Figma のデザイン
MCP × Figma で生成した画面
スクショ添付で生成した画面
③ もっと複雑なケース
ここで明確な差が出ました。
- スクショ添付の方は、色々と要素が不足していました（検索カードやテーブルのデータ量など）。
- またアクション列のボタンがプライマリーボタンに変わっています。
- 一方でテーブルのカラム幅が適切に設定されていたのは良かったですが、制度面ではダメですね、、
デザインから少しズレはありましたが MCP × Figma の方が精度が高く出力されたことが分かります。
Figma のデザイン
MCP × Figma で生成した画面
スクショ添付で生成した画面
所感
- 結論として Figma × MCP の方が精度高く画面が実装され、スクショ添付とは違いエラーも無く一発出しで実装されたのは驚きだった。
- ただ細かい点に関してはうまくできていないので、人間の手が必要そうだなと思いました。
- Figma のデザインをどう解釈してコードに落とし込んでいるのか、内部ロジックが気になるのでソースコードを深掘りたいと思いました
- ボタンが全体的に左寄せになっていたので、これは Figma デザインの作り方によるものな気がしてきた。要検証です。
最後に
複雑な UI でどこまで精度を保てるか（実際のプロダクト開発でも使えるか）は今後の検証が必要だと感じました。
所感にも書いていますが、Figma MCP のソースコードの確認や Figma のデザインの作り方についても深堀る価値がありそうです。
また、以下の記事にもあるように、社内のデザインシステムや UI ガイドラインと連携できれば、かなり実用的になりそうなので、やってみたいと思います。
引き続き検証して、また記事にしたいと思います！
参考