导出设置 #

1. 了解导出设置 #

你可以使用导出设置准确定义要导出的对象、图层或框架。 完成选择后,可以在属性面板的 Export 部分中找到并更新这些设置。

我们在下面汇总了一些有关如何使用这些设置的更多信息。

尺寸 #

导出资源的大小可以通过几种不同的方式确定。

  • 你可以使用倍数定义导出对象的大小,该将以当前大小的 X 倍导出元素。你可以选择介于 0.25x 和 1024x 之间的任何值。
  • 你可以为导出元素定义指定宽度或高度。

你只能定义宽度或高度,因此另一边将等比例计算。

我们在列表中添加了一些默认值,但你可以也手动输入:倍率(x),宽度(w)或高度(h):

导出支持的最大尺寸为 32768 x 32768,未压缩文件大小为 2GB。浏览器不支持 WebGL 中较大的图像(大于 4k)

提示

你导出的 PNG 模糊么,或者你是否需要导出更高分辨率的图像?

以更大的倍率导出你的设计资源,即 2x 或4 x。

后缀 #

导出文件的名称将基于图层面板中对象、组或框架的名称。

但是,你可以选择在文件名末尾添加后缀,以使其更具可辨性

提示

如果你在图层名称中使用了“/”,则 Figma 会将其识别为一个组,任何导出的文件将根据其层次结构放置在文件夹中。

批量重命名 一文中了解有关图层命名的详细信息。

格式 #

你可以选择四种不同的导出格式; PNG、JPG、SVG 或 PDF。

PNG(Portable Network Graphics) #

PNG 是位图图像,每个像素或“bit”由单一颜色定义。 这些 bit 排列在具有固定尺寸的“地图”上,以构成完整的图像。 它具有无损压缩功能,可确保原始图像的质量得到保持,但仅支持 RGB(A)色彩空间。 这使得 PNG 成为 Web 的通用图像格式。

JPG(Joint Photographic Group) #

JPG 也是一种具有固定尺寸的基于像素的图像格式,通常用于印刷设计和摄影。 它是有损压缩的,可能文件较小但图像质量有损失。

SVG(Scalable Vector Graphics) #

SVG 是基于 XML 的矢量图形,由可以在任何屏幕上基于数值和特定坐标渲染的形状组成。 SVG 不依赖于像素,这使其成为一种易于扩展的格式,结合其可编写脚本的特性,这使其成为网页设计中的热门选择。

SVG 不支持的一些 Figma 的功能:

  • 角度和菱形渐变导出时会改为径向渐变。
  • 背景模糊将不会导出。
  • 导出时,描边将转换为填充。
  • 默认情况下,文本将导出为形状与可编辑的文本对象。你可以通过禁用 扩展文本(Outline Text) 来保留文本可编辑功能(参见下文)。

注意

为确保一致性和最佳性能,SVG 只能以 1x 导出。 但是由于其可扩展性,你将能够在应用时缩放 SVG。 这可以以各种方式完成,例如:通过在 img 标记中添加 width =“Xpx” 或 height =“Xpx”:

PDF(Portable Document Format) #

PDF 允许你以固定布局共享文本,字体,矢量图形和图像的复杂和交互式排列。

它非常通用,因为它允许你渲染和操作设计的各个元素,同时完全独立于软件、硬件或操作系统。

PDF 由 Apple 的 Xcode 语言提供支持,这使其非常适合 iOS 应用。 你可以导出 PDF 格式的资源用于 iOS 开发或打印。

有关开发 Figma 的 PDF 导出功能的幕后花絮,请查看官方技术博客文章:Our path to creating a precise PDF Exporter (opens new window)

新增

PDF 导出现在支持文本。 这允许你在浏览器或其他软件中查看 PDF 时从页面中选择和复制任何文本。

仅导出内容 #

所有文件格式都提供了 仅导出内容(Contents Only) 选项。

选中此设置后,只有当前所选图层,组或框架的子图层将包含在导出文件中。

取消选中此选项后,与选定图层或组边界相交的任何图层或对象都将包含在导出文件中。

SVG 特定设置 #

选择 SVG 作为文件格式时,会有特殊的导出选项:

  • Include "id" attribute 将向 SVG 文件的元数据中添加“id”标记,这允许它直接在网站或其他数字设计中使用。
  • Outline Text 会将文字扩展为形状,如果要保留文本可编辑,请确保未选中此项。
  • SVG 格式仅支持描边中心对齐。Simplify Stroke 设置将自动应用于使用内部或外部对齐描边的 SVG。这将优化 SVG 代码,以确保正确被读取内部和外部描边。如果你选择不使用简化描边,则 Figma 将通过增加描边粗细并应用蒙版来制作所需的结果。 导出的图形是一样的,但会为 SVG 添加额外的代码。

2. 查看导出预览 #

在导出设置下方,你将能够看到当前元素在其导出格式中的外观预览。

当你使用切片工具、简化描边或禁用仅导出内容时,这很方便。

3. 添加导出设置 #

你可以向元素添加多个导出设置以导出多个尺寸版本。

添加新的导出设置: #

  1. 单击 Export 旁的 + 图标:

  1. 设置大小,后缀和格式。
  2. 单击菜单以打开导出选项。
  3. 根据所选的格式,你将看到一些其他选项。根据需要调整任何设置。

4. 删除导出设置 #

你也可以删除已应用的导出设置:

  1. 单击要删除的导出设置。
  2. 单击 Export 旁边的 - 图标:

该设置将从导出中删除。