用户指南 取消(C)

使用外部资源

了解如何将资源从 Photoshop、Illustrator、Sketch 和 Web 浏览器导入 Adobe XD 中,以及如何将资源导出到 After Effects。

您可以将资源从 Adobe 应用程序(例如 Photoshop 和 Illustrator)、第三方应用程序(如 Sketch)和 Web 浏览器导入 XD 中。在 XD 中改进这些资源,或者使用它们开发交互式原型。您也可以将资源从 XD 导出到 After Effects 以进一步改进它们。

您可以根据应用程序以多种方式使用外部资源:

如果要将 Photoshop 和 Illustrator 文件转换为 XD 文件,请使用“打开”。如果要将这些文件的内容添加到现有 XD 文件中,请使用“导入”。

使用 Photoshop

您可以使用以下任意方法将 Photoshop 资源导入 XD:

  • 通过选择文件 > 打开,直接在 XD 中打开 .psd 文件。然后,即可在 XD 中编辑该文件(如同其他任何 XD 文件一样)、为交互连线以及以原型或设计规范的形式进行共享。
  • 通过选择文件 > 导入将 .psd 文件导入 XD 中。
  • 从 Photoshop 中复制位图和矢量内容,并将其粘贴到 XD 中。 
  • 将 Photoshop 资源从“资料库”面板中拖放到 XD 画布上。如需更多信息,请参阅 Adobe XD 中的 Creative Cloud Libraries
  • 将 .psd 文件复制到操作系统剪贴板并使用“粘贴外观”选项,将图像直接粘贴为图像填充。

如需更多信息,请参阅使用 Photoshop 中的设计资源

从 Photoshop 中复制和粘贴 SVG

如需从 Photoshop 中复制和粘贴 SVG,请在 Photoshop 中右键单击形状图层或矢量图层,单击“复制 SVG”,并将其粘贴到 XD 中。

从 Illustrator 导入资源

您可以在 XD 中打开 Illustrator 文件,也可导入它们。

您还可以从 Adobe Illustrator 复制矢量图和位图图像并将其粘贴到 XD 中,此时将保留与打开或导入 Illustrator 文件时相同的保真度和可编辑性。Illustrator 文件放在打开的文档中,而不是作为单独的文档打开。智能对象作为展开图层而不是位图导入,并且调整图层会得到保留。但是,您无法将 Illustrator 画板复制并粘贴到 XD。

您也可以将矢量文件复制到操作系统剪贴板并使用“粘贴外观”选项,将图像直接粘贴为图像填充。

您还可以通过将资源从“资料库”面板拖放到 XD 画布中,来将存储在 Creative Cloud Libraries 中的 Adobe Illustrator 资源导入 XD。如需更多信息,请参阅 Adobe XD 中的 Creative Cloud Libraries

从 XD 将 SVG 复制和粘贴到 Illustrator

如今,您可以将 XD 矢量内容复制到剪贴板,然后将其作为完全可编辑图层粘贴到 Adobe Illustrator 中。

如需将任何内容从 XD 复制并粘贴到 Illustrator,可执行如下操作:

1. 在 XD 中右键单击形状图层或矢量图层,然后从上下文菜单中选择复制

2. 在 Adobe Illustrator 中,依次选择“编辑”>“粘贴”,以粘贴矢量内容。

在 XD 中打开 Illustrator 文件

将 Illustrator 资源导入 XD
将 Illustrator 资源导入 XD

您可以直接在 XD 中打开 Illustrator (.ai) 文件,并将其转换为 XD 文件。打开文件后,您可以在 XD 中进行编辑,通过连线构建交互,并以原型或设计规范的形式进行共享。

如需在 XD 中打开 Illustrator 文件,请执行以下操作:

  • 在 XD 中,选择“文件”>“打开”。导航至所需的文件夹,选择 一个 .ai 文件,并在 XD 中打开。您也可以使用 Cmd+O (Mac) 或 Ctrl+O (Windows) 键盘快捷键。
  • 要在 XD(仅限 Mac)中打开文件,请将 Ai 文件拖动到 XD 图标上。
  • 右键单击 Illustrator 文件并从子菜单中选择“打开方式”>“XD”

在 XD 中打开 Illustrator 文件时,并非所有元素都能完全保持其保真度。如需查看受支持和不受支持的元素的列表,请参阅在 XD 中打开 Illustrator 文件时受支持的元素

导入 Illustrator 文件

要将 Illustrator 文件导入到 XD 中,请选择“文件”>“导入”。如果导入的 Illustrator 文件具有画板,这些画板将放在 XD 画板之下。如果 XD 画板下方没有空间,则导入的画板将放在可用空间中。如果导入的文件没有画板,其资源放在画布的中心。如果导入的文件没有画板,其资源放在画布的中心。

从 Sketch 导入资源

将 Sketch 资源导入 XD 的多种方式
将 Sketch 资源导入 XD 的多种方式

  • 您可以直接在 XD 中打开 .sketch 文件。然后,即可在 XD 中编辑该文件(如同其他任何 XD 文件一样)、为交互连线以及以原型或设计规范的形式进行共享。如需更多信息,请参阅在 XD 中打开 Sketch 文件
  • 您也可以从 Sketch 中复制资源,并将其粘贴到 XD 中。如需更多信息,请参阅从 Sketch 导入选定的资源
  • 您也可以直接从 Sketch 中将资源复制并粘贴到 XD 中,这样资源在 XD 中仍是可编辑的。
  • 您也可以将 Sketch 文件复制到操作系统剪贴板并使用“粘贴外观”选项,将图像直接粘贴为图像填充。
  • 您可以将 Sketch 内容转换为 XD 设计系统。有关详细信息,请参阅转换 Sketch 库

在 XD 中打开 Sketch 文件

您可以直接在 XD 中打开 Sketch (.sketch) 文件,并将其转换为 XD 文件。打开文件后,您可以在 XD 中进行编辑,通过连线构建交互,并以原型或设计规范的形式进行共享。

您只能打开使用 Sketch 版本 43 或更新版本创建的 Sketch 文件。如果您拥有较旧的文件,请使用最新版本的 Sketch 保存该文件,然后在 XD 中打开该文件。

如需在 XD 中打开 Sketch 文件,请执行以下操作之一:

  • 单击“文件”>“打开”。导航到所需的文件夹,选择 .sketch 文件,然后在 XD 中将其打开。
  • 将 Sketch 文件拖放到 XD 图标上,即可在 XD 中打开文件(仅限 Mac)。
  • 右键单击 Sketch 文件,并从上下文菜单中选择“打开方式”>“XD”

您也可以使用 Cmd+O (Mac) 或 Ctrl+O (Windows) 键盘快捷键。

在 XD 中打开 Sketch 文件时,并非所有元素都能完全保持其保真度。如需查看受支持和不受支持的元素的列表,请参阅在 XD 中打开 Sketch 文件时受支持的元素

从 Sketch 导入选定的资源

  1. 在 Sketch 中选择一个或多个图层或组,然后单击“制作可导出内容”

  2. 选择 SVG 作为格式,然后将该图层从 Sketch 拖到 XD 中。

    内容将以可编辑的矢量内容的形式插入到 XD 中。

将 Sketch 库转换为 XD 设计系统

现在,您可以将 Sketch 内容移到 XD 中,然后继续在设计系统上工作。您不仅可以将 Sketch 符号和元素转换为 XD 组件,而且还可以将它们作为链接资源使用。

  1. 在 XD 中打开设计系统。
  2. 资源面板上,单击链接资源。如果“资源”面板中存在现有的资源,请单击加号图标 (+)
  3. 链接资源窗口中,选择转换 Sketch 库,然后从文件选择器中选择 Sketch 文件。XD 转换源 Sketch 文档,自动将其保存为云文档,并将颜色、字符样式和组件链接到您的 XD 文档。
  4. 如果您有多个必须使用的 Sketch 库,请在“资源”面板中单击加号图标,然后重新导入其他 Sketch 库。 

Sketch 库和组件

在 XD 中处理组件时,请使用以下准则:

  1. 将转换的组件拖到画板上。 
  2. 如需编辑源组件,请单击组件实例,右键单击并选择在源文档中编辑主组件
  3. 如需编辑资源,请从“资源”面板中选择资源。
  4. 应用更改后,切换到您在处理的文档。
  5. 单击“更新”以接受更改。

如需更多信息,请参阅在 XD 中使用组件

了解详情

观看此动画演示,了解有关将 Sketch 库转换为 XD 设计系统的更多信息。

观看时长:30 秒。

1

从 Web 浏览器导入资源

您可以从所有新式 Web 浏览器中直接将图像拖放到画板上。您也可以将图像拖放到画板上的对象中,在这种情况下,系统会自动调整图像大小,使之适应对象。

您也可以将图像复制到操作系统剪贴板并使用“粘贴外观”选项,将图像直接粘贴为图像填充。

导入其他文件

要导入 PNG、JPG、TIFF、GIF、SVG、支持的视频Lottie 文件等资源,请执行下列操作之一:

  • 单击文件 > 导入,浏览并选择文件。
  • 将文件从“访达”或 Windows 文件资源管理器拖动到 XD 中。还可复制并粘贴图像文件。

导出到 After Effects

将资源导出到 After Effects
将资源导出到 After Effects

从 XD 中,您只能导出到 After Effects 2018 及更高版本。如果您安装的是旧版本,则将禁用“导出到 After Effects”选项。要启用此选项,请登录 Creative Cloud 桌面应用程序,并将 After Effects 更新到最新版本。

如果您想使用 After Effects 将 XD 设计转换为自定义动画或微互动,请执行以下操作:

  • 在 XD 中,选择要在 After Effects 中设置动画的图层或画板。 
  • 选择“文件”>“导出”>“After Effects”。如果计算机上未安装 After Effects,则此选项灰显。您也可以使用 Cmd+F (Mac) 或 Ctrl+Alt+F (Windows) 键盘快捷键。After Effects 启动(如果已关闭)或移至前台(如果在后台运行)。
  • 选定的图层或画板将作为原生形状、包含段落间距的文本、资源、内外描边和嵌套合成转移到 After Effects 项目中。您可以对同一个 After Effects 项目执行多个资源传输,并分阶段或从多个 XD 文件创建动画。

当把 XD 内容导出到 After Effects 时,并非所有元素都能完全保持其保真度。如需受支持和不受支持元素的列表,请参阅将 XD 文件导出到 After Effects 时支持的功能

导入和导出限制

要了解导入和导出限制,请参阅为什么我无法在 Adobe XD 中导入或导出文件?

更快、更轻松地获得帮助

新用户?