Trae x Figma MCP一键将设计稿转化为精美网页

发布于：2025-08-15 ⋅ 阅读:(20) ⋅ 点赞:(0)

前言

在当今快节奏的数字化产品开发中，设计师与开发者的协作效率至关重要。为了打破设计与开发之间的壁垒，我们引入了一种创新的工作流，将强大的设计工具Figma与智能体应用创建平台Trae相结合。借助蓝耘MCP广场提供的Figma MCP（多能力组件），我们能够无缝连接Figma的设计能力与Trae的自动化流程，从而实现将Figma设计稿一键转化为功能完备的网页。这种集成不仅极大地提升了开发效率，减少了手动转换的人为错误，还让设计师能够更专注于创作，而开发者则可以更快地将设计落地为产品。
image.png

1. 获取Figma账号 token。

在官网下载好Figma之后，本地登录上
image.png
点击左上角头像->点击Setting进入到设置界面image.png
在设置界面点击上方导航栏Security
image.png
点击Generate new token进行token的创建
image.png
选择你的token的时间，这里我选择的是90天
然后将右侧的权限都设置到最高权限
image.png
设置好之后点击右下角Generate token进行token的生成
然后他就会生成你的专属token了，这里我们一定要进行保存，不然的话我们就得重新创建一个了
image.png

2. 获取Figma MCP代码

点击https://console.lanyun.net/#/register?promoterCode=5663b8b127进行注册，输入对应的信息即可进行登录
image.png
进入到主界面，点击上方导航栏上的MCP广场image.png
在搜索框中输入figma进行对应MCP的检索，选择框出来的这个Figma
image.png
这款MCP的具体代码如下：
image.png

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

因为我是Windows系统的，固然我使用的就是Windows版本的JSON代码

根据代码的分析，我们可以看到我们需要填入一个token
将上面我们创建的token填入即可

这个时候其实还有一个更加方便的方法，
在蓝耘MCP广场的工具详情这里，你直接把你获取到的token填写进去，他会生成一个专属的JSON代码了，这种会减少很多的麻烦
image.png

因为蓝耘已经将这款MCP进行托管了，所以可以在线进行JSON代码的生成
效果如下：
image.png

{
  "mcpServers": {
    "Figma-Context-MCP": {
      "type": "sse",
      "url": "http://xxxxxxxxxxxxxxx.mcp.lanyun.net:8088/sse/Figma-Context-MCP"
    }
  }
}

并且8月蓝耘还在举办 MaaS 特价/折扣资源包和周周抢免费无门槛代金券活动

大量的token都在送，感兴趣的赶紧来吧
https://console.lanyun.net/#/register?promoterCode=5663b8b127
image.png

3.打开trae进行mcp的链接以及智能体集成

点击右上角的齿轮进入到设置界面，点击导航栏MCP，选择手动添加
image.png
输入我们的JSON代码，点击确定，然后他就会进行加载操作
image.png
如果链接成功的话效果如下：
image.png
我来解释下这两个功能的作用

get_figma_data 功能

  • 作用：用于获取 Figma 文件的全面数据 ，涵盖布局（比如设计元素的位置、层级关系 ）、内容（像文本内容、组件属性等 ），能让外部系统深度了解 Figma 设计文件的结构与细节。
  • 应用场景：在设计协同流程中，可将 Figma 设计数据同步到研发文档平台，辅助开发人员精准理解设计逻辑；或者用于设计资产分析，统计多个 Figma 文件里重复组件的使用情况。
  • 技术逻辑：需调用 Figma 的 API（如 Figma REST API ），通过文件 key 等参数，请求获取文件的 JSON 格式数据，解析后整理出布局、内容等结构化信息返回 。

download_figma_images 功能

  • 作用：依据 Figma 文件，下载其中用到的 SVG（矢量图，缩放不失真，利于前端灵活适配 ）和 PNG（位图，保留像素细节，适合固定尺寸展示 ）格式图片，方便离线使用或在其他系统嵌入这些设计用图。
  • 应用场景：前端开发时，快速下载 Figma 里的图标、切图，用于页面开发；或者在制作设计资源包时，批量导出 Figma 中的图片素材归档。
  • 技术逻辑：先借助 Figma API 获取文件中图片节点的信息（含图片哈希等标识 ），再通过 API 提供的图片下载链接（结合图片标识拼接 ），发起 HTTP 请求下载对应格式（SVG/PNG ）的图片文件到本地或指定存储位置 。

在mcp连接成功之后，我们点击设置来到智能体界面，点击新建
image.png
提示词如下，可以参考一二

你是资深 Figma 设计大师，精通界面设计全流程。以专业、清晰、高效的语气，为用户解决 Figma 设计难题：

  

- **角色与能力**：深度掌握 Figma 功能，能指导组件库搭建、自动布局运用，解析设计系统逻辑；精准把控版式、色彩、交互原型设计，输出符合用户体验与品牌规范的方案。
- **工作流程**：先明确用户需求（如 “设计官网首页” 需问清风格、功能模块 ），用`get_figma_data`获取 / 分析现有文件结构，结合需求规划布局；需出图时，用`download_figma_images`规整导出素材，全程同步思路、交付设计文件 / 切图 / 标注说明 。
- **规则与偏好**：优先复用成熟组件库；注重可访问性设计（色彩对比度、语义化标签 ）；输出设计时，同步标注关键参数（如响应式断点、动效时长 ），帮用户落地开发 。

填写好提示词时候，在下方勾选上我们的Framelink Figma MCP
image.png
点击创建，智能体就能创建好了，点击立即使用
image.png

4、Figma挑选合适的模版

在Templates and tools挑选上你喜欢的模版
image.png
点击Open in Figma
image.png
进入到设置界面，我们就能看到详细的设计稿信息了
image.png
点击右上角的share，点击Copy Link复制链接

https://www.figma.com/design/kIqXy1T1keaSx72KhjdUaj/Presentation-Template-with-Yuppies-Illustrations--Community-?node-id=0-1&t=tQDg2P5lgKBRyD7g-1

5、复制元素链接并交给AI，预览结果

接下来，将链接给ai，让他帮我们根据当前的设计稿生成一个网页
他先先获取这个 Figma 设计文件的数据，分析其结构和内容
image.png
然后他将设计稿中的图片进行下载下来了
image.png
然后就进行了网页的设计
image.png
这里还帮我们进行演示了具体效果，效果说实话真的特别好
image.png

并且这里还有详细的README文件来介绍这个设计稿生成的网页

如果你想在Figma中针对某个板块进行设计的话，Figma 可以直接定位到某个元素的链接，我们选中一个区域后，右键复制链接image.png

我将已经将这个网页部署到了云端，感兴趣的可以来看看
设计稿网页
image.png

总结

通过本文的实践，我们成功展示了如何利用Trae、Figma以及蓝耘MCP广场，将繁琐的设计稿转换工作流程，革新为一套高效、自动化的解决方案。从获取Figma的个人访问令牌，到在蓝耘MCP广场配置专属的MCP服务，再到Trae中创建并集成能够理解设计语言的智能体，每一步都旨在简化操作，提升协同效率。

整个流程的核心优势在于其高度的自动化和智能化。智能体通过get_figma_data功能深入理解设计稿的布局与内容，再利用download_figma_images功能精准获取所需的设计素材，最终自动生成结构清晰、样式精美的网页代码。这不仅为开发者节省了大量重复性的切图和样式编写时间，也确保了最终产品能最大程度地忠于原始设计。

无论是针对整个设计文件，还是具体到某一个设计元素，该方法都展现出了极大的灵活性和实用性。这套工作流的建立，无疑为设计师和开发者之间架起了一座坚实的桥梁，让“所见即所得”的开发体验不再遥远。对于追求极致效率和高质量交付的团队而言，这套Trae与Figma的集成方案，无疑是一个值得尝试和推广的优秀实践。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布