使用说明
菲格索
在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© 阿西夫·卡比尔