AI导哈

Figma设计上下文提取工具

一个从Figma文件中提取设计上下文（布局、样式、排版、效果）并导出节点图像的工具，适用于GitHub Copilot等编码代理。

  • by nvanexan
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 nvanexan/figma-mcp

使用说明

@nvanexan/figma mcp

Figma用于GitHub Copilot编码代理的MCP服务器——通过STDIO进行PAT认证。

从Figma文件中提取设计上下文（布局、样式、排版、效果）作为类似CSS的属性，并导出Figma节点的渲染图像。建立在 模型上下文协议.

安装

npm install -g @nvanexan/figma-mcp

或者直接与npx一起使用：

npx @nvanexan/figma-mcp

设置

将您的Figma个人访问令牌设置为环境变量：

export FIGMA_API_KEY=your-figma-pat

您可以在Figma中生成一个令牌 设置>个人访问令牌.

GitHub副本/克劳德代码

将服务器添加到MCP配置中：

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@nvanexan/figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "your-figma-pat"
      }
    }
  }
}

工具

get_figma_context

从Figma URL中提取设计上下文，并返回一个具有类似CSS属性（flexbox布局、颜色、排版、效果、尺寸）的简化节点树。

参数 类型 必填 说明
figmaUrl string yes Figma文件URL（带可选节点id）
depth number no 节点树深度，1-10（默认值：3）

get_figma_image

导出Figma节点的渲染图像。

参数 类型 必填 说明
figmaUrl string yes 带节点id的Figma URL
format string 否 png, jpg, svg, pdf （默认值： png)
scale number no 0.01–4（默认值：2）

发展

npm install
npm run build
npm test

脚本

脚本 描述
npm run build 将TypeScript编译为 dist/
npm run lint 使用ESLint的Lint源代码
npm test 运行测试
npm run test:watch 在监视模式下运行测试
npm run test:coverage 使用覆盖率报告运行测试

释放

该项目使用GitHub Actions进行CI和发布。

要发布新版本，请执行以下操作：

  1. 更新中的版本 package.json 跟随 语义化版本:
    npm version patch  # 0.1.0 → 0.1.1 (bug fixes)
npm version minor  # 0.1.0 → 0.2.0 (new features)
npm version major  # 0.1.0 → 1.0.0 (breaking changes)
  2. 按下commit并标记：
    git push origin main --follow-tags
  3. CI管道将自动运行测试并发布到npm。

许可证

麻省理工学院

相关 MCP