Figma 推出 Chrome 扩展：直接把实时网页转成可编辑设计图层

如果你做过 UI 设计，大概率干过这种苦力活：看到一个网页的排版或交互特别棒，想借用到自己的设计稿里，只能一边开着浏览器截图，一边在 Figma 里拉参考线、对字体大小、量间距，重新把整个页面手工画一遍。

Figma 打算把这个机械重复的步骤彻底抹掉。他们正式推出了一个 Chrome 浏览器扩展程序，主打功能很简单，就是把正在运行的实时网页，直接抓取并转换成可编辑的 Figma 设计图层。

告别截图重绘，网页直接变画布

以往把网页搬进设计稿，要么靠截图当背景板描边，要么依赖第三方的插件，效果往往参差不齐，图层嵌套混乱不说，文字也经常变成散落的矢量路径。

Figma 官方这次拿出的方案更彻底。安装扩展之后，你只需要登录自己的 Figma 账号，就能在浏览任何网站时直接提取页面。

它不是存一张扁平的图片，而是把浏览器的真实 DOM 结构与样式，解析成 Figma 里的原生图层。网站里的文本、按钮、栅格和容器布局，都会被还原成可以直接选中的对象，甚至无需手动调整就能继续修改文字和排版。

这意味着无论你是要做竞品分析、网页改版，还是单纯搜集设计灵感，把别人的线上成果拉进自己的工作流，现在只需要点一下鼠标。

目前限付费用户，处于 Beta 阶段

不过，想立刻用上这个功能还有一点门槛。

Figma 明确表示，该扩展程序目前仍处于 Beta 测试阶段，而且暂时只面向付费方案用户开放。免费版用户可能还需要再等上一段时间。

此外，从网页到设计图层的还原度，在复杂的动态网页上究竟表现如何，比如面对复杂的响应式断点、现代 CSS 动效和深层嵌套时会不会丢样式，还有待更多设计团队在实际业务中检验。

为什么重要

对于每天泡在设计稿里的设计师来说，这个功能切中的是最高频的痛点之一。过去耗费半天搭建的竞品页面框架，现在几秒钟就能拿到可编辑的原型，把精力真正留给创意本身。我们认为，这对于做改版和设计系统的团队来说，性价比极高。

从行业竞争来看，Figma 这一步走得相当精准。以往市面上充斥着各种收费的第三方「HTML 转 Figma」小工具，质量良莠不齐。Figma 官方下场做扩展，直接把外部工具的饭碗端走了，同时也进一步收拢了浏览器与设计软件之间的边界。

看起来，Figma 正在把「所见即所得」的逻辑反向打通。过去是把设计稿变成前端代码，现在是直接把线上代码倒灌回设计稿。一旦这种双向转换完全成熟，设计与前端开发的沟通断层，可能会被彻底填平。