figma组成mcp
MCP服务器，使AI代理能够使用以下命令生成Figma屏幕 实际链接组件实例 来自你的设计系统，而不是视觉近似。
它的作用
- 读取您的设计系统 --从任何Figma文件中提取颜色、排版、效果和设计标记
- 创建真实的组件实例 --使用组件库中具有正确变体选择的链接实例
- 生成全屏 --使用正确的定位、文本和样式从实际组件中组合屏幕
- 设置原型交互 --导航、叠加、屏幕之间的转换
每个元素都与源代码设计系统保持连接。更改套件中的组件，生成的屏幕会自动更新。
建筑
AI Client (Claude, Cursor, etc.) MCP Server (stdio) WebSocket Bridge Figma PluginMCP服务器通过模型上下文协议公开工具。Figma插件通过WebSocket桥在画布上执行操作。
安装
无需安装--直接使用npx运行：
npx figma-compose-mcp或全局安装：
npm install -g figma-compose-mcp设置
1.安装Figma插件
- 打开Figma桌面
- 首选 插件->开发->从清单导入插件
- 选择
plugin/manifest.json从这个项目
2.配置您的MCP客户端
添加到您的MCP配置中（例如，Claude Desktop、Cursor、VS Code）：
{
"mcpServers": {
"figma-compose": {
"command": "npx",
"args": ["figma-compose-mcp"]
}
}
}3.连接
- 使用设计系统打开Figma文档
- 运行插件： 插件->开发->figma compose mcp
- 开始提示您的AI代理
工具
设计系统阅读
| 工具 | 说明 |
|---|---|
get_local_styles | 从Figma文件中提取颜色、排版和效果 |
get_local_variables | 获取具有模式支持的设计令牌（变量） |
list_pages | 列出文件中的所有页面 |
find_nodes | 按类型和/或名称查找节点 |
find_text_nodes | 返回当前页面上所有包含内容的文本节点 |
get_node_info | 获取任何节点的尺寸、可见性和组件信息 |
组件组合
| 工具 | 说明 |
|---|---|
create_instance | 创建具有变量选择和可选的链接实例 parentId |
list_variants | 列出组件集的变量轴和选项 |
swap_component | 将实例交换到其他源组件 |
get_instance_properties | 读取公开的组件属性（TEXT、BOOLEAN、INSTANCE_SWAP） |
set_instance_properties | 以声明方式覆盖组件属性（标签、切换、图标交换） |
屏幕建筑
| 工具 | 说明 |
|---|---|
create_frame | 创建具有尺寸、位置和可选项的框架 parentId |
add_text | 添加带有字体、大小、位置和可选的文本 parentId |
rectangle | 创建一个具有可选填充、角半径和 parentId |
set_position | 将任何节点移动到特定坐标 |
resize_node | 调整任何节点的大小 |
group_nodes | 将节点分组在一起 |
append_child | 将节点移动到父框架或组中 |
insert_child | 在父级中的特定z索引位置插入节点 |
set_fill | 应用填充颜色 |
set_properties | 批量设置布局、样式、可见性、剪辑内容、溢出方向、布局尺寸 |
clear_page | 从当前页面中删除所有节点 |
原型设计
| 工具 | 说明 |
|---|---|
set_reactions | 设置原型交互（单击、悬停、导航、覆盖、过渡） |
出口
| 工具 | 说明 |
|---|---|
export_node | 将任何节点导出为PNG、SVG、JPG或PDF |
示例
"Read the design system代理将通过以下方式提取颜色、排版和组件等 get_local_styles 并创建一个json引用对象
Generate a login screen创建一个框架并使用以下内容组合实例 create_instance 定位和自定义文本 set_position 和 set_text_content
局限性
- 字体加载 --某些字体在插件环境中可能不可用；Inter作为后备方案
- 自动布局 --具有拥抱内容大小的组件不会拉伸到任意尺寸
- 插件必须正在运行 --Figma桌面插件必须在WebSocket连接的情况下打开
学分
许可证
麻省理工学院——见 许可证 了解详情。