1、首先,获取figam里的token:

在figma里点击 我的—>设置—>安全,点击 生成新的令牌,自己取名,Scopes部分选择成可读可写之类的。确认后就会出现token,一定要复制,后面就消失了,会用到。

2、window版本的,打开cmd,输入 npm install -g figma-developer-mcp

3、在c盘里用户下面找到.cursor,在该文件夹下面创建mcp.json,输入,其中xxx部分就是第一步申请的token

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "xxx",
        "PORT": "3333" 
      }
    }
  }
}

在cursor的设置里,绿灯亮起,成功!

4、接下来验证:

我在figma里复制:

cursor用了将近20分钟不断自我修改,最后生成了这样。

 参考https://github.com/GLips/Figma-Context-MCP

所以大家有没有其他更好用的办法,能够快速利用AI搭建好figma设计的界面,欢迎各位大佬们批评指正!!!

Logo

火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。

更多推荐