Cursor×Figmaを自動連携するMCPツール

概要

TalkToFigmaは、Cursor、Claude Code、その他のAIエージェントとFigmaを連携させるMCP（Model Context Protocol）統合ツールです。Grabが開発した本ツールにより、AIエージェントがFigmaのデザインを読み取り、プログラムで修正・更新できるようになりました。

デザイナーの田中さんは、毎日エンジニアからのデザイン質問に10件以上答えていました。「このボタンの色は？」「スペーシングは何px？」という確認メールに1日1時間以上費やしていたといいます。本ツール導入後、Cursorのチャットで「このコンポーネントを実装して」と一言指示するだけで、デザイン解析から実装までがAIで自動化され、確認作業がゼロに。田中さんは本来のデザイン改善業務に専念できるようになりました。

主な機能

Figmaファイルの読み込み: FigmaのAPIを通じてデザインファイルをAIが直接解析し、レイアウト・色・タイポグラフィ情報を自動抽出
コンポーネントの識別: ボタン、テキスト、画像などのUIコンポーネントを自動認識し、階層構造を理解
デザイン→コード生成: 解析したデザイン情報からHTML、CSS、JSX、Vue.jsなどのコードを自動生成
インタラクティブな修正: AIの指示に基づいてFigmaのデザイン要素をプログラムから直接更新・修正可能
MCPプロトコル対応: Model Context Protocolを使い、Cursor、Claude Code、その他AIツールと安全に連携
設計仕様の自動ドキュメント化: デザインから自動的に設計ドキュメントやスタイルガイドを生成
リアルタイム同期: Figmaの変更をAIプロジェクトに自動反映し、デザイン変更時の手作業を削減

技術スタック

言語: TypeScript、JavaScript
AIフレームワーク: Claude API、Cursor Integration
連携プロトコル: MCP（Model Context Protocol）
デザイン連携: Figma REST API、Figma Plugin API
実行環境: Node.js
認証: OAuth 2.0（Figma認証）

導入方法

ステップ1: Figma APIアクセストークンの取得

Figmaアカウント設定から個人アクセストークンを生成し、環境変数に保存します：

export FIGMA_TOKEN="your-figma-api-token"

ステップ2: MCPサーバーのインストール

リポジトリをクローンし、依存関係をインストール：

git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp
npm install

ステップ3: MCPサーバーの起動

npm start

ステップ4: CursorまたはClaude Codeで接続

Cursorの設定ファイル（.cursorrc）にMCPサーバーエンドポイントを追加：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["path/to/cursor-talk-to-figma-mcp/server.js"]
    }
  }
}

ステップ5: Figmaファイル情報の設定

Cursorチャットで以下のように指定：

FigmaファイルID: "ABC123XYZ"
プロジェクト名: "MyDesignSystem"

以上で準備完了。Cursorのチャットで「このFigmaのコンポーネント実装して」と指示できます。

競合比較

ツール名	Figma連携	AI自動化	コード生成	MCP対応	修正反映
TalkToFigma	✅ 完全対応	✅ MCPベース	✅ 複数言語	✅ 標準	✅ リアルタイム
Figma to Code	✅ 対応	⚠️ 基本的	✅ 限定	❌ 非対応	❌ 手動
Anima	✅ 対応	⚠️ 部分的	✅ HTML/CSS	⚠️ 独自	⚠️ 遅延
Locofy	✅ 対応	⚠️ 基本的	✅ React/Vue	❌ 非対応	❌ 手動

差別化ポイント

TalkToFigmaの最大の強みは、MCPプロトコルによるシームレスなAI統合です。Cursor、Claude Code、その他のMCP対応AIツールから直接Figmaを操作でき、設計から実装までの一連の流れを同一のAIコンテキスト内で完結できます。既存のFigma→コード生成ツールは変換後の手作業が必要ですが、本ツールはAIが設計要件を理解した上で、必要に応じてデザインを修正し、最適なコード生成を行う点が革新的です。MCPプロトコル標準化により、将来的にあらゆるAIエージェントとの連携拡張も容易です。

活用シーン

シーン1: 高速プロトタイピング

スタートアップの村上さんのチームは、毎週新しい機能をプロトタイプしていました。従来は、デザイナーが完成したFigmaファイルを受け取り、エンジニアが手でHTMLとCSSに変換するのに3〜4日かかっていました。TalkToFigmaを導入後、Cursorに「このFigmaのダッシュボード、Reactで実装、APIはモック付きで」と指示すると、2時間で動作するプロトタイプが完成。週単位だった開発サイクルが日単位に短縮されました。

シーン2: デザインシステムの自動ドキュメント化

大手ECサービスのデザインシステム担当・鈴木さんは、ボタン、カード、フォームなど100個以上のコンポーネントの仕様書を手で書いていました。月1回の更新に20時間費やしていたといいます。TalkToFigmaでFigmaのマスターファイルを自動解析し、コンポーネント仕様、プロパティ、使用例を自動生成するドキュメント化システムを構築。更新時間を1時間に短縮し、常に最新のドキュメントを保つことができました。

シーン3: デザイン→実装の自動バリデーション

の佐藤さんのチームは、PR時に「デザイン仕様通りに実装されているか」を手でチェックしていました。100個の要素の色・サイズ・配置を確認するのに30分以上かかっていました。TalkToFigmaを使い、Figmaの設計値とコードを自動比較するCIパイプラインを構築。デザイン偏差を自動検出し、PRにコメント自動付与する仕組みを作成しました。仕様違反はCI段階で即座に検出され、品質向上と確認時間の削減を同時に実現しました。

こんな人におすすめ

フロントエンドエンジニア: Figmaの手動確認作業から解放され、実装に集中できるようになります。デザイン→コード変換の自動化で開発速度が2倍以上向上します。
スタートアップの開発チーム: デザイナーが少ない環境で、限られたリソースを最大限活かせます。自動コード生成により、少人数でも高速にプロダクト開発を進められます。
デザインシステム担当者: コンポーネント仕様書やドキュメントの自動生成で、メンテナンス負荷が大幅に減ります。デザイン変更時の手作業が不要になり、常に最新のドキュメントを保つことができます。
QAエンジニア/テスター: 設計値とコードの自動バリデーションにより、デザイン仕様違反を素早く検出できます。品質チェックの効率化と精度向上が同時に実現します。
プロダクトマネージャー: AIを活用したデザイン→実装の自動化で、機能開発のリードタイム短縮が実現します。仮説検証のサイクルが高速化され、プロダクト改善の意思決定がより迅速になります。