southleft/figma-console-mcp

何を解決するか

Figma Console MCP は、AIアシスタント（例：Claude）とFigmaの間で双方向的なブリッジを提供し、デザインシステムをAPIとして扱います。AIがデザイントークンを読み取り、UIコンポーネントを作成し、デザインとコードの整合性およびアクセシビリティについて決定論的な検証を行うことで、設計とコードの間の手作業のギャップを解消します。

動作方法

このプロジェクトは Model Context Protocol (MCP) を実装しており、AIエージェントが複数の接続モードでFigmaとやり取りできるようにしています。

• ローカルモード (NPX/Git): デスクトップブリッジプラグインを通じて接続し、完全な書き込みアクセスとリアルタイム監視（コンソールログ、選択状態の追跡）を提供します。
• クラウドモード: WebSocketリレーを介して、Web上のAIクライアント（例：Claude.ai や v0）からのコマンドをFigmaデスクトッププラグインに転送します。
• リモートSSE: ローカルインストールなしでデザインデータを探索するための読み取り専用接続です。

Figma REST API と Figma Plugin API の組み合わせを使用して、変数、コンポーネント、レイアウトを管理しています。

対象ユーザー

• コンポーネント、フレーム、レイアウトの自動生成にAIを活用したいデザイナー
• コードにデザイントークンを抽出する必要がある、またはコードベースのスタイルをFigmaに同期したい開発者
• デザインシステムの健全性、アクセシビリティ（WCAG）、Figmaとプロダクションコードの整合性を維持することに注力するデザインエンジニア

主な特徴

• 双方向同期: Figmaの変数を複数のJSON形式にエクスポートしたり、コード側の編集をFigmaにプッシュできます。
• デザイン作成: AIプロンプトを通じてFigma内でUIコンポーネント、フレーム、レイアウトを直接作成できます。
• 健全性監査: 名前付け、トークン、アクセシビリティ、一貫性について、Lighthouse風のスコア付き監査を実施。
• デザイン-コード整合性: Figmaコンポーネントとそのコード実装を決定論的に比較。
• アクセシビリティスキャン: 14のWCAG設計チェックを実施し、適合タグとコンポーネントスコアカードを提供。
• バージョン認識: 二分探索によるブレームでプロパティの変更履歴を追跡し、Markdown形式の変更ログを生成。