a2a mcp
Back to MCP Servers
OpenCode Figma MCP logo
mcp-server345

OpenCode Figma MCP

AIエージェントとFigmaを接続するMCPサーバーで、デザインからコードへのワークフロー、アセット抽出、リアルタイムUI自動化を可能にします。

XFacebookLinkedInRedditHacker News
OpenCode Figma MCP preview

概要

OpenCode Figma MCPは、デザインと自動化のギャップを埋めるために設計されたModel Context Protocol（MCP）サーバーです。AIエージェントがFigmaファイルと直接対話できるようになり、レイアウトの読み取り、コンポーネントの抽出、ビジュアルデザインを構造化データに変換することで、コード生成やワークフロー自動化に利用できます。

デザインを手作業で確認したりアセットをエクスポートする代わりに、開発者やAIエージェントはFigmaをプログラム的にクエリでき、デザインシステムを機械可読なコンテキストとしてアクセス可能になります。

特徴

  • 🎨 Figma連携: APIを通じてFigmaファイルやプロジェクトに直接接続
  • 🤖 MCP対応: MCPクライアントやエージェントフレームワークで動作
  • 🧩 コンポーネント抽出: フレーム、レイヤー、スタイル、コンポーネントを取得
  • 🖼️ アセットアクセス: 画像、アイコン、デザインアセットをプログラム的にエクスポート
  • 🔍 構造化クエリ: レイアウト階層、間隔、タイポグラフィ、色に関する問い合わせ
  • ⚡ デザインからコード対応: 構造化されたデザインデータをコード生成パイプラインへ供給

動作原理

  1. 個人アクセストークンを使用してFigma APIに接続
  2. MCPサーバーをローカルまたは自社インフラで実行
  3. エージェントがMCP経由でクエリを送信（例：「このフレーム内の全ボタンを取得」）
  4. サーバーが構造化されたデザインデータで応答
  5. 下流ツールがこのデータをコード生成、テスト、UI自動化に利用

ユースケース

  • 🧑‍💻 デザインからコードパイプライン: FigmaレイアウトをReact、Vue、HTMLコンポーネントに変換
  • 🧪 UIテスト自動化: 自動テスト用のセレクターとレイアウト情報を抽出
  • 📚 デザインシステム分析: ファイル間の間隔、タイポグラフィ、一貫性を監査
  • 🤖 自律エージェント: AIエージェントがUIデザインを理解・操作できるように
  • ⚙️ ワークフロー自動化: デザイン更新を開発パイプラインに同期

重要性

Figmaのようなデザインツールは、伝統的に開発ワークフローから分離されています。OpenCode Figma MCPは、デザインデータをAIシステムにとってクエリ可能かつ実用的にすることで、これを変えます。

これにより新しい自動化層が解放され、エージェントがコードを読み取るだけでなく、背後にあるビジュアル構造も理解できます。

開始方法

  • GitHubからリポジトリをクローン
  • Figma APIトークンを設定
  • MCPクライアントをサーバー接続に設定
  • AIエージェントを通じてデザインデータのクエリ開始

制限

  • Figma APIアクセスと適切な権限が必要
  • 性能はファイルサイズとAPIレート制限に依存
  • デザインをプロダクション対応コードにマッピングするには追加のロジックが必要

結論

OpenCode Figma MCPは、デザインとAI駆動開発の間の強力な橋渡しです。Figmaを構造化コンテキストとして公開することで、UIを推論できる（生成だけではない）新世代のツールとエージェントを可能にします。

Tags

MCPFigmaデザインからコードAIエージェント

Related Entries

Keep exploring similar tools and resources in this category.

Browse MCP Servers
TinyFish logo

TinyFish

MCP Servers

TinyFishは、MCP互換のAIアシスタントにWeb自動化、Web検索、コンテンツ抽出、リモートブラウザセッションツールを提供します。ホスト型MCPサーバーはOAuth 2.1を使用し、オプションのローカル@tiny-fish/mcpプロキシは、ローカル専用、CI、ヘッドレス設定向けにAPIキー認証をサポートします。

TinyFish logo

TinyFish

MCP Servers

TinyFishは、AIエージェント向けのWebインフラストラクチャプラットフォームであり、ライブWeb検索、ブラウザでレンダリングされたコンテンツ抽出、目標ベースのWeb自動化、および管理されたクラウドブラウザセッションを組み合わせています。開発者は、API、SDK、CLI、エージェントフレームワークやAIコーディングツールとの統合を通じてプラットフォームにアクセスできます。

X MCP logo

X MCP

MCP Servers

X MCP は、MCP 互換の AI ツールから X API エンドポイントを呼び出すための、X 公式のホスト型 Model Context Protocol サーバーです。xurl ブリッジを通じて OAuth のユーザーコンテキストを扱い、投稿検索、ユーザー検索、ブックマーク、トレンド、ニュース、Articles などのワークフローに利用できます。

Crunchbase MCP logo

Crunchbase MCP

MCP Servers

Crunchbase MCP is Crunchbase's official first-party remote MCP server for live company, funding, investor, people, acquisition, and predictive private-market intelligence. Interactive access uses a Crunchbase account with an assigned MCP seat and OAuth 2.1 authentication.

viewmax mcp logo

viewmax mcp

MCP Servers

ViewMax MCP is a hosted Streamable HTTP MCP server for generating AI video, images, music, speech, and sound effects, with tools for model discovery, task polling, and credit checks. Official setup is documented for Claude Web/Desktop, Claude Code, Cursor, Codex, and SDK clients.

TinyFish logo

TinyFish

MCP Servers

TinyFish exposes web automation, web search, content extraction, and remote browser-session tools to MCP-compatible AI assistants. The hosted MCP server uses OAuth 2.1, while an optional local @tiny-fish/mcp proxy supports API-key authentication for local-only, CI, and headless setups.