周一的站会永远是那几句迭代排期、进度对齐、风险同步。然后PM转向我对了这个Sprint要做那个B端订单管理后台竞品分析已经做完了——你看一下这家参考他们的交互和视觉风格来做设计师那边排期排不开了。然后飞书里多了一个链接。我工位上打开那个链接。是一个海外SaaS的订单管理页面。左侧菜单、顶栏搜索、数据表格、Filters栏排序、详情侧滑面板——功能很多但布局清爽。问题来了设计师排期满了我得自己做。以前我是怎么干的我先说我以前的做法。你们肯定不陌生。打开Chrome DevToolsF12或者CmdOptI然后开始逆向工程Elements面板 → 选中导航栏 → Computed → padding: 16px 24px → background: #1a1a2e → font-size: 14px → font-weight: 500 → border-bottom: 1px solid #e8e8e8记下来。然后往下选中卡片容器 → Computed → display: grid → grid-template-columns: repeat(3, 1fr) → gap: 20px记下来。然后看第二个卡片看第三个卡片看有没有hover效果选中卡片 → Styles → :hover → box-shadow: 0 4px 12px rgba(0,0,0,0.1) → transform: translateY(-2px) → transition: all 0.3s ease记下来。一个页面弄完我的VSCode里是这样的css/* 从竞品网站上抄的 */ .nav-bar { padding: 16px 24px; background: #1a1a2e; font-size: 14px; font-weight: 500; border-bottom: 1px solid #e8e8e8; }然后再回头看浏览器。我刚才那个按钮的圆角是多少8px还是12px再回去查一次。来来回回一个中等复杂度的页面光扒样式就要一两个小时。然后才是真正写业务逻辑的时间。转折点上个月接了个相似的任务。这次不是后台是一个活动落地页。设计师同样排不开期PM说参考这个活动页的风格做一个。我本来打算照老办法开始F12。但我团队里一个做设计的同事路过我工位看我对着DevTool扒样式问了一句你在这一个个看computed干嘛我说不然呢。他说你把那个网页导进Figma不就一眼看完了吗我说我又不会用Figma。他说你不用会。装个插件网页变Figma稿你打开就是看。DrawFlare到底做了什么他给我装了俩东西1. Chrome 扩展— 叫Web to Design。浏览器里点一下导出当前页面成一个 .w2d 文件。就两秒。2. Figma 插件— 也是Web to Design。打开Figma运行插件导入刚才那个.w2d文件。然后我在Figma里看到了那个竞品的落地页。不是截图是真的图层。我当时愣了一下。不是因为它多酷是因为我突然意识到刚才干的那一个小时的活儿几秒钟干完了。从开发者的角度看这个Figma文件作为一名前端开发者Figma对我而言本来是一个设计师问我这个好不好实现的时候才打开的工具。但这次打开之后我发现这东西对前端来说确实有用。第一所有间距肉眼可见。那个活动页的Card区域两个卡片之间的间距是24px还是32px我不需要在DevTools里翻computed选项卡了。在Figma里选中两张卡片拖一下就知道。如果我要搭一个页面的层级结构Figma里选中一个区块直接看它的内边距和外边距比以前快得多。第二颜色体系直接对照。我在浏览器里看的时候想找到这个网站的主色调、辅色调、文字色需要在DevTools里找不同的元素一个一个看。但在Figma里导入了之后颜色在图层属性里直接列着复制一份出来回头写CSS变量的时候就很方便css:root { --primary: #4F46E5; --secondary: #818CF8; --text-primary: #1F2937; --text-secondary: #6B7280; --bg-card: #FFFFFF; --bg-page: #F9FAFB; }第三排版层级完全展开。一个页面里H1、H2、正文、辅助文字的字号链是怎样的在Figma里选中文字看一眼就明白。不用再这个字体好像是16px……不对是14px……也不对来回复查。说个具体的例子那个活动落地页里有一个三步使用教程的区域。三个步骤卡片水平排列每个卡片是一个圆角容器里面放一个icon、一个标题、一段描述。底部还有一个次要按钮。我做完整张页面大概花了半天。但如果用传统方式光这块区域我可能就要花一两个小时扒三个卡片的样式、看间距、调响应式。因为DevTools里看间距确实不直观。用Figma看的方式是选中卡片区域看一眼自动布局的参数内边距24px、圆角12px卡片间距20px三个卡片等宽。css.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .step-card { padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }然后去写业务逻辑。干净利落。DrawFlare不是万能的但不需要它是用了三周说说我知道的局限动效出不来。这是肯定的。CSS animation、transition这些它不会抓。hover效果知道有但怎么动需要自己试。这个本来也是前端的工作。响应式布局需要自己处理。它抓的是你当前浏览器宽度的样式。移动端布局得自己另外抓或者自己写。图片是压缩过的。网页里的图片为了加载速度都是WebP导出来会糊。我通常是记录图片尺寸和比例去Unsplash或者设计稿里找原图替换。复杂的JS交互不在这工具的范畴。像下拉菜单、弹窗、日期选择器这些有JS逻辑的东西它只会把初始状态的HTML结构导出来交互行为不保留。但这几点想明白了之后其实不影响它解决的那个最核心的问题这个页面长什么样这件事不需要花一个小时在DevTools里扒。看一眼Figma稿心里大概就有数了。我现在的工作流现在我接到参考XX网站做一个的需求后流程是这样的收到需求 → 打开参考网页 → 点Chrome扩展导出 .w2d 文件2秒 → 导入Figma5秒 → 花5分钟在Figma里过一遍整体结构 → 提取颜色、间距、字号体系到CSS变量 → 开始写代码 → 写的时候打开Figma当视觉参考那个设计师同事看我用了几次之后跟我说其实很多前端不知道DrawFlare这个东西但明明它是最对口的工具WYSIWYG这件事Figma天然就是为它设计的只是平时我们前端不用Figma而已。后来我想了一下以前花在扒样式上的时间本质上是在用文本方式理解一个视觉结构。这本身就是低效的。视觉结构最好的理解方式就是视觉。只要你能把它放进一个合适的工具里。DrawFlare的安装我自己装的时候也踩了点小坑直接写清楚Chrome扩展Chrome Web Store 搜索 Web to Design作者是Drawflare。装好了在浏览器右上角会出现一个图标。打开你要导出的页面点那个图标选导出下载一个.w2d文件。Figma插件去 Figma Community 搜索 Web to Design 或者 Web to Figma我装的是 Web to Figma 那个功能一样。装好之后在 Figma 里 Cmd/ 搜插件名字就能找到选刚才下载的.w2d文件。免费版每月10次日常用够了。我一个月也就导七八次。Pro版 $10/月不限导出次数。如果你团队里前端多可以买一个Pro共用导出的.w2d文件谁都能在Figma里打开看。最后说两句前端这行有个老话叫不要重复造轮子。意思是代码层面有现成的库就别自己写。但在工作流层面道理是一样的。如果已经有人做了工具能帮你跳过打开DevTools手动抄样式这个环节你没必要花一两个小时做这个事情。我不是说DrawFlare是个神器。它就是个Chrome扩展加一个Figma插件而已。装一下花两分钟每次参考XX网站的需求能帮你省30分钟到1小时的扒样式时间。一个月碰两三次这种需求省下来的时间够你学一个新的CSS特性或者准时下班去吃一顿好的。我选后者。这个工具不帮你写业务逻辑但能帮你少看两小时computed。值不值自己算。文中工具DrawFlare / Web to DesignChrome扩展Chrome Web Store搜索「Web to Design」Figma插件Figma Community搜索「Web to Design」或「Web to Figma」免费版每月10次导出Pro版$10/月无限
前端仔的日常：PM丢来一个竞品链接让我“照着这个风格“开发
周一的站会永远是那几句迭代排期、进度对齐、风险同步。然后PM转向我对了这个Sprint要做那个B端订单管理后台竞品分析已经做完了——你看一下这家参考他们的交互和视觉风格来做设计师那边排期排不开了。然后飞书里多了一个链接。我工位上打开那个链接。是一个海外SaaS的订单管理页面。左侧菜单、顶栏搜索、数据表格、Filters栏排序、详情侧滑面板——功能很多但布局清爽。问题来了设计师排期满了我得自己做。以前我是怎么干的我先说我以前的做法。你们肯定不陌生。打开Chrome DevToolsF12或者CmdOptI然后开始逆向工程Elements面板 → 选中导航栏 → Computed → padding: 16px 24px → background: #1a1a2e → font-size: 14px → font-weight: 500 → border-bottom: 1px solid #e8e8e8记下来。然后往下选中卡片容器 → Computed → display: grid → grid-template-columns: repeat(3, 1fr) → gap: 20px记下来。然后看第二个卡片看第三个卡片看有没有hover效果选中卡片 → Styles → :hover → box-shadow: 0 4px 12px rgba(0,0,0,0.1) → transform: translateY(-2px) → transition: all 0.3s ease记下来。一个页面弄完我的VSCode里是这样的css/* 从竞品网站上抄的 */ .nav-bar { padding: 16px 24px; background: #1a1a2e; font-size: 14px; font-weight: 500; border-bottom: 1px solid #e8e8e8; }然后再回头看浏览器。我刚才那个按钮的圆角是多少8px还是12px再回去查一次。来来回回一个中等复杂度的页面光扒样式就要一两个小时。然后才是真正写业务逻辑的时间。转折点上个月接了个相似的任务。这次不是后台是一个活动落地页。设计师同样排不开期PM说参考这个活动页的风格做一个。我本来打算照老办法开始F12。但我团队里一个做设计的同事路过我工位看我对着DevTool扒样式问了一句你在这一个个看computed干嘛我说不然呢。他说你把那个网页导进Figma不就一眼看完了吗我说我又不会用Figma。他说你不用会。装个插件网页变Figma稿你打开就是看。DrawFlare到底做了什么他给我装了俩东西1. Chrome 扩展— 叫Web to Design。浏览器里点一下导出当前页面成一个 .w2d 文件。就两秒。2. Figma 插件— 也是Web to Design。打开Figma运行插件导入刚才那个.w2d文件。然后我在Figma里看到了那个竞品的落地页。不是截图是真的图层。我当时愣了一下。不是因为它多酷是因为我突然意识到刚才干的那一个小时的活儿几秒钟干完了。从开发者的角度看这个Figma文件作为一名前端开发者Figma对我而言本来是一个设计师问我这个好不好实现的时候才打开的工具。但这次打开之后我发现这东西对前端来说确实有用。第一所有间距肉眼可见。那个活动页的Card区域两个卡片之间的间距是24px还是32px我不需要在DevTools里翻computed选项卡了。在Figma里选中两张卡片拖一下就知道。如果我要搭一个页面的层级结构Figma里选中一个区块直接看它的内边距和外边距比以前快得多。第二颜色体系直接对照。我在浏览器里看的时候想找到这个网站的主色调、辅色调、文字色需要在DevTools里找不同的元素一个一个看。但在Figma里导入了之后颜色在图层属性里直接列着复制一份出来回头写CSS变量的时候就很方便css:root { --primary: #4F46E5; --secondary: #818CF8; --text-primary: #1F2937; --text-secondary: #6B7280; --bg-card: #FFFFFF; --bg-page: #F9FAFB; }第三排版层级完全展开。一个页面里H1、H2、正文、辅助文字的字号链是怎样的在Figma里选中文字看一眼就明白。不用再这个字体好像是16px……不对是14px……也不对来回复查。说个具体的例子那个活动落地页里有一个三步使用教程的区域。三个步骤卡片水平排列每个卡片是一个圆角容器里面放一个icon、一个标题、一段描述。底部还有一个次要按钮。我做完整张页面大概花了半天。但如果用传统方式光这块区域我可能就要花一两个小时扒三个卡片的样式、看间距、调响应式。因为DevTools里看间距确实不直观。用Figma看的方式是选中卡片区域看一眼自动布局的参数内边距24px、圆角12px卡片间距20px三个卡片等宽。css.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .step-card { padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }然后去写业务逻辑。干净利落。DrawFlare不是万能的但不需要它是用了三周说说我知道的局限动效出不来。这是肯定的。CSS animation、transition这些它不会抓。hover效果知道有但怎么动需要自己试。这个本来也是前端的工作。响应式布局需要自己处理。它抓的是你当前浏览器宽度的样式。移动端布局得自己另外抓或者自己写。图片是压缩过的。网页里的图片为了加载速度都是WebP导出来会糊。我通常是记录图片尺寸和比例去Unsplash或者设计稿里找原图替换。复杂的JS交互不在这工具的范畴。像下拉菜单、弹窗、日期选择器这些有JS逻辑的东西它只会把初始状态的HTML结构导出来交互行为不保留。但这几点想明白了之后其实不影响它解决的那个最核心的问题这个页面长什么样这件事不需要花一个小时在DevTools里扒。看一眼Figma稿心里大概就有数了。我现在的工作流现在我接到参考XX网站做一个的需求后流程是这样的收到需求 → 打开参考网页 → 点Chrome扩展导出 .w2d 文件2秒 → 导入Figma5秒 → 花5分钟在Figma里过一遍整体结构 → 提取颜色、间距、字号体系到CSS变量 → 开始写代码 → 写的时候打开Figma当视觉参考那个设计师同事看我用了几次之后跟我说其实很多前端不知道DrawFlare这个东西但明明它是最对口的工具WYSIWYG这件事Figma天然就是为它设计的只是平时我们前端不用Figma而已。后来我想了一下以前花在扒样式上的时间本质上是在用文本方式理解一个视觉结构。这本身就是低效的。视觉结构最好的理解方式就是视觉。只要你能把它放进一个合适的工具里。DrawFlare的安装我自己装的时候也踩了点小坑直接写清楚Chrome扩展Chrome Web Store 搜索 Web to Design作者是Drawflare。装好了在浏览器右上角会出现一个图标。打开你要导出的页面点那个图标选导出下载一个.w2d文件。Figma插件去 Figma Community 搜索 Web to Design 或者 Web to Figma我装的是 Web to Figma 那个功能一样。装好之后在 Figma 里 Cmd/ 搜插件名字就能找到选刚才下载的.w2d文件。免费版每月10次日常用够了。我一个月也就导七八次。Pro版 $10/月不限导出次数。如果你团队里前端多可以买一个Pro共用导出的.w2d文件谁都能在Figma里打开看。最后说两句前端这行有个老话叫不要重复造轮子。意思是代码层面有现成的库就别自己写。但在工作流层面道理是一样的。如果已经有人做了工具能帮你跳过打开DevTools手动抄样式这个环节你没必要花一两个小时做这个事情。我不是说DrawFlare是个神器。它就是个Chrome扩展加一个Figma插件而已。装一下花两分钟每次参考XX网站的需求能帮你省30分钟到1小时的扒样式时间。一个月碰两三次这种需求省下来的时间够你学一个新的CSS特性或者准时下班去吃一顿好的。我选后者。这个工具不帮你写业务逻辑但能帮你少看两小时computed。值不值自己算。文中工具DrawFlare / Web to DesignChrome扩展Chrome Web Store搜索「Web to Design」Figma插件Figma Community搜索「Web to Design」或「Web to Figma」免费版每月10次导出Pro版$10/月无限
