如何将adobe xd导出为html

Adobe XD是一个了不起的设计工具，可以让您轻松创建出色的网站设计，而无需任何先前的Web开发经验。 您可以从Photoshop导入设计的PSD文件，并创建一个引人注目的网站用户界面。

这些设计可以帮助开发人员了解您希望网站的外观，并使开发过程更加轻松。 但是，只有有限的方法可以从软件中导出设计。

您可以选择将它们保存为XD文件，并希望开发人员已经在他的系统上安装了该软件，或者将每个画板导出为单独的PNG文件，这可能有点不方便使用。

同样是关于指导技术

用于创建样机和线框的最佳3种设计工具

值得庆幸的是，有一个方便的第三方插件，可以将画板作为HTML文件导出，这就是我要谈的内容。 但在我们开始之前，你需要知道一些事情。

注意：使用此方法生成的HTML文件绝不应被视为完整网页的基础。 此方法只是与开发人员轻松共享设计的一种方法，而不是功能性网站开发过程。

使用插件将Adobe XD文件导出为HTML

现在我们已经解决了这个问题，只需按照以下简单步骤下载所需的插件，然后将Adobe XD文件导出为HTML：

第1步：单击软件左上角的汉堡菜单按钮。

第2步：完全向下滚动，然后单击“插件”选项。 这将打开主菜单右侧的新插件面板。

步骤3：从“插件”面板中选择“发现插件”选项。

步骤4：在下一页中，搜索HTML，然后单击Web Export插件旁边的Install按钮。

安装所需的插件后，打开要导出为HTML的项目，然后继续执行以下步骤。 在本文中，我将使用我在网上找到的免费Adobe XD画板。

步骤5：通过单击选择要导出的画板。

步骤6：现在单击菜单按钮，导航到Plugins面板，然后从新的Web Export插件设置中选择Export Artboard选项。

在同一窗口中，您还可以选择导出多个画板或您编辑的最后一个画板。

步骤7：在Export Artboard弹出窗口中，为文件添加名称，然后通过单击Export Folder选项旁边的tiny folder图标选择要保存文件的文件夹。

步骤8：现在，如果要向导出的文件添加外部脚本，样式表或替代字体，可以在同一窗口中添加它们。

步骤9：然后，您可以通过在“大小”选项旁边的空白处键入值来选择输出HTML文件的维度。

步骤10：为确保项目正确缩放，您还可以通过选中每个选项旁边的框从同一窗口中选择各种缩放设置。

步骤11：此外，您可以通过选中选项旁边的框来选择任何其他设置，如键盘导航，自动刷新等。

第12步：完成所有设置后，只需单击蓝色“导出”按钮即可完成。 您的画板将在您之前选择的目标文件夹中显示为HTML文件。

如果您还想与开发人员共享该信息，您还可以在同一窗口中复制画板的CSS和标记。

再次注意，导出的HTML绝不能用于开发功能齐全的网站。 截至目前，您无法直接将Adobe XD项目发布到Web上，根据Adobe论坛上的几个讨论，很快就不会有。

Adobe XD只是一个原型设计工具，允许您创建没有代码的初始设计。 准备好设计后，您可以使用Dreamweaver等平台将您的设计转换为网站。 但是，为此，您需要一些先前的Web开发经验，否则您需要雇用一些人。

同样是关于指导技术

#设计

点击这里查看我们的设计文章页面

将您的Adobe XD文件导出为HTML

因此，既然您知道如何将Adobe XD文件导出为HTML，我相信您将能够轻松地与开发人员或客户共享您的画板。 而且您不必担心任何兼容性问题。 立即安装插件并轻松开始导出画板。

接下来：查看以下文章，了解几个免费的互动网站，您可以在其中学习如何编写和编写自己的HTML网站。