一、 设计交付的必要性：切图与标注 #
- 交付内容： 设计完成后需要进行交付，主要包括 **标注（標註）**和 切图（切圖）。
- 标注（Annotations）： 指设计元素中的属性和参数，以及设计过程中一些特殊的思路解释。
- 切图（Slicing/Exporting）： 指向程序提供开发过程中需要的图形素材或位图图片（如背景图、特定头像、IP 形象等），这些文件是前端实现应用所必需的。
二、 Figma 中切图的两种方法 #
Figma 提供了两种切图方式：**切片（Slice）**和 导出（Export）。
1. 切片（Slice） #
- 定义： 一种对可见区域或视觉内容进行导出的工具。
- 历史背景： 这是一个相对古老的工具，源于早年网页设计中，使用表格化布局将页面切成若干块再拼装起来实现网页的逻辑。
- 应用频率： 在今天的正常 UI 设计环境中，
Slice工具的使用环境非常少，大致可以忽略。
2. 导出（Export） #
- 定义： 将选中的任何图层直接用导出的方法输出。
- 可导出对象： 可以导出任何元素，包括选中的整个 Frame、Section、组件或图层。
三、 导出时的关键注意事项 #
在进行导出操作（Export）时，必须关注以下属性，因为它们会影响最终图片的尺寸和效果：
投影（投影）与描边（描邊）
- 导出的图形尺寸会受到投影和描边的影响。
- 例如，如果描边设置为
outside（外部），它会增加图形的原始尺寸，因为左右上下多出的描边宽度会被算进最终导出的图片中。 - 设计师在导出时必须重点关注这两个参数，才能获得想要的尺寸。
背景模糊（背景模糊）
- 背景模糊效果无法在导出后保留。
- 如果直接导出具有背景模糊的图层，它只能变成一个透明度效果，但不会在实际应用环境中保留对背景的模糊效果。
四、 导出的图片格式与应用场景 #
Figma 提供了四种主要的导出格式，每种格式适用于不同的场景：
| 格式 | 类型 | 核心特点 | 应用场景 |
|---|---|---|---|
| PNG | 位图（Bitmap） | 带透明度的无损格式。文件较大。 | 需要背景透明的图形、比较正式的图形。 |
| JPG | 位图（Bitmap） | 没有透明度的压缩格式。文件较小，肉眼不易察觉信息损失。 | 网页背景图、不要求透明度的大图，追求文件体积小。 |
| 矢量（Vector） | iOS 使用的一种矢量格式切图。 | iOS 平台的图标准备。 | |
| SVG | 矢量（Vector） | 常规的矢量图形格式。 | 安卓和网页的图标准备、其他矢量图形。 |
五、 位图与矢量图的导出逻辑差异 #
1. 位图导出（PNG / JPG） #
- 倍率（Multipliers）： 在正常的界面设计中，位图（如图标或 UI 元素图片）需要导出 1x、2x、3x 三种倍率的图。
- 这是为了匹配不同设备的屏幕密度，避免低倍率设备加载过大的文件。
- 优化建议： 对于非关键的位图内容（如背景图），通常导出 2x JPG 格式就足够了。
- 质量控制： JPG 格式支持质量（Quality）设置（高、中、低），用于进一步压缩文件大小，加快加载速度。
2. 矢量图导出（SVG / PDF） #
- 无需倍率： 矢量格式（SVG/PDF）不适用 1x、2x、3x 的倍率设置，因为矢量图本身可以无损放大缩小。
- 选中范围： 导出矢量元素（尤其是图标）时，必须选中外部的边框/外轮廓（如 Component 或 Auto Layout 容器），而不是仅仅选中内部的图形。这样才能确保导出的图形尺寸稳定。
最后一次修改于 2025-11-21