Figma Mcp Pro

Figma MCP PRO

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

🚀 主な機能

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

📦 インストール

Smithery 経由でのインストール

Smithery 経由で Claude Desktop 用に figma-mcp-pro を自動的にインストールするには:

npx -y @smithery/cli install @artemsvit/figma-mcp-pro --client claude

手動インストール

npm install -g figma-mcp-pro

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

1. Figma API キーの取得

Figma Account Settings → Personal access tokens から 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 指示: 「Button コンポーネントにホバーアニメーションを追加する」
• 実装コンテキスト: 要素の詳細 + 配置

アセットのダウンロード

• エクスポート設定: Figma で設定されたエクスポート設定を尊重
• 元の名前: 実際のノード名をファイル名として使用
• 視覚的リファレンス: reference.png が完全なデザインコンテキストを表示
• 複数フォーマット: SVG、PNG、JPG、PDF に対応

🌟 フレームワークの最適化

• React: TypeScript、Hooks、カスタム Hooks、パフォーマンス最適化
• Vue: Composition API、TypeScript、Pinia ストア、Composables
• Angular: スタンドアロンコンポーネント、Signals、モダンテンプレート、TypeScript
• Svelte: Svelte 5 runes、TypeScript、SvelteKit、ストア
• HTML/CSS/JS: デザイントークン、モダン CSS、アクセシビリティファースト
• SwiftUI: 状態管理、MVVM、アクセシビリティ、モダンパターン
• UIKit: モダン並行処理、SwiftUI 相互運用、Auto Layout
• Electron: セキュリティ強化、IPC パターン、ネイティブ統合
• Tauri: Rust コマンド、イベントシステム、セキュリティ、WebView
• NW.js: 統合コンテキスト、Node.js 統合、Chromium API

📄 ライセンス

MIT ライセンス

🆘 サポート

• Issues: GitHub Issues
• NPM: figma-mcp-pro