概要
TalkToFigmaは、Cursor、Claude Code、その他のAIエージェントとFigmaを連携させるMCP（Model Context Protocol）統合ツールです。Grabが開発した本ツールにより、AIエージェントがFigmaのデザインを読み取り、プログラムで修正・更新できるようになりました。
主な機能
- 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統合です。MCPエコシステムをさらに拡張したい場合はMCP Manager：MCPサーバー 作り方から一元管理まで対応するAIアシスタント統合管理ツールも参照してください。また、CursorやClaude Codeのワークフロー全体を最適化するにはcc-sessions：Claude Code 使い方を極める開発セッション管理フレームワーク完全ガイドとの組み合わせが効果的です。Cursor、Claude Code、その他のMCP対応AIツールから直接Figmaを操作でき、設計から実装までの一連の流れを同一のAIコンテキスト内で完結できます。既存のFigma→コード生成ツールは変換後の手作業が必要ですが、本ツールはAIが設計要件を理解した上で、必要に応じてデザインを修正し、最適なコード生成を行う点が革新的です。MCPプロトコル標準化により、将来的にあらゆるAIエージェントとの連携拡張も容易です。
こんな人におすすめ
-
フロントエンドエンジニア: Figmaの手動確認作業から解放され、実装に集中できるようになります。デザイン→コード変換の自動化で開発速度が2倍以上向上します。
-
スタートアップの開発チーム: デザイナーが少ない環境で、限られたリソースを最大限活かせます。自動コード生成により、少人数でも高速にプロダクト開発を進められます。
-
デザインシステム担当者: コンポーネント仕様書やドキュメントの自動生成で、メンテナンス負荷が大幅に減ります。デザイン変更時の手作業が不要になり、常に最新のドキュメントを保つことができます。
-
QAエンジニア/テスター: 設計値とコードの自動バリデーションにより、デザイン仕様違反を素早く検出できます。品質チェックの効率化と精度向上が同時に実現します。
-
プロダクトマネージャー: AIを活用したデザイン→実装の自動化で、機能開発のリードタイム短縮が実現します。仮説検証のサイクルが高速化され、プロダクト改善の意思決定がより迅速になります。