southleft/figma-console-mcp
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
あなたの設計システムをAPIとして活用しましょう。AIをFigmaに接続して抽出、作成、デバッグを行います。
概要
設計と開発を橋渡しするモデルコンテキストプロトコルサーバーで、AIアシスタントにFigmaへの完全アクセスを提供します。 figma_import_tokens現在、真のコードのために、完全なdiffプラン(作成、リネーム、エイリアス再ターゲティング、置き換えゲート削除)を適用します→Figmaの往復、エクスポートはリクエストに応じてDTCG 2025.10で話す(オプトイン、レガシーのデフォルトバイトは同一);スコープ/コード構文は往復処理;figma_setup_design_tokensはエイリアス値を受け入れます。新しいfigma_create_component_setは、1回の呼び出しで軸行列から完全なバリアントセットを構築します。(code.js + ui.html変更)。新しい情報をご覧ください→ Figma Console MCPは、AIアシスタント(Claudeのような)をFigmaに接続し、以下を可能にします: - - 変数、コンポーネント、スタイルの取得 - - Figma変数をDTCG JSON(レガシーまたは2025.10方言)+さらに9つのフォーマットにエクスポート;コード側の編集をFigmaにフル適用で返す — 作成、名前変更、エイリアス再ターゲット、削除の置き換え。Style DictionaryおよびTokens Studioのエクスポートパイプラインを置き換える。
概要（AI 翻訳）
あなたの設計システムをAPIとして。 Figmaのためのデザインシステムに焦点を当てたモデルコンテキストプロトコルサーバーです。両方向(Figma⇄コード)で動作し、Figmaに書き込み、設計コードのパリティ、アクセシビリティ、設計システムの健全性に関する決定論的チェックを実行します。AIにフレームワークやハウススタイルを規定するのではなく、構造化されたデータとして正確なトークン、バリアント、バインディング、状態を渡すため、生成コードはチーム独自のスタックや慣習に従います。
** 🆕 精度と安全性の修正(最新v1.40.9):** v1.40.0のDesign System Extraction以降、コミュニティレポートによる9つのパッチが実施されました。生成されたコンポーネントドキュメントは、すべてのバリアントを正確に記述しています — 背景、隠しレイヤーとそれを示すプロパティ、コーナーごとの半径と境界トークン、バリアント間のタイポグラフィやレイヤー構造、コミットにピン留めされたソースリンクなど。
figma_export_tokens]は間違ったFigmaファイルからトークンファイルを上書きできなくなり、拡張変数コレクションの上書きが見え、最小/最大サイズはすべてのJSON抽出パスで残り、色は不透明度のエクスポート&インポート時にリンクを保持したまま別の色に設定され、公開されたパッケージはnpm auditをきれいに通過します。
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Figma Console MCP Server
Your design system as an API. A design-system-focused Model Context Protocol server for Figma. It works in both directions (Figma ⇄ code), writes to Figma, and runs deterministic checks for design-code parity, accessibility, and design-system health. It hands the AI exact tokens, variants, bindings, and states as structured data rather than prescribing a framework or house style, so generated code follows your team’s own stack and conventions.
🆕 Shaders, grid and auto layout, OKLCH and P3 color, text wrap and variable fonts (latest v1.46.0): apply shaders and set their properties by name (
figma_apply_shader,figma_list_shaders), set auto layout or grid layout in one call with CSS-style grid tracks (figma_set_layout), use OKLCH, Display P3 and other CSS colors on fills and strokes, and set text wrap (balance, pretty) and variable-font axes withfigma_set_text(v1.46.0). v1.45 added Motion: animate layers with presets, custom animation styles or keyframes bound to Timing and Easing tokens, export video, and find code layers. See what’s new →
What is this?
Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
- 🎨 Design system extraction - Pull variables, components, and styles
- 🧬 Codebase → design system extraction - Scan a production codebase, mine its de-facto styling into DTCG tokens with per-token provenance, scaffold a design-system package with a wired Storybook workshop, and gate it with deterministic fidelity evals — then round-trip the tokens into Figma variables (Local Mode)
- 🔁 Bidirectional token sync - Export Figma variables to DTCG JSON (legacy or 2025.10 dialect) + 9 more formats; push code-side edits back to Figma with full apply — creates, renames, alias re-targeting, and replace-gated deletes. Replaces Style Dictionary and Tokens Studio’s export pipeline.
- 📸 Visual debugging - Take screenshots for context
- ✏️ Design creation - Create UI components, frames, and layouts directly in Figma — including one-call component-set creation from a variant axes matrix
- 🔧 Variable management - Create, update, rename, and delete design tokens
インストール
npx -y figma-console-mcp@latest設定
{
"mcpServers": {
"figma-console": {
"command": "npx",
"args": ["-y", "figma-console-mcp@latest"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
"ENABLE_MCP_APPS": "true"
}
}
}
}