从Adobe XD转换HTML / CSS

时间:2019-02-05 10:22:19

标签: html css user-interface adobe-xd

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

这怎么可能。

4 个答案:

答案 0 :(得分:5)

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

为了使用插件,

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

希望这会有所帮助!

答案 1 :(得分:1)

尽管有些外部插件可以帮助您实现这一目标,但您本来还不能做到。

Adob​​e XD是一种原型设计工具,即,它经过设计可用于制作网站和应用程序的设计,然后再将其传递给开发人员,该开发人员将“手动” 使用HTML / CSS / JS构建HTML / CSS / JS。它。

但是,社区此前多次要求导出为HTML / CSS / JS 功能,而Adobe团队目前正在对此功能进行检查(选中this和{{3 }}。

答案 2 :(得分:1)

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

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

有些应用程序和插件会以绝对位置导入 html 和 css,但是您对这些代码无能为力。也有Desech Studio 相对导入AdobeXD,但它不会是像素完美的,然后你必须自己调整边距和宽度。

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

答案 3 :(得分:0)

您可以为此使用Anima插件。

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