Figma 导出图片时，先决定交付对象和格式，再设置尺寸与范围。课程封面、透明图标、开发切图和评审长图的需求不同，不能只按“导出一张 PNG”处理。本文用“拾光阅读”课程详情页说明 Figma 原生导出、切片和批量导出的区别，并补充导入 Pixso 后的连续工作方式。
如果需要从 Figma 文件迁移设计，可先看Figma 文件导入教程；想了解更多中文设计协作入口，可访问Pixso Figma 专题。
1. 选择图层、Frame 或整页
在 Figma 中选中要交付的图层、组件或 Frame，右侧会显示 Export 区域。导出课程封面时选中封面 Frame；导出收藏图标时选中图标组件；需要整张课程详情长图时，取消画布选择后导出当前 Page。不同选择决定导出范围，先确认蓝色边界是否覆盖了预期内容。
拥有查看权限不一定能导出，文件所有者可以限制复制和导出；没有 Export 区域时，先刷新并确认权限。不要截屏替代导出，截屏会丢失透明背景和精确尺寸。
先选范围，再添加导出配置：导出面板显示的边界应与交付对象一致，确认选区后再添加格式与倍率。
2. 选 PNG、JPG、SVG 还是 PDF
- PNG：支持透明背景，适合图标、带文字的课程封面和需要无损压缩的界面资产。
- JPG：文件更小，适合不需要透明通道的照片型封面；高压缩会损失细节。
- SVG：适合矢量图标和需要在开发侧继续缩放的简单图形；含复杂滤镜或位图时先检查兼容性。
- PDF：适合评审和打印，多个 Frame 可按页面组织，但不等同于可编辑源文件。
在 Export 区域点击“+”，选择格式并按用途命名。一个对象可添加多条配置，例如封面同时输出 1x PNG 和 2x JPG；不要把所有格式都批量生成，避免交付目录难以筛选。
3. 设置倍率、宽度与高度
在尺寸字段输入 1x、2x 等倍率可按原始尺寸缩放；输入 512w 或 512h 可锁定导出宽度或高度。移动端资源通常准备 1x、2x，高清屏再根据研发规范增加 3x。Figma 默认以 72 DPI 计算图片，2x 会得到更高像素密度，不应仅凭文件预览中的 CSS 尺寸判断清晰度。
检查导出结果的像素宽高、透明通道和文件大小。若封面文字发糊，确认没有误用 JPG 高压缩；若图标周围出现白底，检查 Frame 填充和导出背景设置。
如果文件尺寸正确但文字或照片仍模糊，可继续对照Figma 高清图片导出检查，分别排查倍率、源图与图片压缩，而不是只反复提高导出倍数。
4. 用 Slice 导出局部和批量资源
需要从大画布导出局部区域时，打开工具栏 Region tools 下的 Slice，拖出范围并在右侧添加 Export 配置。Slice 只导出边界内的内容，适合把课程详情页中的一组卡片作为单独图片交付。切片支持额外留白，适合需要统一安全边距的营销图。
页面中已有多个带 Export 配置的对象时，使用主菜单 File → Export 打开批量导出面板，逐项检查缩略图和文件名，再取消不需要的对象。命名可使用 course/detail/cover 这样的斜杠结构，让下载目录自动按层级整理。
Slice 自查：导出前确认切片边界覆盖了完整卡片，并预留研发或运营需要的安全边距。
5. 导入 Pixso 后继续整理交付
如果团队需要中文工作台或多人共同检查文件，可保存 Figma 的 .fig 副本，再导入Pixso。导入后先核对字体、图层、组件实例和原型连接，再在 Export 区域选择 PNG、JPG、SVG 或 PDF。格式和倍率仍应按交付对象决定，不要因为换了工具就跳过验收。
建议为每个导出对象保留“用途、尺寸、格式、负责人”四项记录。研发拿到图标时检查透明背景与命名；运营拿到封面时检查裁切和文字安全区；评审 PDF 则检查页面顺序和字体替换。这样一次导出就能减少返工。
交付前做一次“打开—核对—命名”检查：打开文件确认不是旧版本，核对像素尺寸、透明背景、字体和裁切，最后按页面、对象和倍率命名。若研发需要可重复导出，保留 Export 配置而不是只上传一次下载文件；若运营只需要最终图片，则删除不相关倍率，避免误用。对同一对象同时输出多种格式时，把用途写进文件名，例如 course-cover@2x.png 和 course-cover-review.pdf，收到文件的人无需猜测。
参考：Figma Export from Figma Design、Figma 导出格式与设置。
