Figma

设计

通过对话访问和查询 Figma 设计文件

功能概览

Neotask 通过 OpenClaw 的 13 项操作连接 Figma，将设计文件转化为开发工作流可自动消费的结构化数据。

设计到代码桥梁

  • 从任何 Figma 文件或画框中提取完整的设计上下文——颜色、排版、间距、组件和布局
  • 获取 Code Connect 映射，查看哪些 Figma 组件映射到哪些代码组件
  • 添加和更新 Code Connect 映射，让组件库与设计保持同步
  • 在映射不完整时获取 Code Connect 建议

    • 设计系统管理

  • 从 Figma 工作空间拉取变量定义（设计令牌），用于代码或文档
  • 创建将设计语言编码为开发者和 Agent 可用的设计系统规则
  • 获取文件、组件和资源的元数据

    • FigJam 与图表

  • 提取 FigJam 内容用于文档或规划工作流
  • 根据架构或流程描述生成新图表

    • 视觉捕捉

  • 截取特定画框的屏幕截图，用于报告、文档或自动化质量检查

    • 每项操作均可自主运行或需要您的审批——由您决定。

    试试这样问

  • "拉取新结账流程的设计上下文，总结关键组件和间距决策"
  • "我们 Figma 库中哪些组件还没有 Code Connect 映射？"
  • "生成我们新微服务架构的图表，添加到工程 FigJam 中"
  • "将 Figma 设计系统中的所有设计令牌导出为 JSON 文件"
  • "从我们的主 Figma 库创建设计系统规则文档"
  • "截取移动端引导画框的截图，附加到相关的 Linear Issue"
  • "显示 Q3 功能设计文件中所有画框的元数据"

    • 专业提示

  • 将 Figma 与 Linear 放在同一应用组中，当设计画框发生变化时，Agent 可以自动用新截图和上下文更新相关开发 Issue。
  • 安排每周设计系统审计，比较 Figma 变量与代码库，呈现任何偏差。
  • 为 add_code_connect_map 启用审批门控——将组件映射到代码影响重大，值得在提交前进行人工审核。
  • 多 Agent 工作流可以运行设计 QA：一个 Agent 提取 Figma 上下文，另一个与实时组件库比较，第三个为差异创建 Issue。
  • generate_figma_design 操作让 Agent 可以从结构化描述创建新 Figma 内容——对自动化占位设计或图表生成很有用。

    • Works Well With