用户指南 取消(C)

导出和下载设计规范中的资源

了解如何导出和下载设计规范中的资源。

导出设计规范中的资源

如果您为图层添加了导出标记,并在发布设计规范时,在其中包含了资源,则您可以通过已发布的设计规范链接下载这些资源。矢量资源可以 SVG、PNG、PDF 和 JPG 格式提供,而位图资源可以 PNG、PDF 和 JPG 格式导出。

为图层添加导出标记

将已添加导出标记的图层作为资源包含在设计规范中。如需为资源添加导出标记,请选择画布上的任意图层,并选择以下任一选项:

  • 单击任意画板图层,然后从弹出菜单中单击“添加导出标记”复选框。
  • 右键单击画布上的该图层,然后从弹出菜单中选择“添加导出标记”
  • 在 macOS 中使用 快捷键,在 Windows 操作系统中使用 快捷键。
  • 打开图层面板,然后单击图层名称旁的 “添加导出标记”图标。

如需导出多个资源,请选择同一画板的多个图层,并单击“添加导出标记”

“添加导出标记”选项

发布带有资源的设计规范

发布设计规范时,如果您在其中包含资源并与开发人员共享已发布链接,您就向开发人员提供了一个集中位置来下载这些资源。

  1. 在 XD 中为图层添加导出标记。

    为图层添加导出标记
    添加导出标记

  2. 单击“共享”以切换到“共享”模式。选择“开发”

    共享设计

  3. “设计”模式下,选择要导出的资源。在“属性检查器”中,选中“添加导出标记”复选框。要导出的资源随即出现在“共享”模式下。

  4. 共享模式下,选中可下载资源复选框以标记要导出的资源,然后单击创建链接

    由于平台所对应的设计有所不同,每个平台都具备单独的一组分辨率设置:

    • Web:资源将以“1 倍”“2 倍”分辨率导出。
    • iOS:资源将以“1 倍”“2 倍”“3 倍”分辨率导出。
    • Android:资源会针对以下 Android 屏幕密度进行优化并导出:
      • ldpi — 低密度 (75%)
      • mdpi — 中等密度 (100%)
      • hdpi — 高密度 (150%)
      • xhdpi — 超高密度 (200%)
      • xxhdpi — 超超高密度 (300%)
      • xxxhdpi — 超超超高密度 (400%)
  5. 要在浏览器中打开已发布的设计规范,请单击“在浏览器中打开”图标,然后选择画板以查看资源。浏览器会显示所选资源以及其他画板详细信息。

    在将指针悬停在资源上时,上下文选择会用蓝色突出显示所选资源。

从设计规范下载资源

如果您是开发人员,则可从与您共享的已发布设计规范链接下载资源。在屏幕详细信息视图中,您可以同时下载画板上的所有可下载资源。您也可以在图层详细信息视图中逐个下载资源。

屏幕详细信息视图

在画板外部单击时,您将进入其屏幕详细信息视图。 

在屏幕详细信息视图中,您可以在“属性检查器”的资源部分中查看归类为图像、视频、动画和音频的所有可下载资源。

屏幕详细信息视图
画板的屏幕详细信息视图,画板中包含已选择下载的资源

要下载资源,请在资源部分中执行以下操作:

1. 单击以选择要一起下载的资源:

  • 要选择多个资源,您可以使用 Shift 键。
  • 要选择某个资源类型的所有资源,请单击一个资源,然后使用 Cmd或 Ctrl+A

这将显示已选定资源部分,其中显示归类为图像、视频和音频的已选定资源的数量。

2. 单击下载

资源会以 .zip 文件的形式下载到计算机上的 Downloads 文件夹中。在下载图像时,您可以将矢量图像的格式更改为 SVG、PDF、PNG 和 JPG,并将位图图像的格式更改为 PNG、PDF 和 JPG。

注意事项

  • 如果您将鼠标悬停在“资源”部分中的视频和音频资源上,则系统将显示它们的文件扩展名。
  • 如果一个视频有多个副本,则在画板上的“资源”部分中,仅显示该视频的一个实例。将鼠标悬停在“资源”部分中的视频上时,画板上将突出显示该视频的所有实例。
  • 如果多个视频具有相同的封面图像,则在画板上的“资源”部分中,将显示该封面图像的每个实例。
  • 将不同类别的资源一起下载时,下载的 .zip 文件夹将包含这些类别的子文件夹。
  • 您在下载视频文件时,只能采用设计人员将视频文件导入其 XD 设计文档时使用的格式。要了解支持的视频格式,请参阅使用视频
  • 在屏幕详细信息视图中,对于给定组件,“资源”部分中仅显示该组件的上次检查状态或活动状态以供您下载。要下载所有状态的资源,请在画板上选择组件图层并切换到图层详细信息视图。

图层详细信息视图

在画板上选择一个图层时,您会切换到图层详细信息视图。在图层详细信息视图中,您只能下载选定图层的资源。

图层详细信息视图
选定图层具有可供下载的视频、海报图像和链接的音频文件

要下载选定图层中的某个资源,请在“属性检查器”的资源部分中,单击该资源旁边的下载

下载视频

在画板上选择视频图层时:

  • 您可以下载视频和海报图像。
  • 如果视频连接到音频播放,您还可以下载该音频文件。

Lottie 下载

在画板上选择 Lottie 图层时:

  • 您可以按 JSON 文件形式下载 Lottie 动画。
  • 如果 Lottie 连接到音频播放,您可以下载该音频文件。

组件下载

要下载某个组件的资源,请在画布上选择该组件。然后,在“属性检查器”中,切换到每个状态以下载其资源。

在 XD 应用程序中,如果设计人员为一个组件的多个实例添加导出标记,则只会导出“图层”面板中的最后一个实例。

XD 44 及更高版本的下载体验

对于从 XD 44 及更高版本发布的链接:

在单击下载时,将显示一个指示进度的对话框。下载完毕后,即可继续检查画板或从一个画板导航到另一个。

显示下载进度的对话框
从 XD 44 和更高版本发布的链接中显示下载进度的对话框。

如果下载资源时出错,请让设计人员重新发布链接并再次共享它。

下载资源时出错
下载资源时出错

更快、更轻松地获得帮助

新用户?