Figma — 设计协作与交付

从设计到代码，无缝衔接

Figma 是全球数百万团队使用的行业标准设计工具。借助 Figma MCP 服务器，你的 AI 代理可以读取设计文件、提取组件、拉取设计令牌，并生成生产级代码——在几分钟内将静态设计稿变为鲜活的应用程序。

• 文件读取：通过 URL 解析任意 Figma 文件。高保真提取画框、组件和自动布局结构。
• 设计令牌：将颜色、字体、间距和阴影作为结构化令牌拉取，直接同步到你的代码库中。
• 组件提取：识别可复用组件，生成像素级还原设计稿的 React/Vue/Tailwind 代码。
• 设计转代码：将整个屏幕转换为响应式布局。AI 代理负责编写标记、样式，甚至交互逻辑。

配置

"mcpServers": {
  "figma": {
    "command": "npx",
    "args": ["-y", "@mcp/figma-server"],
    "env": { "FIGMA_ACCESS_TOKEN": "your-personal-access-token" }
  }
}

在 Figma 的「设置 → 安全 → 个人访问令牌」中生成个人访问令牌。

热门用法

1. "读取这个 Figma 文件 [URL]，生成一个使用 Tailwind CSS 的响应式 React 组件。"
2. "从这个 Figma 文件中提取所有设计令牌，写入我项目中的 tokens.json 文件。"
3. "将 Figma 设计与我当前的实现进行对比，列出所有视觉差异。"
4. "将 Figma 组件库转换为 Storybook 项目，并为每个组件编写文档。"