从 Adob​​e XD 转换 HTML / CSS

Convert HTML / CSS from Adobe XD

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

这怎么可能。

虽然一些外部插件可以帮助您实现这一点,但您(目前)还不能在本地实现。

Adobe XD 是一种原型制作工具,即它设计用于在将网站和应用程序的设计传递给将 "manually" 构建HTML/CSS/JS出来了。

但是,导出到 HTML/CSS/JS 功能之前已被社区多次询问,Adobe 团队目前正在处理此问题(检查 this and this).

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

的插件

为了使用插件,

  1. 确保你有最新版本的 XD
  2. 转到 Plugins > Discover Plugins > 搜索 "Web Export"
  3. 点击"Install"

希望对您有所帮助!

您可以为此使用 Anima 插件。

要为 XD 使用 Anima:www.animaapp.com/xd

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

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

有些应用程序和插件可以导入具有绝对位置的 html 和 css,但您无法使用这些代码做很多事情。也有Desech Studio相对导入AdobeXD,但像素不完美,需要自己调整边距和宽度。

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