Figma 切图导出：@2x、SVG、批量导出，先别急着装插件

「Figma 怎么切图」「怎么导出 @2x、@3x」「图标怎么导 SVG」「一整页的图标怎么一次导完」——很多人第一反应是搜「Figma 切图插件」。其实 Figma 自带的导出已经覆盖了大多数切图需求，插件只在几种特定场景里才真正省事。

先说结论：

• 要多倍图：给同一个图层加多条导出配置，比如 1x、2x、3x，各自配后缀，一次导出。
• 要固定尺寸：在倍数框里输入带 w（固定宽）或 h（固定高）的数值，比如 512w。
• 要按文件夹整理：图层用斜杠命名，比如 icon/arrow/left，导出时会自动生成嵌套文件夹。
• 要一次导一大批：先给需要的图层都加好导出配置，再按 Shift Command E（Mac）/ Shift Ctrl E（Windows）批量导出。
• 要 WebP、打成 .zip、生成安卓 drawable 目录、自定义 DPI，或压小 SVG：再考虑 Figma Exporter、Export .zip、Android Resources Export、Improved Exporter、SVG Export 这类插件。

自带步骤来自 Figma 官方帮助：Export static designs from Figma、Export formats and settings、Guide to inspecting、Guide to Dev Mode。插件部分只写觅件详情里能核对的信息，没有在你的文件里代跑过界面；打开后跟说明不一致，以你看到的为准。

1. 先确认你有没有导出权限

官方说明：任意计划都能导出。有 can view 权限的人也能导出，前提是文件所有者没有限制复制和分享；Slice（切片）工具 需要 can edit 权限。

Export 区在哪里：

• 有编辑权限：右侧边栏靠下的 Export 区。
• 只有查看权限：右侧边栏 Properties 标签下的 Export 区。
• 在 Dev Mode：右侧边栏，选中对象后才出现。

看不到 Export 区？官方建议先刷新页面；还不行，多半是文件所有者限制了查看者导出，这时要找所有者开权限，插件也绕不过去。

2. 单个图层怎么导出

1. 选中要导出的图层、Frame、组件、组或 Section。什么都不选时，导出的是当前页面整张画布。
2. 在 Export 区点 +，添加一条导出配置。可以加任意多条。
3. 设置格式和倍数（见下一节）。
4. 可选：点 Preview 看效果（同时选中多个对象时不显示预览）。
5. 点 Export。

浏览器版会存到浏览器默认下载位置；桌面版会让你改名并选保存位置。

小技巧：Frame 带背景填充、但你只想要里面的内容时，在右侧 Fill 区取消勾选 Show in exports，导出的文件就不带这层底色。

只是临时贴到别处？右键对象 → Copy/Paste as → Copy as PNG 或 Copy as SVG，不用落地文件。

3. @2x、@3x 和固定尺寸怎么设

倍数框可以直接选默认倍数，也可以自己输入：

• 数字后加 x：倍数，比如 2x、3x。
• 数字后加 w：固定宽度，比如 512w。
• 数字后加 h：固定高度，比如 100h。

后缀（Suffix）：填什么就拼在文件名后面，不用改图层名。官方例子是 Frame 叫 HomePage、后缀填 draft，导出文件名就是 HomePagedraft.png。所以要得到 icon@2x.png，后缀就填 @2x。

典型做法：同一个图标加三条配置——1x 不填后缀、2x 填 @2x、3x 填 @3x，一次导出三份。

两个容易踩的坑：

• SVG 和 PDF 只能 1x 导出。SVG 本身是矢量，要大要小交给代码里的宽高；PDF 要其他倍数就换格式。
• 默认导出的位图是 72 DPI，2x 就是 144 DPI、3x 是 216 DPI。把 2x 的图再拖回 Figma，看起来会被缩回一半——这是 Figma 按高清屏素材自动处理的，不是导错了。

4. 选哪种格式

官方支持的静态导出格式是 PNG、JPG、SVG、PDF 四种：

• PNG：无损、支持透明。图标、Logo、带文字的图表、插画用它；体积比 JPG 大很多。
• JPG：有损压缩、体积小、不支持透明，压缩可能让文字发糊。适合照片类、网页大图。默认质量是 High。
• SVG：矢量、可无限缩放、支持透明。图标、Logo、要响应式缩放的插画用它。
• PDF：版式固定，适合幻灯片、打印稿，以及给 iOS（Xcode 支持 PDF）交付素材。默认质量是 Medium。

导 SVG 前要知道：

• 文字默认转成轮廓（Outline text），导出后改不了字。要保留可编辑文字，取消勾选 Outline text。
• 描边会被导成填充。
• 背景模糊要直接作用在图层上。
• 内描边、外描边默认用 Simplify stroke 处理，因为 SVG 只支持居中描边。
• 需要给前端用 id 时，打开 Include "id" attribute，id 取自图层名。

其他设置：

• Ignore overlapping layers（默认开）：只导出选中的图层，压在上面或下面的其他图层不会混进来。
• 颜色配置：在 Export settings 里可选 Same as file、sRGB、Display P3。给网页用的切图，一般和开发确认一下要哪种。
• 图片重采样：在 Advanced export settings 的 Image resampling 里选。默认 Detailed 适合照片、渐变、阴影；图标、Logo、像素画这类硬边素材选 Basic 更利落。

5. 用斜杠命名，导出自动分文件夹

官方说明：图层名用斜杠分隔时，导出会按名字建嵌套文件夹。比如图层叫 button/pill/default，导出后是 button → pill 文件夹里的 default 文件。

所以切图前先把图层名理顺，往往比装插件更省事。图层名一团乱的话，可以先看 Figma 图层中文重命名 里的批量改名方法。

6. 一次导一整批：批量导出

1. 先给每个要导出的图层都加好导出配置（倍数、格式、后缀）。
2. 打开主菜单，选 File → Export；或按快捷键：
   • Mac：Shift Command E
   • Windows：Shift Ctrl E
3. 弹窗里会列出当前页面所有带导出配置的对象，能看到倍数、格式和尺寸；悬停缩略图或图层名可看导出文件名；点缩略图会跳到画布上的位置。
4. 取消勾选不想导的。
5. 点 Export。

注意：它只扫当前页面。多页文件要逐页导。

7. 要导出画布上的一块区域：Slice 工具

要截一块不对应任何单个图层的区域，比如一段流程、一张高清截图，用 Slice：

1. 在工具栏的 Region tools 下拉里找到 Slice。
2. 在画布上拖出要导出的区域，之后可移动、改大小。只有切片边界内的内容会被导出。
3. 像普通对象一样给它加导出配置。

切片还能精确控制留白：普通对象的留白按形状边界算，形状变了留白跟着变；切片的范围是固定的。需要 can edit 权限。

8. 开发自己取图：Dev Mode

开发有 Dev Mode 时，不一定要设计师手动切图：

• Dev Mode 会自动识别图标，在 Inspect 标签的 Assets 区列出来。悬停某一项，选文件类型，点下载图标即可。
• 选中一张图片，可以选 Source image file（当初导入 Figma 的原图，全分辨率）或 Layer export（按画布上当前尺寸导出）。
• 不想让图标被打包识别、要单独看里面的矢量图层：主菜单 → View → 取消勾选 Automatically detect icons。
• 也可以像设计模式一样，在 Inspect 标签的 Export 区点 + 自定义导出。

这条路的前提是对方有 Dev Mode 席位；没有的话，还是设计师按上面的方法导好交付。

9. 何时才需要导出插件

自带已经覆盖：多倍图、固定宽高、后缀、斜杠分文件夹、批量导出、切片、Dev Mode 取图。下面几种情况才值得装插件：

• 要 WebP：官方静态导出格式里没有它。
• 要把一批切图直接打成 .zip 发给别人。
• 要按安卓 drawable 目录结构（如 drawable-xhdpi）出图，或要 nine-patch、自适应图标。
• 要自定义 DPI（比如印刷需要），而不是只靠倍数换算。
• 图标库要更干净、体积更小的 SVG 代码。

下面几款都在觅件库里，介绍来自插件详情；觅件当前都标免费，安装时若提示与「免费」不符，以安装时提示为准。不编未核对的按钮名。

Figma Exporter丨Figma 导出器

作者 JerryKhw。

详情写明：把资源导出为 PNG / JPG / WebP / SVG / PDF，面向 Web、Android、Flutter、iOS、React Native。

适合：一个项目要同时给多端出图，或必须交 WebP。

不适合：只要 PNG / SVG 多倍图——自带配置 + 批量导出就够了。

WebP Exporter丨webp 格式导出

作者 Felix。

详情写明：从 Figma 导出适用于 Web 或 Android 的 .webp 文件。

适合：只缺 WebP 这一种格式，不想装功能更多的导出器。

Export .zip丨导出

作者 Brian Lovin。

详情写明：选中内容后运行插件，会用你的选区和已设置好的导出配置，直接导出成一个 .zip 文件。

适合：切图要打包发给外包、客户或开发。它沿用你在 Export 区设好的配置，所以第 3 节的倍数和后缀先配好。

Android Resources Export丨安卓资源导出

作者 Ashung Hung。

详情写明：按 Android 文件夹结构（drawable-xhdpi 等）导出 PNG、nine-patch 和自适应图标。

适合：直接给安卓工程交资源，不想手动建 mdpi / hdpi / xhdpi 一堆文件夹再逐个改名。

Improved Exporter丨导出

作者 Brad Forsythe。

详情写明：可自定义 DPI、缩放设计，并导出 PNG、JPEG、SVG、PDF、WEBP；面向印刷设计师和对导出精度要求高的场景。

适合：印刷物料要指定 DPI。

不适合：普通屏幕切图——自带倍数换算已经够准。

SVG Export丨SVG 导出

作者 Hamish。

详情写明：节省导出 SVG 集的时间、减小 SVG 文件体积，让图标库得到干净一致的 SVG 代码。

适合：维护图标库、SVG 要直接进代码仓库。

不适合：只导一两个图标——自带 SVG 导出即可。

别跟这几件事混了

• 导出动画（GIF、视频）不是这篇说的静态导出，官方有单独的动画导出说明。
• 导出设计变量、样式给代码，是设计令牌问题，不是切图。
• 给开发标尺寸，见 Figma 设计标注。
• 想保存整个文件副本，是另存 .fig 文件，不是导出切图。

在觅件里怎么找

到 觅件 搜「导出」「切图」「WebP」「SVG」，或从「🔨 工具」「🪄 编辑&造型」分类进去。先看中文介绍和是否付费，再决定要不要装。会员可翻页与无限搜索；定价见 定价页（永久 ¥69.9，或按月 ¥19.9，付一次用 30 天，不自动扣款）。

也可以用 AI 连觅件 MCP，用中文说「帮我找能导出 WebP 的 Figma 插件」。步骤见 MCP 教程。用中文找插件的思路，见 用中文找 Figma 插件。

常见问题

Figma 怎么导出 @2x 图？ 选中图层，在 Export 区点 + 加一条配置，倍数选 2x，后缀填 @2x，点 Export。

能一次导出 1x、2x、3x 吗？ 能。同一个图层加三条导出配置即可。

为什么 SVG 只能 1x？ 官方只支持 SVG 以 1x 导出。SVG 是矢量，显示尺寸交给代码里的宽高。

怎么一次导出一整页的切图？ 给每个图层配好导出设置，然后按 Shift Command E（Mac）或 Shift Ctrl E（Windows），在弹窗里勾选后导出。只针对当前页面。

Figma 能导出 WebP 吗？ 官方静态导出格式是 PNG、JPG、SVG、PDF，没有 WebP。需要 WebP 时用导出插件。

看不到 Export 区怎么办？ 先刷新页面；还不行，通常是文件所有者限制了查看者导出，要找所有者开权限。

这些插件会装进当前文件吗？ 不会。觅件是发现工具，点详情后再到社区页由你自己安装。

---

• 客服邮箱 hello@zhanghe.dev
• 微信客服