在 Adobe XD 中导出设计资源

17 Mar 2025 | 4 分钟阅读

Adobe XD 允许我们以不同的图像格式导出资源,例如图标、背景图案、纹理和图像。

设计的基本过程是创建设计,与团队共享,并修改他们提供的反馈。完成应用程序设计后,下一步是与开发团队共享资源,以便将它们添加到应用程序的实际代码中,并根据创建的设计创建应用程序。

我们可以从 XD 导出图标、图像、背景、对象、文本,甚至画板等资源,并以不同的图像格式导出,例如 PNG、SVG、JPG 和 PDF。Adobe XD 提供了一种方便的方式,可以以优化的格式导出这些资源,以便在不同的平台上进行部署,例如 iOS、Android 或 Web 应用程序。

如果您在 macOS 上使用 XD,我们有一个选项可以将我们的设计引入到第三方集成中,例如 Zeplin、Avocode、Sympli、Kite Compositor 和 Protopie。

让我们了解如何将资源从 XD 导出到您的本地系统,以用于不同的平台

如何在 Adobe XD 中导出资源?

按照以下步骤从 Adobe XD 导出资源

步骤 1:选择对象或画板

要导出任何对象或画板,请使用选择工具在工作区中选择它。例如,如果我们想从我们的画板中导出一个图标,请在工作区中选择它。考虑以下来自登录页面的电子邮件字段的快照

Export Design Assets in Adobe XD

从上图来看,我们正在导出复选标记图标。

步骤 2:导航到文件 > 导出菜单

通过导航到文件 > 导出菜单选择导出选项。或者,我们可以在 Windows 中按快捷键Ctrl + E,在 mac OS 中按Command + E 键。

它将打开导出窗口,其中包含不同的导出选项。我们还可以通过文件菜单导航来选择导出单个或批量导出的选项

Export Design Assets in Adobe XD

在这里,我们可以找到导出工作区中所有可用画板的“所有画板”选项。

步骤 3:指定导出选项

现在,在导出窗口中指定导出选项。导出窗口中提供了以下选项

Export Design Assets in Adobe XD

格式: 格式菜单包含不同的格式选项,用于导出所选资源。格式选项包含 PNG、SVG、PDF 和 JPG。从该菜单中选择所需的选项。

导出尺寸: 导出尺寸允许我们指定所选资源的大小。它包含不同的选项,例如 0.5x、1x、2x、3x、4x、Web、iOS 和 Android 选项。x 格式以所选选项的倍数导出资源。例如,选择 0.5x 选项将以原始大小的一半导出资源;同样,2x 将以两倍导出,1x 将以原始大小导出资源。

Web 选项将以 1x 和 2x 格式导出资源,以满足 Web 要求。

iOS 选项将以 1x、2x 和 3x 格式导出资源,以满足 iOS 设备的要求。

Android 选项将以 idpi、mdpi、hdpi、xhdpi、xxhdpi 和 xxxhdpi 格式导出资源,以满足 Android 设备的要求。这些资源将优化如下

  • idpi - 低密度 (75%)
  • mdpi - 中等密度 (100%)
  • hdpi - 高密度 (150%)
  • xhdpi - 超高密度 (200%)
  • xxhdpi - 超级高密度 (300%)
  • xxxhdpi - 超级超级高密度 (400%)

我们可以通过将资源导出到不同的文件夹来轻松地为不同的团队组织资源。这将帮助开发团队以所有必需的格式获取资源。

导出到: 导出到选项允许我们指定资源的位置。我们可以为特定团队创建一个特定的文件夹并导出其资源。例如,要向 Android 团队提供资源,我们可以创建一个名为 Android 的单独文件夹来放置与 Android 团队相关的所有资源。

步骤 4:导出资源

一旦我们根据我们的要求指定了所有资源选项,我们现在就可以通过单击导出按钮来导出它。它将资源保存在指定的文件夹中。现在,我们可以与团队共享它们。

总结: 设计的基本过程是创建设计,与团队共享,并修改他们提供的反馈。完成应用程序设计后,下一步是与开发团队共享资源,以便他们可以将它们添加到应用程序的实际代码中,并根据创建的设计创建应用程序。

为了方便共享资源,请选择资源并按快捷键Ctrl + E,然后根据要求导出它们。


下一主题Adobe XD 插件