菲格索
在Cursor中聊天。Figma中的设计。
Figsor是一个桥接的MCP服务器 光标AI 到 Figma，直接在Figma画布上实现聊天驱动的设计创建和编辑。
Cursor → MCP (stdio) → Figsor Server → WebSocket → Figma Plugin → Design on Canvas设置
1.安装Figma插件（侧载）
克隆此仓库并将插件导入Figma：
https://github.com/AsifKabirAntu/figsor.git在Figma中： 插件→ 发展→ 从清单导入插件 → 选择 figsor/figma-plugin/manifest.json
2.添加到光标
打开光标MCP设置并添加：
{
"mcpServers": {
"figsor": {
"command": "npx",
"args": ["-y", "figsor"]
}
}
}3.开始设计
- 打开Figma文件
- 运行Figsor插件（插件→ 发展→ Figsor）
- 使用光标聊天：
“创建一个包含电子邮件和密码字段的移动登录屏幕”
设计一个带有侧边栏、KPI卡和图表的仪表板
“编辑所选框架——使按钮变圆并将颜色更改为蓝色”
可用工具（45+）
创建和布局
| 工具 | 说明 |
|---|---|
create_frame | 创建框架（屏幕、部分、卡片） |
create_text | 添加带有字体、大小、粗细和颜色的文本 |
create_rectangle | 创建矩形和形状 |
create_ellipse | 创建圆形和椭圆形 |
create_line | 创建线条和分隔线 |
create_svg_node | 从SVG创建图标和矢量图形 |
set_auto_layout | 配置flexbox样式的自动布局 |
modify_node | 编辑任何现有元素 |
set_stroke | 添加边框和笔划 |
set_effects | 添加阴影和模糊效果 |
delete_node | 删除元素 |
move_to_parent | 重构图层层次结构 |
读取并检查
| 工具 | 说明 |
|---|---|
get_selection | 读取当前选择 |
get_page_structure | 获取完整的页面树 |
read_node_properties | 检查任何节点的属性 |
find_nodes | 按名称或类型搜索元素 |
set_selection | 选择并缩放到元素 |
get_local_styles | 读取文件的设计标记 |
list_components | 浏览可用组件 |
create_component_instance | 使用现有组件 |
detach_instance | 将实例转换为框架 |
矢量绘图和高级填充
| 工具 | 说明 |
|---|---|
create_vector | 使用钢笔工具绘制自定义形状 |
boolean_operation | 合并、相减、相交或排除形状 |
flatten_nodes | 将节点展平为单个可编辑向量 |
set_fill | 应用纯色、线性/径向/角度/菱形渐变、多次填充 |
图像、排版和限制
| 工具 | 说明 |
|---|---|
set_image_fill | 在节点上放置图像填充 |
style_text_range | 在文本中应用混合样式 |
set_constraints | 设置响应约束 |
list_available_fonts | 发现可用字体 |
组件和变量工具
| 工具 | 说明 |
|---|---|
create_component | 创建新的主组件 |
create_component_set | 将组件组合成变体集 |
create_variable_collection | 使用模式创建设计令牌集合 |
create_variable | 创建COLOR、FLOAT、STRING或BOOLEAN标记 |
bind_variable | 将令牌绑定到节点属性 |
get_variables | 列出所有变量集合和标记 |
SVG导出和动画
| 工具 | 说明 |
|---|---|
export_as_svg | 将任何节点导出为SVG标记 |
show_animation_preview | 实时动画SVG预览+ZIP下载 |
AI驱动的SVG（Quiver）
| 工具 | 说明 |
|---|---|
quiver_generate_svg | 根据文本提示生成SVG图形 |
quiver_vectorize_svg | 将光栅图像转换为干净的SVG |
对等设计（多代理）
| 工具 | 说明 |
|---|---|
spawn_design_agent | 生成具有可见光标的AI设计器代理 |
dismiss_design_agent | 删除代理光标 |
dismiss_all_agents | 删除所有代理游标 |
设计工艺指南
| 工具 | 说明 |
|---|---|
get_design_craft_guide | 专业设计规则——排版、颜色、间距、反AI斜率 |
优点：设计系统集成
连接你的Figma设计系统库，这样AI就可以使用你的组件，而不是通用的组件。
- 扫描并导入库组件
- 在您的设计系统中搜索
- 保存库并在库之间切换
- 使用DS生成设计
获取Figsor Pro→ --9美元一次性购买
需求
- Node.js 18岁或以后
- Figma 桌面或网络应用程序
- 光标 支持MCP的IDE（或任何兼容MCP的客户端——见下文）
使用Claude代码
Figsor适用于任何MCP客户端，而不仅仅是Cursor。使用它 克劳德代码:
claude mcp add --transport stdio --scope project figsor -- npx -y figsor或添加到 .mcp.json 在项目根目录中：
{
"mcpServers": {
"figsor": {
"type": "stdio",
"command": "npx",
"args": ["-y", "figsor"]
}
}
}然后按照相同的步骤操作——打开Figma，运行Figsor插件，然后聊天。
配置
| 环境变量 | 默认值 | 描述 |
|---|---|---|
FIGSOR_PORT | 3055 | WebSocket服务器端口 |
许可证
MIT© 阿西夫·卡比尔