先讲结论：Figma 不会无缘无故糊，糊的是“像素”
你在 Figma 里看着很锐利，导出后却变糊，通常不是因为导出质量差，而是你导出的尺寸与最终展示尺寸不一致，或者元素落在了半像素上。图像一旦被缩放或采样，边缘就会变软，尤其是细线、文字和图标。
第1步：搞清楚你要给谁用（Web/移动端/运营图）
- Web 页面：关注的是 CSS 像素与实际像素的对应关系，最怕“导出后再缩放”。
- 移动端：常见是 2x/3x 资源。你需要按平台规范输出倍率，不要混用。
- 运营图：更关注最终像素尺寸与平台压缩。导出清晰只是第一步，还要避免上传后被二次压缩。
第2步：像素对齐（最关键，能解决80%的发糊）
如果你的元素位置或尺寸是 10.5px、23.2px 这种小数，导出后几乎一定会发糊。因为像素网格无法完美表示半像素边缘，系统只能“取平均”，于是边缘被糊化。
- 检查位置 X/Y：尽量是整数。
- 检查宽高 W/H：尽量是整数，尤其是图标与线条。
- 细线策略：1px 线一定要落在像素网格上；如果必须用 0.5px，确保整个系统统一，否则看起来忽粗忽细。
第3步：导出倍率怎么选（1x/2x/3x 的正确逻辑）
导出倍率不是越大越好，而是要匹配“最终展示”。如果你最终展示是 200px 宽，而你导出 800px 再缩到 200px，理论上也能清晰，但很多平台会用更激进的缩放与压缩策略，反而变糊。
- Web：尽量导出与展示尺寸一致；需要高清屏时用 2x 并在 CSS 缩放到 1/2 展示。
- 移动端：按照平台资源规范输出 1x/2x/3x，不要只出一张然后让开发去缩放。
- 图标：优先使用矢量（SVG）或保持严格像素对齐的位图资源。
第4步：导出前必须检查的“隐形缩放”
- Frame/Group 缩放：如果你把一个 Frame 缩放到 73%，里面所有元素都会变成小数像素，必糊。
- Auto Layout 的间距与约束：某些约束会导致最终尺寸出现小数，建议在关键组件上做像素取整。
- Stroke 对齐方式：描边居中时，1px 描边会一半落在外侧一半落在内侧，容易出现半像素边缘。需要时用 inside/outside 或调整尺寸补偿。
第5步：导出格式选择（PNG/JPG/SVG）
- PNG：适合 UI、图标、需要透明背景的场景；文字与边缘更清晰，但体积可能更大。
- JPG：适合照片/大面积渐变图，但高压缩会产生糊与噪点，细线和文字最容易被毁。
- SVG：适合矢量图标与简单插画；但要注意字体转曲、滤镜与兼容性。
最终检查清单（导出前30秒）
- 目标展示尺寸是多少？我导出的像素尺寸是否匹配？
- 关键图标/线条的 X/Y/W/H 是否都是整数？
- 有没有把 Frame/组件缩放到非100%？
- 导出格式是否符合用途（UI用PNG，照片用JPG，图标用SVG/PNG）？
按这套流程走，Figma 导出基本不会再出现“莫名其妙发糊”。如果仍然糊，十有八九是展示端（浏览器/CSS/平台压缩）在二次处理，你需要去检查最终投放链路。
