figma飞行员
](https://www.npmjs.com/package/@youware-labs/figma-pilot-mcp) 
AI代理通过代码执行来控制Figma。
英语 | 中文
演示
OpenAI登录页面
提示：“在Figma上创建一个OpenAI风格的登录页面，介绍即将发布的GPT 5.3版本”
Manus设计系统
提示：“在Figma上根据屏幕截图生成Manus设计系统组件”
设计理念
这个项目的灵感来自Anthropic的 使用MCP执行代码 方法。
figma pilot没有公开数十个单独的MCP工具（这会扩大上下文窗口并减慢代理的速度），而是提供了 只有3个工具:
| 工具 | 说明 |
|---|---|
figma_status | 检查连接状态 |
figma_execute | 使用完整的Figma API执行JavaScript代码 |
figma_get_api_docs | 获取API文档 |
AI编写代码与Figma交互。这意味着：
- 代币数量减少90%+ 在工具定义中
- 批量操作 -在一次调用中修改100个元素
- 数据过滤 -在返回上下文之前过滤结果
- 复杂的工作流程 -循环、条件、错误处理
快速开始
先决条件
- Node.js>=18
- Figma桌面应用程序
- MCP兼容的AI客户端（Claude Desktop、Claude Code、Cursor、Codex等）
1.安装MCP服务器
# Claude Code
claude mcp add figma-pilot -- npx @youware-labs/figma-pilot-mcp
# Other MCP clients - add to your MCP config:{
"mcpServers": {
"figma-pilot": {
"command": "npx",
"args": ["@youware-labs/figma-pilot-mcp"]
}
}
}配置位置：
- 克劳德桌面版:
~/.config/claude/claude_desktop_config.json（macOS/Linux） - 光标:
~/.cursor/mcp.json
2.安装技能（推荐）
这 skills/ 文件夹包含帮助AI代理使用的API文档 figma_execute 正确地。将其安装到AI客户端的技能目录中：
| AI客户端 | 技能目录 |
|---|---|
| 克劳德法典 | ~/.codex/skills/figma-pilot |
| 光标 | ~/.cursor/skills-cursor/figma-pilot |
| 克劳德桌面 | ~/.claude/skills/figma-pilot |
安装后，重新启动AI客户端以学习新技能。
3.安装Figma插件
- 下载
figma-pilot-plugin-vX.X.X.zip从 发布 - 解压缩文件
- 在Figma中： 插件>开发>从清单导入插件。..
- 选择
manifest.json从解压缩的文件夹中 - 运行： 插件>开发>figma试点
4.验证连接
问你的AI代理：
Check the Figma connection status用法示例
自然语言
Create a card with a title and descriptionAI生成什么
创建卡：
await figma.create({
type: 'card',
name: 'User Card',
children: [
{ type: 'text', content: 'Card Title', fontSize: 18, fontWeight: 600 },
{ type: 'text', content: 'Description here', fontSize: 14, fill: '#666' }
]
});批量修改元素：
const { nodes } = await figma.query({ target: 'selection' });
const rects = nodes.filter(n => n.type === 'RECTANGLE');
for (const rect of rects) {
await figma.modify({ target: rect.id, fill: '#0066FF', cornerRadius: 8 });
}
console.log(`Modified ${rects.length} rectangles`);可访问性检查：
const result = await figma.accessibility({
target: 'page',
level: 'AA',
autoFix: true
});
console.log(`Fixed ${result.fixedCount} of ${result.totalIssues} issues`);api参考
// Query & Modify
figma.query({ target }) // Query elements
figma.create({ type, ... }) // Create elements
figma.modify({ target, ... }) // Modify elements
figma.delete({ target }) // Delete elements
figma.append({ target, parent }) // Move into container
// Components
figma.listComponents() // List components
figma.instantiate({ component }) // Create instance
figma.toComponent({ target }) // Convert to component
figma.createVariants({ ... }) // Create variants
// Accessibility & Tokens
figma.accessibility({ target }) // WCAG checking
figma.createToken({ ... }) // Create design token
figma.bindToken({ ... }) // Bind token to element
// Export
figma.export({ target, format }) // Export as image完整文档： 技能/技能.md
建筑
┌─────────────┐ stdio ┌─────────────────┐ HTTP ┌──────────────┐
│ MCP Client │ │ MCP Server │ │ Figma Plugin │
│ │ │ (with bridge) │ port 38451 │ │
└─────────────┘ └─────────────────┘ └──────────────┘发展
项目结构
figma-pilot/
├── packages/
│ ├── cli/ # CLI application
│ ├── plugin/ # Figma plugin
│ ├── mcp-server/ # MCP server (npm package)
│ └── shared/ # Shared TypeScript types
├── scripts/
│ ├── install.sh # Installation script
│ └── package-plugin.sh
└── skills/ # API documentation for AI agents从源头构建
git clone https://github.com/youware-labs/figma-pilot.git
cd figma-pilot
bun install && bun run build创建发布
# Build and package
bun run build
./scripts/package-plugin.sh 0.x.x
# Publish to npm
cd packages/mcp-server && npm publish --access public
# Create GitHub release
gh release create v0.x.x dist/releases/figma-pilot-plugin-v0.x.x.zip \
--title "v0.x.x" \
--notes "Release notes here"故障排除
插件未连接
- 确保MCP服务器正在运行（检查AI客户端的MCP状态）
- 插件应在Figma中显示“已连接”
- 尝试重新打开插件
- 检查端口38451是否堵塞
端口38451已在使用中
lsof -i :38451
kill
未找到MCP服务器
对于离线使用，请全局安装：
npm install -g @youware-labs/figma-pilot-mcp插件错误：“ENOENT:没有这样的文件或目录，lstat'…/dist/main.js'”
此错误意味着 dist 插件目录中缺少文件夹。如果发生以下情况，可能会发生这种情况：
- 下载的zip文件不完整
- 您直接使用源代码，而无需构建
解决方案：
如果你有源代码，构建插件：
cd packages/plugin
bun install
bun run build或者从项目根目录构建：
bun run build:plugin构建后，验证 packages/plugin/dist/main.js 和 packages/plugin/dist/ui.html 存在，然后在Figma中再次导入插件。
许可证
麻省理工学院- YouWare实验室