从 Adobe XD 转换 HTML / CSS答案

【问题标题】：Convert HTML / CSS from Adobe XD从 Adobe XD 转换 HTML / CSS
【发布时间】：2019-06-29 03:24:49
【问题描述】：

刚刚下载了 Adobe XD，我想我会喜欢它的。我只是有一个问题将它从 Adobe XD 导出到 HTML / JS / CSS 并将其移植到我在 Visual Studio 中的代码，所以我可以做 WebForm。

这怎么可能。

【问题讨论】：

【解决方案1】：

Adobe XD 有一个插件生态系统，您可以在其中下载第三方构建的插件来完成 Adobe XD 本身不支持的任务。对于 Web 导出，我可以推荐一个名为“Web Export”的插件。

为了使用插件，

希望这会有所帮助！

【讨论】：

【解决方案2】：

虽然一些外部插件可以帮助您实现这一点，但您本身（目前）还不能。

Adobe XD 是一种原型设计工具，即它被设计用于生成网站和应用程序的设计，然后将其传递给将“手动”构建 HTML/CSS/JS 的开发人员它。

不过，导出到 HTML/CSS/JS 功能之前已被社区多次询问，Adobe 团队目前正在努力解决此问题（请查看 this 和 this）。

【讨论】：

【解决方案3】：

AdobeXD 在画布上使用 x 和 y 坐标定位元素。这不是 HTML/CSS 适用于网站的方式。您需要创建一个 html 结构并使用网格、flex 等定位元素。

您可以使用 position:absolute 并像在 AdobeXD 中那样定位 html 节点，但这在不同的设备以及何时执行响应式代码时无法正常运行。

有一些应用程序和插件可以导入具有绝对位置的 html 和 css，但您对这些代码无能为力。还有Desech Studio，相对导入AdobeXD，但不会像素完美，需要自己调整margin和width。

现在大部分人都是手工编写html/css，没有任何工具，因为工具有局限性。

【讨论】：

【解决方案4】：

您可以为此使用 Anima 插件。

要将 Anima 用于 XD：www.animaapp.com/xd

【讨论】：