Figma MCP Pro

🚀 Figma MCP PRO

Figma MCP PROは、AI最適化されたFigmaデザイン分析のためのプロフェッショナルなモデルコンテキストプロトコル（MCP）サーバーです。スマートなコメント処理とアセットダウンロードを備えた、包括的なデザインからコードへの変換を行うためのシンプルな5ステップのワークフローを提供します。

🚀 クイックスタート

Figma MCP PROを使うことで、AI最適化されたFigmaデザイン分析を行い、デザインからコードへの変換を効率的に行うことができます。

✨ 主な機能

• 5ステップのワークフロー：フレームワーク選択 → デザインデータ → コメント → アセット → 参照分析
• AI最適化：AIコード生成用に特別にフォーマットされた構造化データ
• 10種類のフレームワークサポート：React、Vue、Angular、Svelte、HTML/CSS/JS、SwiftUI、UIKit、Electron、Tauri、NW.js
• スマートコメント：デザイナーのコメントをUI要素に座標ベースでマッチング
• アセットダウンロード：Figmaの元のエクスポート設定で一括ダウンロード
• CSS生成：Figmaのプロパティ（パディング、マージン、ボーダー、エフェクト）から自動的にCSSを生成

📦 インストール

npm install -g figma-mcp-pro

⚙️ クイックセットアップ

1. Figma APIキーを取得する

Figmaアカウント設定 → 個人用アクセストークンからAPIトークンを取得します。

2. MCP設定をコピーして貼り付ける

📋 以下のコードブロックのコピーボタンを使用して、your-api-key-here を実際のAPIキーに置き換えます。

{
  "mcpServers": {
    "Figma MCP PRO": {
      "command": "npx",
      "args": ["figma-mcp-pro@latest", "--figma-api-key", "your-api-key-here"],
      "env": {
        "DEBUG": "true"
      }
    }
  }
}

設定ファイルの場所：

• Claude Desktop：claude_desktop_config.json
• Claude Code (VS Code)：VS CodeのMCP設定
• Cursor, Windsurf, TRAE：アプリケーションのMCP設定

📚 ドキュメント

コアツール

show_frameworks

利用可能なフレームワークを表示します。最初に呼び出して、ターゲットフレームワークを選択します。

get_figma_data

フレームワーク固有の処理でAI最適化されたデザインデータを抽出します。

• 入力：Figma URL + フレームワーク
• 出力：デザイン構造、CSSプロパティ、レイアウトデータ

process_design_comments

AI実装プロンプトを使って、デザイナーのコメントをデザイン要素にマッチングします。

• 入力：Figma URL + フレームワーク
• 出力：アクショナブルな指示付きのコメントと要素のマッピング

download_design_assets

Figmaの元の設定と参照画像を使って、エクスポート可能なアセットをダウンロードします。

• 入力：Figma URL + ローカルパス
• 出力：アセットファイル + ビジュアルコンテキスト用のreference.png

check_reference

デザイン理解と開発ガイダンスのために、reference.pngを分析します。

• 入力：アセットフォルダのパス + フレームワーク
• 出力：デザイン分析とフレームワーク固有の開発推奨事項

🎯 得られるもの

デザインデータ

• レイアウト：パディング、マージン、ギャップ、自動レイアウトプロパティ
• スタイリング：色、ボーダー、シャドウ、エフェクト、タイポグラフィ
• 構造：コンポーネント階層、セマンティックロール
• レスポンシブ：柔軟なサイズ、制約、ブレークポイント

スマートコメント

• 座標マッチング：コメントを特定のデザイン要素にリンク
• AI指示：「ボタンコンポーネントにホバーアニメーションを追加する」
• 実装コンテキスト：要素の詳細 + 位置

アセットダウンロード

• エクスポート設定：Figmaの設定されたエクスポート設定を尊重
• 元の名前：実際のノード名をファイル名として使用
• ビジュアル参照：reference.pngで完全なデザインコンテキストを表示
• 複数の形式：SVG、PNG、JPG、PDFをサポート

🌟 フレームワーク最適化

• React：TypeScript、Hooks、カスタムHooks、パフォーマンス最適化
• Vue：Composition API、TypeScript、Piniaストア、コンポーザブル
• Angular：スタンドアロンコンポーネント、Signals、最新のテンプレート、TypeScript
• Svelte：Svelte 5のルーン、TypeScript、SvelteKit、ストア
• HTML/CSS/JS：デザイントークン、最新のCSS、アクセシビリティ第一
• SwiftUI：ステート管理、MVVM、アクセシビリティ、最新のパターン
• UIKit：最新のコンカレンシー、SwiftUIとの相互運用性、自動レイアウト
• Electron：セキュリティ強化、IPCパターン、ネイティブ統合
• Tauri：Rustコマンド、イベントシステム、セキュリティ、WebView
• NW.js：統一コンテキスト、Node.js統合、Chromium API

📄 ライセンス

MITライセンス

🆘 サポート

• 問題報告：GitHub Issues
• NPM：figma-mcp-pro