导出设置 #

1. 了解导出设置 #

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

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

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

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

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

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

提示

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

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

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

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

提示

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

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

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

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

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

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

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

注意

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

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 作为文件格式时，会有特殊的导出选项：

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