Figma × MCP を試してみた｜自動実装の精度を検証してみる

# はじめに

最近話題の 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](https://github.com/GLips/Figma-Context-MCP) に記載されている方法ではうまくいかなかったため、以下のように設定しました（ここで少し詰まりました……）。

```json
{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "figma-developer-mcp",
      "args": ["--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
```

# MCP × Figma の使い方

## 1. 対象デザインの URL を取得

Figma 上で対象のコンポーネントやフレームを選択し、「選択範囲へのリンクをコピー」で URL を取得します。

![](https://storage.googleapis.com/zenn-user-upload/09e59083ff26-20250406.png)

## 2. 画面実装

Cursor の Agent モードで、取得したデザイン URL を元に指示を出して画面を実装していきます。

このとき、`cursor_rules` を活用して、技術スタックや使用する UI ライブラリ（今回は Element Plus）を明記しておくと、より精度の高い実装が可能でした。

![](https://storage.googleapis.com/zenn-user-upload/f515e28f77cd-20250406.png)

# 結果

比較画像とあわせて、それぞれのケースごとの所感をまとめました。  
※ ちなみに MCP × Figma の結果は「一発出し」、スクショ添付の方はエラーが出て何度かやり直しが必要でした。

## ① 簡単な入力フォーム

- どちらもあまり差はなかったように思いますが、両者とも Figma のデザインと若干ズレがありました（ボタンが左寄せ、アドレスのラベルが改行される など）。
- 見た目はスクショ添付の方が少し整っている印象。
- どちらも自動でバリデーションまで追加されていたのはびっくりでした。

### Figma のデザイン

![](https://storage.googleapis.com/zenn-user-upload/716e5f7fd955-20250406.png)

### MCP × Figma で生成した画面

![](https://storage.googleapis.com/zenn-user-upload/8af4eec8eb15-20250406.png)

### スクショ添付で生成した画面

![](https://storage.googleapis.com/zenn-user-upload/9c309b5def8f-20250407.png)

## ② 少し複雑なケース

- こちらもデザインから少しズレはありました（ボタンの左寄せやフォーム幅など）。
- ただ大きく違うのは MCP × Figma はデザインと同じくラベルとフォームが横並びで、スクショ添付は縦並びになっていました。

デザイン的にはどちらも問題ないと思いますが、精度面では MCP × Figma にやや軍配が上がりそうです。

### Figma のデザイン

![](https://storage.googleapis.com/zenn-user-upload/7583befee7bf-20250406.png)

### MCP × Figma で生成した画面

![](https://storage.googleapis.com/zenn-user-upload/b43e1ec962eb-20250406.png)

### スクショ添付で生成した画面

![](https://storage.googleapis.com/zenn-user-upload/5dd1e3219928-20250407.png)

## ③ もっと複雑なケース

ここで明確な差が出ました。

- スクショ添付の方は、色々と要素が不足していました（検索カードやテーブルのデータ量など）。
- またアクション列のボタンがプライマリーボタンに変わっています。
- 一方でテーブルのカラム幅が適切に設定されていたのは良かったですが、制度面ではダメですね、、

デザインから少しズレはありましたが MCP × Figma の方が精度が高く出力されたことが分かります。

### Figma のデザイン

![](https://storage.googleapis.com/zenn-user-upload/5d784f60c24f-20250406.png)

### MCP × Figma で生成した画面

![](https://storage.googleapis.com/zenn-user-upload/c0e3b02b88ba-20250406.png)

### スクショ添付で生成した画面

![](https://storage.googleapis.com/zenn-user-upload/dc86374873ed-20250407.png)

# 所感

- 結論として Figma × MCP の方が精度高く画面が実装され、スクショ添付とは違いエラーも無く一発出しで実装されたのは驚きだった。
- ただ細かい点に関してはうまくできていないので、人間の手が必要そうだなと思いました。
- Figma のデザインをどう解釈してコードに落とし込んでいるのか、内部ロジックが気になるのでソースコードを深掘りたいと思いました
- ボタンが全体的に左寄せになっていたので、これは Figma デザインの作り方によるものな気がしてきた。要検証です。

# 最後に

複雑な UI でどこまで精度を保てるか（実際のプロダクト開発でも使えるか）は今後の検証が必要だと感じました。
所感にも書いていますが、Figma MCP のソースコードの確認や Figma のデザインの作り方についても深堀る価値がありそうです。

また、以下の記事にもあるように、社内のデザインシステムや UI ガイドラインと連携できれば、かなり実用的になりそうなので、やってみたいと思います。

https://zenn.dev/ubie_dev/articles/f927aaff02d618

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

# 参考

https://zenn.dev/superstudio/articles/91ceb2f2f1d784

https://zenn.dev/oke331/articles/97d5de75f06fb3

https://qiita.com/Nakamura-Kaito/items/bda2003313fa33f4d818

https://github.com/GLips/Figma-Context-MCP?tab=readme-ov-file