---
title: "Figma 切图导出：@2x、SVG、批量导出，先别急着装插件"
excerpt: "Figma 自带导出已能一次出 1x/2x/3x、按宽高定尺寸、加后缀、按斜杠命名分文件夹，并用 Shift+Cmd/Ctrl+E 批量导出。只有要 WebP、打 zip、安卓 drawable 目录或自定义 DPI 时，再上导出插件。"
canonical: https://plugmate.figmod.top/blog/figma-export-assets
---

# 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](/plugin/454)、[Export .zip](/plugin/474)、[Android Resources Export](/plugin/276)、[Improved Exporter](/plugin/328)、[SVG Export](/plugin/111) 这类插件。

自带步骤来自 Figma 官方帮助：[Export static designs from Figma](https://help.figma.com/hc/en-us/articles/360040028114-Export-static-designs-from-Figma)、[Export formats and settings](https://help.figma.com/hc/en-us/articles/13402894554519-Export-formats-and-settings)、[Guide to inspecting](https://help.figma.com/hc/en-us/articles/22012921621015-Guide-to-inspecting)、[Guide to Dev Mode](https://help.figma.com/hc/en-us/articles/15023124644247-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 图层中文重命名](/blog/figma-chinese-rename) 里的批量改名方法。

## 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 导出器](/plugin/454)

作者 JerryKhw。

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

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

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

### [WebP Exporter丨webp 格式导出](/plugin/417)

作者 Felix。

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

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

### [Export .zip丨导出](/plugin/474)

作者 Brian Lovin。

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

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

### [Android Resources Export丨安卓资源导出](/plugin/276)

作者 Ashung Hung。

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

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

### [Improved Exporter丨导出](/plugin/328)

作者 Brad Forsythe。

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

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

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

### [SVG Export丨SVG 导出](/plugin/111)

作者 Hamish。

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

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

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

## 别跟这几件事混了

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

## 在觅件里怎么找

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

也可以用 AI 连觅件 MCP，用中文说「帮我找能导出 WebP 的 Figma 插件」。步骤见 [MCP 教程](/mcp-tutorial)。用中文找插件的思路，见 [用中文找 Figma 插件](/blog/find-figma-plugins-in-chinese)。

## 常见问题

**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
- 微信客服