Figma 怎么把设计稿导出为多尺寸图片：切片区域、倍率设置与导出核对

同一份 Figma 设计稿要交付网页图、Retina 图和开发切图时，最稳的做法是先确定导出边界，再在 Export 中增加多组倍率，而不是复制出几份不同尺寸的画板。下面用一个按钮组做例子，走完 Slice、导出配置、批量导出和结果核对四步。

先分清选区、Slice 和整页导出

Figma 可以导出图层、Frame、组件、Group、Section，也可以用 Slice 指定画布中的一块区域，或者在没有选中对象时导出当前页面画布。三者的差别在于边界来源：

• 导出对象：边界跟随对象或容器的形状。
• Slice：边界是你画出的固定矩形，适合需要保留统一留白的切图。
• 整页：适合交付画布快照，不适合做精确的组件资源。

如果设计稿中的按钮组周围有大量辅助标注，直接选中整块画布会把这些内容一起带走。先用 Slice 框住真正要交付的区域，后面的倍率和文件格式才有可复核的基础。

用 Slice 固定多尺寸导出的共同边界

1. 创建 Slice

在工具栏的 Region tools 下拉菜单中选择 Slice，然后在画布上拖出矩形。右侧栏会显示 Slice 的位置和宽高；拖动边缘可以调整范围，移动它可以改变取景位置。

这里建议先记下设计稿中的基准尺寸，例如 320×96。不要为了得到 2x 图片而把 Slice 本身改成 640×192，Slice 应该表达设计边界，倍率交给 Export 设置。

2. 检查是否误包含邻近图层

框选完成后放大看四条边：背景是否完整、阴影是否被截断、文字是否贴边、旁边的辅助标注是否进入区域。Figma 官方说明只有 Slice 边界内的内容会被导出；如果开启 Ignore overlapping layers，还会影响容器内与边界重叠内容的判断。

在 Export 中增加 1x、2x 和命名规则

选中 Slice 后，在右侧栏底部找到 Export，点击加号添加一组配置。第一组可以保留为 1x PNG，第二组再增加 2x PNG；每组都可以单独调整倍率、格式和后缀。

1. 点击 Export 右侧的加号。
2. 把第一组设为 1x、PNG，用于网页或设计评审。
3. 再次点击加号，新增 2x，用于高密度屏幕。
4. 需要 JPG、SVG 或 PDF 时单独增加对应格式，不要覆盖已经验证过的 PNG 配置。
5. 展开 Preview，确认边缘、透明区域和文字没有异常。

如果图层命名使用 button/primary/hover 这类斜杠结构，Figma 会按命名层级生成嵌套文件夹。团队需要固定目录时，这个规则要提前约定，否则导出结果看似成功，文件却散落在意料之外的目录。

批量导出前先看尺寸，避免把倍率当成像素

设计稿基准为 320×96 时，1x 的像素尺寸应为 320×96，2x 才是 640×192。倍率是相对设计尺寸的乘数，不是把输入框直接填写成目标像素。

当前页面有多个对象配置时，可以使用主菜单的 File > Export，或使用 macOS 的 Shift + Command + E、Windows 的 Shift + Ctrl + E 打开批量导出弹窗。弹窗中应逐项查看：

• 是否选中了正确的对象或 Slice。
• scale 和 format 是否对应交付清单。
• dimension 是否符合预期像素尺寸。
• 文件名是否会因为斜杠产生嵌套目录。

导出后用四项结果做验收

像素尺寸

用系统图片信息或设计交付工具查看宽高，不要只凭文件大小判断倍率。宽高正确但文件很小，可能是颜色简单；文件很大也不代表倍率正确。

透明和背景

需要透明背景时选 PNG，并回看边缘是否出现白底。若 Frame 的 Fill 不应该出现在成片中，先在 Fill 区域取消 Show in exports，再重新预览。

边界和阴影

阴影容易超出对象本体。切片边界过紧会让阴影被裁掉，过松又会让不同资源的留白不一致；把 Slice 的四条边与设计规范一起验收，比事后批量裁图更省时间。

下载位置

浏览器版会把文件发送到浏览器偏好的下载目录；桌面版会提示重命名和选择保存位置。多人协作时，最后一步要确认实际下载的是哪一组配置。

常见问题与最小排查路径

右侧栏找不到 Export 怎么办？

先刷新页面并确认已经选中可导出的对象。如果只有查看权限，Export 可能位于 Properties 标签；文件所有者也可能限制复制或导出。

为什么 2x 图片不是两倍清晰？

2x 只会增加输出像素，不会修复源图模糊、低分辨率位图或被裁切的阴影。先回到 Slice 和源素材检查，再决定是否需要更换原图。

多个导出配置会互相覆盖吗？

同一个对象可以保留多组配置。批量导出时逐项勾选需要的资源，导出后按文件名和尺寸核对；不要仅凭弹窗中出现了条目就认为文件已经落盘。

把这套流程固定成交付习惯

最小可靠流程可以压缩成一句话：先用 Slice 固定边界，再用 Export 保存 1x/2x 等配置，批量导出前看 dimension，落盘后核对尺寸、透明、边界和文件名。这样设计稿只维护一份，网页、Retina 和开发交付也能沿用同一套判断标准。