上周我在重构一个项目需要参考一个竞品网站的卡片布局。那个网站用了复杂的 Grid 嵌套里层还有 Subgrid。打开 DevTools 一看——Elements 面板里 grid-template-columns 写了三行还有 gap、grid-column、grid-row 各种属性。我盯了五分钟脑子里画不出这个布局到底长什么样。这不是我一个人的问题。CSS Grid 已经普及好几年了但真正能在脑子里看见Grid 布局的人不多。你看到一串代码css.grid-container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 24px 16px; }你知道它定义了一个三列两行的网格。但它在这个页面上到底长什么样、卡片之间是不是真的对齐了、我在这个布局里再加一个元素会去哪——这些问题的答案不在代码里在你的空间想象力里。后来我换了个方法去理解那个竞品的布局。用 DrawFlare 把它导进了 Figma然后在 Figma 里看它的自动布局参数。这下看清楚了。原来不是我以为的那种排列方式。一个前端用 Figma 看布局到底在看什么先说清楚DrawFlare 做的事情不复杂。装个 Chrome 扩展点这里直达点一下导出网页再装个 Figma 插件点这里直达导入网页就变成可编辑图层了。但当你从一个写代码的人的视角去看这个 Figma 文件的时候你会发现一些在 DevTools 里不容易看到的东西。Grid 布局变得看得见了。在 DevTools 里Grid 的 overlay 确实能帮你看到网格线。但它的问题是你得先把代码写出来才能看到 overlay。你是先写再验证的逻辑。在 Figma 里是反过来的。你能直接「看到」这个网页的布局结构。导航栏是一个 FrameFeature 区域是一个嵌套的 Auto Layout Frame卡片之间的间距直接标注成数字。你不需要在脑子里组合那些属性Figma 帮你展示出来了。我曾经导入过一个用了 Subgrid 的页面。那个页面有一组卡片每张卡片内部有三行文字三行文字之间的间距通过 Subgrid 跟父容器保持一致。在 DevTools 里我看懂了每一行代码的作用但我花了很久才在脑子里拼出这三行文字跟父容器里的其他元素是怎么对齐的这个画面。在 Figma 里选中那个卡片选中那三行文字它们的排列关系一目了然。Auto Layout 参数直接对应现代 CSS。Figma 的 Auto Layout自动布局这个概念跟 CSS 的 Flexbox 和 Grid 在逻辑上是高度对应的。padding→ 对应 CSS paddingitem spacing→ 对应 gaphorizontal/vertical→ 对应 flex-directionhug / fill→ 对应 width: fit-content / flex: 1所以当你把网页导进 Figma 之后看到的 Auto Layout 参数可以直接翻译成 CSSFigma Auto Layout 参数 padding: 24px item spacing: 16px direction: horizontal alignment: center → CSS .container { display: flex; gap: 16px; align-items: center; padding: 24px; }不需要翻 DevTools不需要在 Computed 里找半天。看一眼直接写。复杂嵌套层的结构一眼看穿。最让我觉得值的是这个。当你要理解一个有四五层嵌套的容器结构时在 DevTools 的 Elements 面板里一层层展开每一层的 padding、margin、border 都在不同的节点上。你要么手动算总间距要么开了好几个面板来回切。在 Figma 里嵌套的 Frame 结构在图层树里直接展开每一层的内边距堆叠在一起。你选中最里面的那层外层容器的间距也能看到。不用算不用切视觉上就能理解这个结构的承重墙在哪里。对 CSS 新特性的支持比我想象的好我本来以为这种工具对最新的 CSS 特性支持会不怎么样毕竟它们更新速度很快。但实测下来DrawFlare 在几个重要的现代 CSS 特性上表现不错。Container QueriesContainer Queries 现在已经很常用了。我测了一个用了容器查询的组件——一个 Dashboard 卡片它会根据父容器的宽度调整自身的布局。DrawFlare 导出来后卡片的不同状态在 Figma 里被识别成了不同的 Frame 变体。虽然不能直接看到当容器宽度小于 600px 时切换到竖排这个逻辑这个毕竟没法在静态的 Figma 里体现但不同尺寸下的布局状态被完整保留了。这就够了。我不用在浏览器里拉伸窗口去看它怎么变我直接在 Figma 里看到它窄版本和宽版本的对比然后在代码里写对应的 container query 就行。嵌套 CSS 和 Layers现在写 CSS 都会用嵌套语法了。DrawFlare 不处理你写了什么语法它只关心浏览器最终渲染出来的东西。所以不管源代码是嵌套写法还是普通写法导出来效果一样。这一点对前端来说是好事意味着你不需要担心我的写法它认不认识。CSS Layerslayer也是一样。多层叠优先级规则在渲染之后已经变成确定的视觉结果了DrawFlare 只是拿到这个结果。你看到的是哪个元素的颜色在前而不是哪一层 layer 的优先级更高。Design Tokens 的逆向提取这个算是我觉得最实用的功能之一。很多网站现在都用设计令牌来管理样式——一组预定义的色板、字号、间距值。当你把网页导进 Figma 之后这些值全部散落在图层的属性里。你可以做一件事把所有的颜色值、字号值、间距值收集起来做成自己的 CSS 变量表。css/* 从 Figma 里提取出来的设计令牌 */ :root { /* 颜色 */ --color-primary: #4F46E5; --color-secondary: #818CF8; --color-surface: #FFFFFF; --color-text-primary: #1F2937; --color-text-secondary: #6B7280; /* 间距 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* 字号 */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; }不只是抄颜色——你能看到这个网站的设计体系到底是什么样的。它的间距是用 4px 的倍数还是 8px 的倍数它的字号比例是 1.25 还是 1.333这些信息在 DevTools 里散落在几十个不同的元素上在 Figma 里集中在一起一次性提取。CSS 嵌套层级和 BEM 命名还有一个顺手的小功能DrawFlare 保留的图层名用的是网页里原始的选择器名称。.card__header、.pricing-card、.navbar__link--active这种 BEM 命名的样式在图层里直接能看到。如果你要分析别人的 CSS 架构是怎么组织的这个比翻源码快多了。我现在用它的方式以前我接到参考这个网站的需求打开两个窗口——左边浏览器右边 VS Code。在浏览器里看样式切换到编辑器里写代码。遇到复杂布局就得反复切。现在我的工作流变成了三层浏览器打开参考网页 → DrawFlare 导出到 Figma2秒 → Figma 里分析布局结构5分钟 → VS Code 里写代码带着对结构的完整理解Figma 文件一直开着当参考但不是当图来看。我是把它当布局说明书——选中一个区域看间距选中一行文字看字号选中一个按钮看颜色的完整层级。所有的测量和对照都在 Figma 里完成不需要再切回浏览器查 DevTools。这个变化的核心价值与其说是省了时间不如说是减少了一次上下文切换。前端写代码的时候最贵的成本不是打字是你从看切换到写的时候脑子里需要保持的那部分状态。每切一次浏览器状态就丢一部分。DrawFlare 让我把这部分看的操作统一到了 Figma 里上下文切换从反复切变成了看一眼隔壁窗口。在团队里用的场景最近我们在搭一个新的组件库需要参考几个优秀的页面来定义基础的间距和字号体系。我们在 Figma 里建了一个文件里面放了从几个参考网站导出来的设计稿。每个设计稿旁边标注了提取出来的颜色值和间距值。前端团队直接在 Figma 里看这些参考不用每个人都去打开浏览器、找参考网站、翻 DevTools。所有人在同一个文件里讨论这个页面的字号比例比那个页面舒服在哪里效率比之前高了不知道多少。而且因为是 Figma 文件设计师也可以直接参与——他们能在图层上直接标注、画辅助线、提修改建议。以前设计师和前端之间用设计稿沟通这件事现在变成了用参考页面沟通。几个在实际使用中要注意的事用了几个月说几个我觉得需要注意的1. 动效和交互需要单独处理。DrawFlare 只抓静态的视觉结构。如果你需要分析动画的时间曲线、hover 状态的过渡效果还是得在 DevTools 里看。不过动效本身也不是从别人网站上扒来的东西它应该是你自己设计的。2. 图片资源需要替换。网页里的图为了加载速度都是压缩过的。导进 Figma 之后会糊我一般记一下尺寸比例去素材站找高清版替换。如果你要做精细的展示页这一步省不了。3. 复杂交互组件只看初始态。下拉菜单、弹窗、分页器这些带 JavaScript 状态的东西导出后只保留初始状态的 HTML 结构。交互行为不保留这是 Figma 本身的限制不怪工具。4. 不是所有 CSS 属性都能 100% 映射。一些比较新的或者比较少见的 CSS 属性比如backdrop-filter、clip-path这些有时会有偏差。我遇到的比例不高大概 5% 左右。最后前端这个行业有个特点工具更新比人的习惯更新快得多。CSS Grid 出来的时候很多人还在用 float 布局。Container Queries 出来了很多人还在写媒体查询。这些新东西其实不是难是你需要一种新的方式去看见它们——看到它们的结构、它们在页面上怎么工作、它们跟老方法有什么不同。DrawFlare 对我最大的帮助不是省了扒样式的时间而是让我更直观地理解现代 CSS 布局的工作方式。不用先在脑子里翻译代码再拼出画面直接看到画面然后去写对应的代码。有时候一个好的工具就是这样。它没有替你做什么了不起的事但它把理解这件事变得容易了。文中的工具DrawFlare / Web to DesignChrome扩展安装https://chromewebstore.google.com/detail/web-to-design/piinloombhnpicloejgbdffcdohmkoflFigma插件安装Web to Design - Turn websites into Figma designs | Figma免费版10次/月日常够用Pro版$10/月无限导入