Repolode
投稿する
southleft

southleft/figma-console-mcp

AIアシスタントをFigmaに接続し、デザイントークンの抽出、デザインの作成・編集、デザインとコードの整合性チェック、アクセシビリティチェックを行うMCPサーバーです。

代替できる製品:Figma Dev Mode

GitHub で見る公式サイト
スター
3,196
フォーク
293
未解決の Issue
9
最終コミット
9 日前

これは何？

Figma Console MCPは、Claude、Cursor、CodexなどのAIクライアントにFigmaファイルを公開するModel Context Protocolサーバーです。変数、コンポーネント、スタイル、ファイル構造を読み取れるほか、Figma Desktop上で動作するDesktop Bridgeプラグインを通じて、フレームやコンポーネントの作成、変数やモードの管理、テキスト、塗り、レイアウトの編集内容をFigmaに反映できます。

基本的な読み書きに加えて、デザインシステム関連の作業にも対応しています。Figmaの変数とDTCG JSONや複数のトークン形式を双方向に同期し、Figmaのコンポーネントとコード実装を照合し、WCAGスタイルのアクセシビリティチェックを実行し、コンポーネントのドキュメントを生成できます。ツールはトークン、バリアント、バインディングなどの構造化データを返すため、生成コードにチーム独自の技術スタックを反映できます。

すべての書き込み機能を利用するには、Node.js上で動作し130個のツールを提供するNPXまたはLocal Gitのセットアップが必要です。Cloud Modeでは、Node.jsなしでClaude.aiなどのWeb AIクライアントを起動中のプラグインに接続でき、105個のツールを利用できます。Remote SSEエンドポイントは読み取り専用です。

主な機能

  • 01AIで利用するために、Figmaの変数、コンポーネント、スタイル、ファイル構造を読み取る
  • 02Figmaでフレーム、コンポーネント、テキスト、塗り、Auto Layoutを作成・編集する
  • 03デザイントークンをDTCG JSON、CSS、Tailwindなどの形式と双方向に同期する
  • 04Figmaのコンポーネントとコード実装を比較し、差異を報告する
  • 05WCAGベースのアクセシビリティチェックと、コンポーネントのアクセシビリティスコアカードを実行する
  • 06Claude Code、Cursor、Windsurf、Claude Desktop、Codex、Gemini CLIで利用できる

ユースケース

  • AIアシスタントにFigmaファイル内でUIモックアップやコンポーネントを直接生成させる
  • チーム内でFigmaの変数とコードのデザイントークンを同期した状態に保つ
  • 承認前に、コード化されたコンポーネントがFigmaのデザインと一致しているか確認する
  • 命名、トークン、アクセシビリティに関する問題がないかデザインシステムを監査する

クイックスタート

  1. 1

    FigmaヘルプからFigmaの個人用アクセストークンを取得します

  2. 2

    npxを使ってMCPクライアントにサーバーを追加します（Claude Codeの例）

    claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest
  3. 3

    Figma DesktopでDesktop Bridgeプラグインのマニフェストをインポートして実行します

  4. 4

    設定を読み込むため、MCPクライアントを再起動します

使う前に知っておきたいこと

  • すべての機能を利用するには、Figma DesktopとDesktop Bridgeプラグインの接続が必要です。
  • Remote SSEモードは読み取り専用で、デザインの作成や変更はできません。
  • variablesなど、一部の機能にはFigma Enterpriseプランが必要です。

収録されている特集

オープンソースの AI エージェント・フレームワークとアプリMCP サーバー

トピック

#figma#mcp#design-system#design-tokens#ai-agent#accessibility#typescript#ai#design-systems#figma-api

よくある質問

figma-console-mcp とは？
AIアシスタントをFigmaに接続し、デザイントークンの抽出、デザインの作成・編集、デザインとコードの整合性チェック、アクセシビリティチェックを行うMCPサーバーです。 Figma Console MCPは、Claude、Cursor、CodexなどのAIクライアントにFigmaファイルを公開するModel Context Protocolサーバーです。変数、コンポーネント、スタイル、ファイル構造を読み取れるほか、Figma Desktop上で動作するDesktop Bridgeプラグインを通じて、フレームやコンポーネントの作成、変数やモードの管理、テキスト、塗り、レイアウトの編集内容をFigmaに反映できます。
figma-console-mcp は無料で使えますか？ライセンスは？
figma-console-mcp は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
figma-console-mcp は今もメンテナンスされていますか？
活発にメンテナンス中。figma-console-mcp の最終コミットは 2026年10月29日 です。
figma-console-mcp は何に使えますか？
AIアシスタントにFigmaファイル内でUIモックアップやコンポーネントを直接生成させる チーム内でFigmaの変数とコードのデザイントークンを同期した状態に保つ 承認前に、コード化されたコンポーネントがFigmaのデザインと一致しているか確認する 命名、トークン、アクセシビリティに関する問題がないかデザインシステムを監査する
figma-console-mcp のインストール方法は？
FigmaヘルプからFigmaの個人用アクセストークンを取得します npxを使ってMCPクライアントにサーバーを追加します（Claude Codeの例）: claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest Figma DesktopでDesktop Bridgeプラグインのマニフェストをインポートして実行します 設定を読み込むため、MCPクライアントを再起動します
figma-console-mcp はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/southleft/figma-console-mcp

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト