使用说明
FIGMA MCP 服务器
注释
-
Figma MCP Server 能够更好地遵循您的设计，而非使用默认的 CSS 和 JS 框架及库（如 Tailwind、ShadcnUI、React、TypeScript）。
-
使用默认库和框架会使清理工作以及使用自己的设计系统变得困难，代码往往会变成一团乱麻般的“意大利面条式代码”。
-
Figma MCP服务器充当您Figma设计文件与AI编码助手之间的桥梁，为AI提供结构化数据，如组件、变量和布局信息，而不仅仅是截图。
-
这使得人工智能工具能够生成更准确、更相关的代码，以符合设计系统的要求。服务器获取设计中的结构化数据，如组件、变量和样式，并将其暴露给人工智能代理。
-
模型上下文协议（MCP）使人工智能代理能够访问更广泛的能力集合，从而让AI能够生成符合您团队既定设计模式和代码库的代码，而不是依赖于对截图的视觉解释以及默认的库和框架。这确保了生成的代码不仅功能正常，而且在语义上与设计的意图和特定的设计令牌保持一致。
-
这有助于生成更精确、更高效的代码，使代码与现有项目和设计系统保持一致，从而弥合设计与代码之间的鸿沟。
过程
- 截至2025年10月23日 Figma帮助中心 说：
The Figma MCP server is currently in open beta. Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta period. Usage guidelines and rate limits will be announced when our MCP server is generally available.
*** Who can use this feature***
Available on a Dev or Full seat on the Professional, Organization, or Enterprise plans
You must use a code editor or application that supports MCP servers (i.e. VS Code, Cursor, Windsurf, Claude Code)
设置MCP服务器有两种方法
根据您的需求，Figma MCP Server 可以用作 remote 或者 local desktop server。
本地桌面MCP服务器： 在您的本地机器上通过（某种方式）运行 Figma桌面应用程序这很好用于 个人设备上的工作流程，
远程MCP服务器： 直接连接到Figma托管的终端，地址为https://mcp.figma.com/mcp。这样更好 分布式团队或自动化流程。
设置本地桌面Figma MCP服务器
- 开放 Figma 桌面应用程序 确保您使用的是最新版本
- 启动Figma，选择你的项目（你的设计系统和原型所在的项目），然后进入
DEV MODE
- 在切换到（某个界面/选项时）出现的右侧面板中
DEV Mode定位/找到Enable desktop MCP server
-
在检查面板的MCP服务器部分，点击
Enable desktop MCP server。 -
弹出一个对话框。请确保您已选择了您偏好的代码编辑器，并仔细阅读。点击
+ ADD如果您想启用它或手动添加，请按照列出的步骤操作。
- 在你的VS Code中，会出现一条确认消息，询问你是否要安装Figma MCP服务器。
安装后，Figma Server 将出现在您的 VS Code 扩展列表中，位于 MCP SERVERS - INSTALLED 部分。
提示
-
来自Figma开发者网站的这一部分 它有一个关于如何提示MCP服务器的部分。默认输出使用的是Tailwind和React，但你可以通过提示明确地自定义输出。
