新增:智能动画 — 为您的原型添加动态效果。 了解更多

跳过导航

导入和导出

上次更新于 2024 年 9 月 17 日
阅读时间:7 分钟

使用 Sketch,您可以轻松导出预设、切片、导出 CSS 和 SVG 代码 从任何浏览器,以及导入其他文件。

导入图像

将文件导入 Sketch 的最快方法是将其拖放到停靠图标或画布上。您可以导入

  • PNG、JPG、GIF、TIFF 和 WebP 位图图像
  • Figma 文件(.fig)
  • SVG 文件
  • SVG 代码(复制代码并粘贴以创建图层)
  • PDF 文档(每个页面都将作为其自己的画板导入)
  • AI 和 PSD 文件(支持有限,仅作为扁平化图层)

如果您要导入动画 GIF 或 WebP 图像,Sketch 将只导入第一帧。请注意,由于 Apple 在 macOS Sonoma 中放弃了对 PostScript 文件的内置支持(包括 EPS 文档),Sketch 不再支持 EPS 文件

导出画板和资源

在 Mac 应用中导出

观看课程

要在不同尺寸或格式下导出画板或资源(并允许其他人 一次导出 Web 应用中的所有资源),请选择它们,然后点击检查器底部的“设为可导出”面板。然后,按下“导出所选内容”按钮。

注意:开发人员可以在 Mac 应用中无需任何设置即可导出单个图层。

或者,在菜单栏中选择“文件”>“导出” — 或按 E 调出“导出”对话框。选择要导出的项目,然后点击“导出”以打开 MacOS 保存对话框。

您可以在将项目保存到 Mac 之前选择要导出的项目

Sketch 导出资源后,您将在画布底部看到一条“已成功导出 X 个文件”的确认消息,其中 X 是已创建文件的数量。如果您只导出单个文件,则会看到其文件名。

点击确认消息中的箭头以打开保存项目的文件夹。

将图层导出为 PNG

要将一个或多个图层导出为 PNG,请选择并将其从图层列表拖到桌面(请记住首先通过检查器将其设为可导出),或选择图层并按 E

您可以通过将图层拖到桌面来快速导出图层

您可以复制任何图层或画板,并将其直接粘贴到其他应用中作为图像。如果粘贴到的应用支持矢量数据,则粘贴的图层将保持为矢量,您可以安全地将其放大。如果应用不支持矢量数据,则 Sketch 将以 2 倍分辨率粘贴图层。

您可以直接从 Sketch 复制和粘贴高质量图像

以 PDF 格式导出画板和图层

要将图层导出为 PDF,请在图层列表中选择它们,然后在拖动图层之前按住

要将选定(或全部)画板导出为 PDF,请选择“文件”>“导出”>“画板导出为 PDF”并选择您的画板。然后,您可以选择包含画板标题、将其渲染为位图或包含画板注释(仅限工作区文档)。您还可以通过转到“文件”>“导出”>“注释导出为 CSV”以 CSV 格式导出工作区文档中的注释。要选择画板导出的顺序,请转到 设置 中的图层面板。

如果您想从任何浏览器下载资源并检查设计,请访问我们的 开发者交付文档

导出文件格式

位图

位图图像是您在 Mac 应用中导出的任何内容的扁平化版本,因此它们将在其他应用中作为单个图层打开。Sketch 可以导出为 PNG、JPG、HEIC、TIFF 和 WebP。

根据您选择的格式,您可能会看到更多导出选项

  • 保存为 Web 格式:从某些图像中去除额外的文件数据,例如 EXIF 元数据和颜色配置文件。
  • 交错 PNG:在 Web 上,交错 PNG 将尽快以其完整尺寸加载,并下载更多数据,直到达到完全质量。
  • 渐进式 JPG:与交错 PNG 类似,渐进式 JPG 在开始加载时是模糊的,并逐渐变得更清晰。
  • 质量:对于 JPG 和 WebP 图像,质量较低的图像将具有较小的文件大小。

矢量

矢量图像格式保留图层和路径,因此易于编辑和无限缩放。Sketch 支持 SVG、PDF 和 EPS 矢量格式。

某些效果在所有文件格式中都不受支持,包括 PDF 中的透明渐变,以及 SVG 中的内边框和外边框。

打印画板或切片

选择“文件”>“打印”并选择要打印的画板。如果您还没有任何画板,则可以打印切片。

使用导出预设

Mac 应用默认以其实际尺寸 (1x) 将所有内容导出为 PNG,但您可以在检查器中的 导出预设 面板中分配不同的导出设置

An annotated image showing image export options in the Inspector

检查器中的图像导出选项

  1. 尺寸 — 从下拉菜单中选择尺寸,或通过直接在“尺寸”字段中键入来创建自己的尺寸。您可以无限放大 (2x、3x 等) 和缩小 (0.5x、0.25x 等),或以像素定义特定高度或宽度(分别为 128h 或 128w)。
  2. 前缀/后缀 — 如果您要以不同的比例导出相同的图像,则可以使用“前缀/后缀”下拉菜单在每个图像之间添加前缀或后缀以进行区分,并在文件名字段中添加自定义文本。
  3. 格式 — 从下拉菜单中选择 文件格式
  4. 移除预设 — 点击X 以移除导出预设。
  5. 添加预设 — 点击+ 为此图层的导出设置添加另一个预设。
  6. 预设集 — 点击 值滑块 以选择一组预定义的预设。您还可以在此处创建新的预设集并将其移除。
  7. 创建切片 — 点击 创建切片 以直接在您使用导出预设选择的图层上创建切片。
  8. 导出所选内容 — 点击使用上面的预设导出特定图层。
  9. 预览 — 显示导出图层后的外观。您还可以将其直接拖放到桌面或其他应用中以快速导出。
  10. 共享 — 点击以获取通过邮件、信息、隔空投送等进行共享的标准选项。
  11. 修剪透明像素 — 根据您的选择,您可以移除围绕您导出的组或切片中内容的透明像素。

使用切片

切片 可导出 是一种您可以在画布上绘制的图层类型,它会将其中的任何内容导出为图像。您可以像其他图层一样选择、调整大小、移动、隐藏和组合切片。

插入切片

选择“插入”>“切片”,或按 S。然后,点击并拖动画布上的任何位置以绘制新的切片,或点击任何图层以在其周围创建切片。

如何插入切片

在图层列表中为切片提供描述性名称是值得的,因为 Sketch 会将其用作您创建的任何导出的文件名。如果您在名称中包含“/”,则 Sketch 会将您之前编写的任何内容用作文件夹名称,并将之后的内容用作该文件夹中的文件名。

与其他图层一样,您可以为切片设置多个 导出预设

自定义切片

选择切片后,您会在检查器中找到一些其他选项。

选中“修剪透明像素”将移除切片内容边缘周围的任何空白像素。

如果将切片放置在组中,选中“仅导出组内容”将确保导出仅包含该切片组中的内容。

最后,您可以选中“背景颜色”并选择颜色以将背景颜色应用于切片导出。

导出 CSS 和 SVG 代码

在文档中选择一个或多个图层,按住 Control 键并点击,然后选择“复制 CSS 属性”将样式信息复制到剪贴板作为 CSS 代码。以下是一个简单形状的 CSS 示例

/* Rectangle: */
background: #6dd400;
border-radius: 5px;
/* Rectangle: */

复制 SVG 代码的工作方式类似。选择一个形状图层,按住 Control 键并点击它,然后选择“复制 SVG 代码”。