如何导出资源 #

开始分享你的设计时,你可以准确定义要导出的内容以及导出方式。

Figma 支持 PNG、JPG、SVG 和 PDF 格式的导出。在 导出设置 一文中了解有关导出格式和设置的详细信息

快速开始:如果你将要导出的对象应用了导出设置,则可以使用键盘快捷键 ⇧ + ⌘ + E(Mac)或 Shift + Ctrl + E(Windows)导出当前选择的图层、组或框架。

在本文中,我们将引导你从 Figma 导出资源:

  1. 选择要导出的元素。可以是单独的图层、对象、组或框架,也可以是画布上的多个元素。
  2. 将导出设置应用于选择。应用后,资源将添加到导出列表中。你可以对不同的元素应用不同的导出设置。
  3. 将导出列表中的所有内容导出。

提示

如果你正在使用多个设计工具,那么你可能希望将对象,组或整个文件导出或复制到另一个系统中。 有关更多信息,请查看 导出到其它工具

1. 选择要导出的元素 #

你可以导出:

  • 单个图层或对象。
  • 已选择的多个图层或对象。
  • 单个组、嵌套框架或顶级框架。
  • 已选择的组、嵌套框架或顶级框架。
  • 使用切片工具定义的特定区域。
  • 整个画布。
  • 多个框架导出到一个 PDF 文档中,一个框架是一页。

提示

如果要将画布上的所有内容导出为一张图,可以在不选择任何图层的情况下在属性面板中应用导出设置。

在将元素添加到导出列表或使用 Export【文件名】 按钮立即导出之前,你可以查看导出文件的预览。

2. 应用导出设置 #

你可以在导出设置中准确定义要导出的对象、图层或框架的方式。

你可以在属性面板中的 Export 部分找到这些设置。

你可以对不同的元素应用不同的导出设置。

在导出设置中可以定义 导出大小(Size)后缀(Suffix)格式(Format)内容(Content) 以及其他一些导出 SVG 时的特殊设置。

导出设置 一文中了解有关使用、添加和删除导出设置的详细信息。

提示

如果文件中有多个页面(pages),可以在文件中的所有页面上添加导出资源。 它们都将添加到同一个导出列表中,并可以批量导出。

3. 导出资源 #

将导出设置应用于需要导出的元素后,该元素会被添加到导出列表中。然后,你可以一次性导出所有资源。

查看导出列表并导出资源:

  1. 转到菜单(左上角的三条线)。

    • 搜索 Export

    • 或者从 File 中选择 Export

    • 或者你可以使用键盘快捷键 ⇧ + ⌘ + E(Mac)或 Shift + Ctrl + E(Windows)打开导出列表。

    然后导出列表中会显示出要导出的所有元素:

    • 将鼠标悬停在缩略图或图层名称上可查看导出的文件名:

    • 单击缩略图以找到对应画布中元素:

    • 点击复选框确定最终要导出的元素:

    • 单击 Export 按钮以导出所有选中的资源:

如果你希望从画布中导出单个资源,则可以直接从属性面板执行此操作。

  1. 在画布中选择元素。

  2. 在属性面板的 Export 部分中应用导出设置。

  3. 单击 Export Layer 按钮:

将框架导出为 PDF

你还可以将文件中的所有框架导出到一个 PDF 文档。

  • 在菜单中搜索 Export

  • 或者转到 File > Export Frames to PDF

提示

如果你尚未将任何导出设置应用于文件中的图层、组或框架,则看不到任何可用于导出的选项:

排除错误 #

通过 File > Export 菜单导出资源时,你可能会在某些图层旁边看到警告。

提示

如果你是通过属性面板中的 Export 导出资源,则不会显示导出警告。

我们已经针对一些常见错误以及如何解决这些错误给出了提示:

  • 未对齐像素:如果在导出图层时看到此消息,或者注意到导出的图像的尺寸偏离了 1 个像素(例如 1001 x 1000),则表示图层没有像素网格对齐。发生这种情况时,将使用额外像素导出图层。我们建议将图层与像素网格对齐:
  1. 你可以选中任何受影响的图层,使用 Round to Pixel((Menu > Arrange > Round to Pixel)。
  2. 你也可以启用 Snap to Pixel Grid,并手动对齐。
  • 超出最大图像大小:此消息表示导出的文件太大,超出了限制:32768 x 32768 或 2GB。浏览器对文件尺寸的限制为 4K。

  • 名称重复:当导出的文件与导出中的另一个文件名称重复时,将提示此错误。文件名基于图层、组或框架名称,因此你可以修改这些名称以保证文件名唯一。

  • 导出的图片模糊或分辨率低:如果导出的 PNG 模糊,或者你需要更高分辨率的资源,可以以更大的倍数(即 2x、4x)导出设计资源,或导出为 SVG 格式的资源