从其他应用程序(如 Photoshop、Illustrator、After Effects、Sketch)中导入资源,甚至将图像从 Web 浏览器拖放到 Adobe XD 或将图像从剪贴板粘贴到 Adobe XD 中。

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

您可以通过多种方式导入资源(具体取决于您使用的应用程序)。

注意:

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

使用 Photoshop

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

从 Photoshop 导入资源

您可以通过多种方式将 Photoshop 资源导入 XD:

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

在 Photoshop 中编辑图像

按照以下步骤可通过 XD 直接在 Photoshop 中编辑 JPG、PNG、GIF 或 BMP 图像并实时更新它们:

  1. 双击以从重复网格或蒙版中选择图像,从而访问放置图像的图层。

  2. 右键单击图像并选择“在 Photoshop 中编辑”。如果系统中已打开 Photoshop,则图像将作为新文件打开,其名称与 XD 中的图像层名称相同。如果未安装应用程序,则此选项灰显。

    在 Photoshop 中编辑图像
    在 Photoshop 中编辑图像
  3. 在 Photoshop 中编辑和改进您的图像,然后单击“文件”>“保存”。图像作为平面位图图像自动发送到 XD。

    注意:

    只要 Photoshop 还在后台中打开,您就可在应用程序中还原图像更改或者进行更多更改。

在 XD 中打开 Photoshop 文件

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

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

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

您也可以使用 Cmd+O (Mac) 或 Ctrl+O (Windows) 键盘快捷键。如果您最近打开过 PSD 文件,您也可以从开始屏幕上的“最近打开的文件”列表中打开它。

注意:

Photoshop 和 XD 具有许多不同的功能集。XD 会导入可与 XD 功能相对应的 Photoshop 元素和效果。其余元素会被栅格化,或暂时不会被传输到 XD 文件中。如需了解此版本支持哪些元素,请参阅在 XD 中打开 Photoshop 文件时受支持的元素

将 Photoshop 文件导入 XD

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

将 Photoshop 文件导入 XD 时:

  • 从 Photoshop 导入的智能对象具有高保真度并且可以编辑。
  • 不丢弃 Photoshop 图像的调整图层。
  • 文件放在打开的文档中,而不是作为单独的文档打开。
  • 智能对象作为展开图层而不是位图导入,并且调整图层会得到保留。
  • 保留从 Photoshop 到 Creative Cloud 库资源的所有链接。

从 Photoshop 中复制和粘贴位图内容

如需从 Photoshop 导入位图内容,请执行以下步骤:

您可以使用选框工具从 Photoshop 中选择位图内容并进行复制。然后选择以下选项之一:

  • “编辑”>“复制”,选择当前图层上的内容
  • “编辑”>“合并副本”,选择选区中所有图层上的内容。

将复制的内容粘贴到 XD 中。

  1. 在位图或文本图层中进行全选(Cmd+A Ctrl+A)(或者先将矢量图层或组转换为智能对象)。

  2. 复制内容。

  3. 将内容粘贴到 XD 中。

    该图层会被粘贴为位图。

从 Photoshop 中复制和粘贴 SVG

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

从 Illustrator 导入资源

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

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

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

您还可以通过将资源从“Libraries”面板拖放到 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 文件复制到操作系统剪贴板并使用“粘贴外观”选项,将图像直接粘贴为图像填充。

在 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 中。

从 Web 浏览器导入资源

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

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

导出到 After Effects

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

注意:

仅 After Effects 2018 和 2019 版本支持导出到 After Effects。如果您安装了旧版本,则“导出到 After Effects” 选项会在 XD 中禁用。若要启用此选项,请登录您的 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 时支持的功能

导入其他文件

如需导入以 PNG、JPG、TIFF、GIF 或 SVG 文件的形式保存的资源,请执行以下操作之一:

  • 在 XD 中,在 Mac 上,单击“文件”>“导入”,然后进行浏览并选择文件。在 Windows 上,单击汉堡菜单,然后选择“导入”
  • 将 Finder 或 Windows 文件资源管理器中的图像拖放或复制并粘贴到 XD 中。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略