Figma MCP + Cursorで変わるフロントエンド開発。デザインからコード生成を効率化する実践ガイド

Figma

Cursor

AIエージェント

上村季輝

2026年05月11日

はじめに

初めまして。
株式会社メンバーズの上村季輝です。

案件によっては、Figmaでデザインを貰ってフロントを実装することがあります。
そんな時に人力でFigmaのスタイルを参照しながら実装するのはかなり労力がかかるため、Figma MCPとAIエディタのCursorを組み合わせたフロント実装を実践してみました。

今回の記事ではFigma MCPとAIエディタを使ったフロントの実装方法と具体的なプロンプト例、そして実践で得られた知見を共有します。

実装・導入手順

Figma MCPについて

Figma MCPは公式で以下が用意されています。

デスクトップMCPサーバー
- Figmaデスクトップアプリを通じてローカルで実行する
- 有料プランでかつDev or フルシート権限で可能
リモートMCPサーバー
- Figmaのホストエンドポイント https://mcp.figma.com/mcp に接続する
- 全てのプラン・シートで可能

今回の例ではリモートMCPサーバーの例をまとめていきます。

MCPの設定

2026年4月現在、CursorでFigma MCPを使うならプラグインを導入するのが最速です。
Figmaの「Remote server | Developer Docs」にある通り、Agentチャットに以下のコマンドを入力してください。

/add-plugin figma

マニュアル操作で設定するのであれば以下の手順を参考にしてください。

Cursor Settings > Tools & MCP > New MCP Server からMCP設定ファイルを開く
MCP設定ファイル（mcp.json）にて以下を追加

{
  "mcpServers": {
    "Figma": {
      "url": "https://mcp.figma.com/mcp",
      "headers": {}
    }
  }
}

Figmaが開くのでアクセスを許可する

MCPを使う

PlanモードやAgentモードで以下のプロンプトを入力したら必要なタイミングでMCPを使ってくれます。
デフォルトではMCPを使う際にユーザーの許可を求めるので内容を確認して都度許可してください。

<タスク内容が書かれたコンテキストを添付>
- 添付したタスクチケットを読み込んで実装してください。
- このタスクはFigmaの内容を読み取って実装します。
- <前提（実装言語等）>
- <具体的な実装内容、補足>
- <実装上の注意事項>
- Figmaのリンクは以下です。
<Figmaのリンク>

実際にプロンプトを入力する時は、前提、実装内容、注意事項の部分はコンテキストとして別ソースに分けた方が良いと思います。

レビュー&修正する

大規模・複雑なデザインになればなるほど1回目の実行で上手く実装してもらえなくなります。
最大でもセクション毎に実装してもらうのが良いと思います。

1回目の実行で上手くいかなくても、割り切ってフィードバックしていきましょう。
出力されたコードを読んだり、実際の動作を見たりして不満な部分をAIエージェントに入力してください。

レビューの方法としては人それぞれですが、完璧を目指すのであればFigmaからフレームごと画像を出力して相違点を見つけるのが手っ取り早いです。
フォントスタイルやスペーシングなどの実数値は、具体的な数字を提示することで精度が向上します。

満足するところまでレビューと修正を反復したら実装完了です。

調査結果

Figma MCP + Cursorを使った実装は、使い方次第でかなり開発体験もスピードも向上して良さげだと思いました。
注意点として、Cursorで様々なモデルで試した時にAutoモデルの精度が微妙でした。
処理の途中でFigmaの詳細情報が抜け落ちているのかもしれないです。

実践上、良かった点と微妙だった点を以下に記載したので参考にしてみてください。

✅GOOD

複雑なデザインであればあるほど、人力でスタイルを参照しながらやるよりも圧倒的に早い
複雑なデザインでも1回目の実行で7〜8割くらいは確実に実装される印象
パターン化されたデザインには強い（既存実装も参照できるので）
コンテキストをちゃんと書けていればレビュー・修正の反復回数は減らせる

❌BAD

シンプルなデザインだと流石に人力の方が早いこともある
入力する情報が大きすぎたり、コンポーネントのネストが深いと細部の情報が抜け落ちる
指示が明確でないと不要な修正をしてしまう
画像は人が用意してあげた方が確実

まとめ

PCレイアウト/SPレイアウトでDOMの構成が変わったりするデザインの場合は、先にDOMを定義させてからスタイルを付けていくと上手くいく印象があります。
大きく一度にやるよりも、ある程度分割して実装していけば、精度も確保できてスピードも出やすいです。
結局のところ、必要な情報が渡せているかどうか、AIを使うことに適した状況かによって開発体験が大きく変わってくると思います。

皆さんも、Figmaに限らずMCPとAIエージェントを組み合わせて作業効率向上を目指してみてください！