figma/mcp-server-guide

解决的问题

本项目提供了一个 Model Context Protocol (MCP) 服务器，允许 AI 编程代理直接访问 Figma 设计数据。通过为代理提供必要的上下文（如布局、组件和变量），缩小设计与代码之间的差距，从而生成与设计系统“单一真理来源”相匹配的高保真代码。

工作原理

该服务器充当 Figma 与 MCP 兼容客户端（如 VS Code、Cursor 和 Claude Code）之间的中间媒介。当用户向 AI 代理提供 Figma URL 时，代理会使用 MCP 服务器提取特定的节点 ID 并提取结构化的设计数据。服务器提供诸如 get_design_context（返回 React + Tailwind 表示）和 get_variable_defs（提取颜色和间距等设计令牌）之类的工具。

适用对象

使用 AI 代理将 Figma 设计转换为生产级代码，同时保持与现有设计系统一致的产品团队、开发人员和设计师。

亮点

• 双向交互：支持从 AI 客户端直接读取设计上下文并写入原生 Figma 内容（框架、组件、变量）。
• Code Connect 集成：允许代理重用实际的代码库组件而不是进行猜测，从而确保一致性。
• 多客户端支持：为 VS Code (通过 GitHub Copilot)、Cursor、Claude Code 和 Gemini CLI 提供即插即用的配置。
• Web-to-Design：能够通过 AI 代理将网页捕获并转换为 Figma 设计。
• 工作流技能：包含将 UI 录制转换为故事板以及将 PRD 转换为 FigJam 项目计划的独立技能。