AI导哈

Figma组件生成服务

一个MCP服务器，使AI代理能够使用设计系统中的真实链接组件实例生成Figma屏幕，而非视觉近似。

  • by Through-Reflection
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 Through-Reflection/figma-compose-mcp

使用说明

figma组成mcp

MCP服务器，使AI代理能够使用以下命令生成Figma屏幕 实际链接组件实例 来自你的设计系统，而不是视觉近似。

它的作用

  1. 读取您的设计系统 --从任何Figma文件中提取颜色、排版、效果和设计标记
  2. 创建真实的组件实例 --使用组件库中具有正确变体选择的链接实例
  3. 生成全屏 --使用正确的定位、文本和样式从实际组件中组合屏幕
  4. 设置原型交互 --导航、叠加、屏幕之间的转换

每个元素都与源代码设计系统保持连接。更改套件中的组件，生成的屏幕会自动更新。

建筑

AI Client (Claude, Cursor, etc.) <-> MCP Server (stdio) <-> WebSocket Bridge <-> Figma Plugin

MCP服务器通过模型上下文协议公开工具。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.连接

  1. 使用设计系统打开Figma文档
  2. 运行插件： 插件->开发->figma compose mcp
  3. 开始提示您的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连接的情况下打开

学分

建在上面 Figma MCP写桥 通过 @菲拉斯姆.

许可证

麻省理工学院——见 许可证 了解详情。

相关 MCP