8

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

这怎么可能。

4

4 回答 4

10

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

为了使用插件，

  1. 确保您拥有最新版本的 XD
  2. 转到Plugins> Discover Plugins> 搜索“网络导出”
  3. 点击“安装”

希望这可以帮助！

于 2019-02-07T18:29:38.760 回答
5

在本机上，你不能（还），尽管一些外部插件可以帮助你实现这一点。

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

但是，社区之前已经多次询问过导出到 HTML/CSS/JS功能，Adobe 团队目前正在努力解决这个问题（检查这个和这个）。

于 2019-02-05T10:27:51.297 回答
1

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

您可以position:absolute像在 Adob​​eXD 中那样使用和定位 html 节点，但这在不同的设备以及何时执行响应式代码时效果不佳。

有一些应用程序和插件可以导入具有绝对位置的 html 和 css，但是您对这些代码无能为力。还有 Desech Studio 相对导入 Adob​​eXD，但它不会是像素完美的，你必须自己调整边距和宽度。

现在大多数人都在没有任何工具的情况下手工编写 html/css，因为工具有局限性。

于 2021-07-09T12:01:02.083 回答
0

您可以为此使用 Anima 插件。

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

于 2020-06-10T16:57:40.293 回答