尝鲜版 Figma Chrome 插件推荐 👍👍👍大家好，今天给大家推荐一款解决前端生产问题的 Chrome Ex

大家好，今天给大家推荐一款解决前端生产问题的 Chrome Extension;

小编发现很多伙伴们在 VSCode、Browser、Figma 三者间来回切换开发过程中，当样式信息获取错误时，伙伴们没有直观的方式立刻发现容易出现样式信息获取错误的地方；而这种情况很容易出现不符合设计预期的样式 bug;

因此，针对上面的前端生产问题，小编今天推荐一款前端开发协助工具，该工具可以协助前端开发在「开发时」进行样式比对：直接将 Figma 的图层展示在 Browser 上，就能将设计稿和开发效果进行直观的比对，从而快速发现上述样式问题；从此，前端伙伴们再也不用担心设计发型一堆样式问题了；哈哈哈哈 ...

好了废话不多说了, 上正主...

dev diff figma 对于我们前端开发人员来说真是犹如神助，它可以支持整个页面图层与开发效果整个页面进行直观的比对，也可以一个页面中某一个区域进行直观的比对；此外，使用体验也非常 nice ，支持中英文切换，支持日夜间模式；

Figma layer address： figma 开启 Dev Mode 选中 figma 某个图层后，浏览器的地址栏的 url 内容
Dom selector：浏览器 app 中，需要比对的 DOM css selector; 如果是整个页面的比对可以设置为 body,如果是某个卡片、表单，则使用浏览器「检查-Elements」选中需要对比的 DOM；见下图
Layer opacity：即这个 figma 图层在 app 中 opacity ；通过 opacity 来调节 figma 与实际开发之间的效果比对；从而发现是否存在间距、高度、颜色等不一致问题；从而直观的感知与 figma 差异；

效果见下图：

dev-diff-figma 处于 Chrome Extension 注册阶段，小编正在加速进程；相信不久后会在 Chrome Extension 商店中见面啦！🎉🎉🎉
dev-diff-figma firefox 版本已发布：addons.mozilla.org/en-US/firef…