Sketch 是一款主流的矢量设计工具，广泛用于 UI/UX 设计、网页设计和移动应用设计。切图是将设计稿导出为实际开发可用的图片或其他资源的过程。以下是如何在 Sketch 中进行切图的详细步骤。

设置 Sketch 导出选项

在 Sketch 中，你可以为任意图层、组、符号或画板设置导出选项。

1.选择图层或画板

在左侧图层列表中，选择你想要导出的图层、组、符号或画板。

2.设置导出格式

• 在右侧的属性面板中，找到 “Make Exportable” 选项。
• 点击“+”号按钮，添加一个导出选项。
• 选择你需要的导出格式（如 PNG、JPG、SVG、PDF 等）。
• 你可以为同一个对象添加多个导出格式和尺寸。例如，同时导出 1x、2x 和 3x 的 PNG 图像。

导出 Sketch 资源

导出单个图层或画板

• 选中你已经设置好导出选项的图层或画板。
• 在右侧属性面板中，点击“Export”按钮。
• 选择导出路径并确认导出。

批量导出

• 在左侧图层列表中，选中所有需要导出的图层或画板。
• 右键点击选中的图层或画板，选择 “Export Selected”。
• 在弹出的对话框中选择导出路径并确认导出。

使用 Sketch 切片切图（Slices）

切片是 Sketch 中专门用于切图的一种图层类型，可以更灵活地控制导出的区域和尺寸。

创建切片

• 选择工具栏中的切片工具（或使用快捷键 'S'）。
• 在画板上拖动创建一个切片区域，调整切片的大小和位置。
• 在右侧属性面板中，为切片添加导出选项（格式、尺寸等）。

导出切片

• 选中切片，点击右侧属性面板中的“Export”按钮。
• 选择导出路径并确认导出。

使用 Sketch 组件切图（Symbols）

符号是 Sketch 中的一种复用组件，可以在多个地方使用同一个符号，并统一更新。

创建符号

• 选中你想要转换为组件的图层或组。
• 右键点击选中的图层或组，选择 “Create Symbol”。

导出符号

组件可以像普通图层一样设置导出选项。如果你需要导出带透明背景的图片，确保导出格式选择 PNG 或 SVG，并在导出选项中勾选透明背景。

使用 Sketch 插件上传切图

Sketch 有丰富的插件生态，可以使用一些插件来自动生成并快速导出切图，例如「腾讯 CoDesign」。

导出带透明背景的图片

使用 CoDesign For Sketch 插件 (opens new window)，一键上传设计稿自动生成标注切图，在线预览、团队协作、交付研发更高效。