AI导哈

Figma线框图工具包

一个连接Figma的插件和CLI工具，用于生成新的框架和组件，支持自然语言意图转化为结构化流程计划。

  • by JDHalpin
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 JDHalpin/FigmaMCP

使用说明

Figma线框工具包（插件、MCP框架）

连接到Figma以生成新的帧和组件。

概述

  • pow/：TypeScript CLI，将自然语言意图转化为结构化流程计划(docs/flow.plan.json).
  • pow-importer/：导入计划或生成注释框的配套Figma插件。
  • 可选的MCP桥：CLI可以在只读的模型上下文协议（MCP）服务器上查询Figma元数据，以便在导入计划之前对其进行验证。
.
├── pow/
│   ├── cli/run.ts
│   ├── src/figma/
│   │   ├── mcp-client.ts      # shared MCP client helper
│   │   ├── mcp-read.ts        # fetches Figma file/page/frame summary
│   │   └── fetch-file-summary.ts
│   └── docs/flow.plan.json   # generated output (ignored in git)
└── pow-importer/
    ├── manifest.json
    ├── code.js                # plugin logic
    └── ui.html                # refreshed panel UI

需求

  • Node.js 18+与npm
  • 用于插件开发的Figma桌面应用程序
  • （可选）MCP兼容的Figma桥，具有有效 FIGMA_ACCESS_TOKEN

设置

  1. 安装依赖项（内部 pow/):
    cd pow
npm install
  2. （可选）在shell配置文件中配置MCP环境变量，或 .env:
    export FIGMA_ACCESS_TOKEN="<personal token>"
export FIGMA_MCP_PATH="node"
export FIGMA_MCP_ARGS="/absolute/path/to/figma-mcp-server.mjs"
export FIGMA_FILE_KEY="<default file key>"
    • FIGMA_MCP_PATH/FIGMA_MCP_ARGS 必须通过stdio启动MCP服务器。
    • FIGMA_FILE_KEY 允许CLI根据现有文件自动验证屏幕。

CLI工作流（从repo根目录或内部运行 pow/)

  • 为自定义提示生成计划：

    npm run run -- "Reset password with email + SMS fallback"

    这写道 pow/docs/flow.plan.json.

  • 将默认示例计划复制到剪贴板（macOS）：

    npm run plan:copy

  • 查询MCP网桥以获取元数据（需要上面的env变量）：

    FIGMA_FILE_KEY=123abc npm run run -- "Checkout flow"
npm run mcp:file -- 123abc

    CLI打印页面/帧摘要和标记生成的屏幕，这些屏幕在Figma中不存在。

Figma插件

  1. 在Figma桌面中选择 Plugins → Development → Import plugin from manifest… 并选择 pow-importer/manifest.json.
  2. 发射 PoW进口商.
    • 计划JSON导入
      • 从粘贴JSON pow/docs/flow.plan.json.
      • 按 导入 创建带有占位符标签的框架。在JSON解析成功之前，不会发生任何更改。
    • 函数注释生成器
      • 填写品牌、项目、命名附加内容和帧数。
      • 按 创建框架 生成2060×1940的注释板，带有虚线艺术品区域和注释栏。
  3. 刷新后的UI使用了一个更高的窗口、一个可见的滚动条和上下文副本，因此可以很好地进行截图演示。

脚本(pow/package.json)

命令 描述
npm run run -- "Prompt" 为特定提示生成JSON格式的计划。
npm run plan:copy 生成默认计划并复制它（仅限macOS）。
npm run mcp:smoke 烟雾测试MCP电桥并列出可用工具。
npm run mcp:file -- <fileKey> 通过MCP打印文件的页面/帧。

复习笔记和下一步

  • 生成的计划(pow/docs/flow.plan.json)通过以下方式远离git .gitignore--根据需要再生。
  • MCP集成现在是只读的； src/figma/write.ts 概述了一旦有编写者可用，具有编写能力的工具如何重用该计划。
  • 在问题中分享反馈或集成问题，以便我们可以优先考虑下一次迭代。 候选方案包括在计划生成过程中使用更多的MCP元数据、扩展组件映射，以及在服务器支持直接写入后启用直接写入。

相关 MCP