Over.fig

一个Chrome扩展，可将你的Figma设计以半透明图层直接叠加到网页上。
连接设计与代码之间的鸿沟，一键对比设计与网站。
无需再切换标签页，无需再猜测边距、字体或颜色，也无需再使用限制交互的静态图片叠加。

主要功能

无需离开网页即可访问Figma的精确测量工具——悬停于任意元素上，即时查看间距、内边距和对齐方式。在实时页面上直接验证每个细节，告别标签页切换和猜测。
一键检查设计的CSS及Tailwind转换。点击任意设计元素，即可查看其样式，并实时将Figma样式转换为Tailwind实用类。
仅叠加你需要的画板。只需使用头部、卡片或CTA区域？在Figma中选择任意画板或组，仅叠加该部分，作为编码时的参考。
即时下载优化资源。图片、图标、插图——通过扩展直接下载为优化格式，即刻用于网页。

优势

像素级对比：将Figma设计叠加到真实网站上，立即发现视觉差异。
实时检查：在浏览器中直接检查间距、对齐和尺寸，无需切换标签页。
一键复制代码：立即从任一被检查元素获取干净的CSS或Tailwind类。
组件级聚焦：仅选择并对比Figma中所需的画板或元素。
优化资源导出：直接从Figma下载即用且针对网络优化的图片和图标。
无缝工作流：消除设计与开发工具间频繁切换。
加速交接：减少实现过程中设计师与开发者之间的来回沟通。
布局一致：确保像素级间距、排版和元素对齐。
视觉精准：交付完全匹配原始设计的网站。
免费使用：设计师与开发者均可免费使用全部功能。