augment + figma mcp，让你的 vibe coding 更加得心应手

前言

最近一段时间的开发使用 augment + figma 的 mcp，我感觉前端切图一瞬间轻松了许多。当然，这中间需要我们去配置 figma 以及 augment 的 mcp，本文就教大家如何在 augment 进行配置

augment 最近的风控实在是厉害，我已经放弃了白嫖，开启 30刀 per month 的付费模式了，一个月 600 次对话，其实非常够用了

如何配置

首先我们需要在 figma 中生成 Personal access tokens

在 figma 的客户端/官网中，我们需要进入设置页 - Security 选项，点击 Generate new tokens

随后可以自己设置这个密钥的过期时间，我一般会选择一个月，接下来就是这个密钥的权限，建议把所有的选项调到最大，随后才能点击 Generate token

这个 token 我们复制下来

现在来到 augment 的设置页

进入到 Tools 这个界面，选择 Import from JSON

输入下面这个 json 内容，将里面的 Your Figma ApIkey 替换成你在 figma 中生成的 Personel access tokens 即可

json 复制代码

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=Your Figma ApIkey",
        "",
        "--stdio"
      ]
    }
  }
}

接下来我们就可以使用了

开始使用

我们需要来到 figma 项目中选择指定的 ui 内容，点击右上角的 share 按钮，点击前需要确认 Share 左侧的是否为 Preview 模式，下面这个图标显然不是，我们需要将其调整为 Preview

此时会弹出一个提示框，我们只需要点击右上角的 Copy link 即可

随后我们在 augment 对话中输入这个 figma，再来点提示词即可

最后生成的 ui 基本上和 figma 保持一致

最后

其实 mcp 的核心作用就是让 ai (augment) 能够以一个统一的方式去访问外部工具，数据源或者 api；现在很多 ai 都已经支持了这个东西，我在 augment 中配置了 Figma 的 mcp server ，当模型想要获取某个文件的内容时，它就会调用 mcp 的一个标准方法，比如 get_figma_data ，augment 就会把这个请求转发给 Figma MCP server，mcp server 调用 Figma 的 api，拿到结果，再返回给模型