はじめに

最近話題の 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 ガイドラインと連携できれば、かなり実用的になりそうなので、やってみたいと思います。

引き続き検証して、また記事にしたいと思います！

参考