设计
Figma Context
将 Figma 设计桥接到 AI 代理——读取布局、组件和设计令牌，实现设计到代码的工作流。
安装
npx -y figma-developer-mcp --figma-api-key=<YOUR_KEY>
Figma Context MCP 是星标最高的 Figma 集成（15K+），专为 AI 代理设计。它从 Figma 文件中提取设计数据——布局、组件、样式和令牌——使代理能够生成准确的、符合设计的代码。
## 功能
- 读取 Figma 文件结构和图层
- 提取设计令牌（颜色、间距、排版）
- 获取组件属性和变体
- 检索布局和定位数据
- 支持自动布局和约束信息
## 用法
```json
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_KEY>"]
}
}
}
```
## 获取令牌
1. 访问 Figma → Settings → Personal Access Tokens
2. 生成新令牌
3. 在 `--figma-api-key` 标志中使用