从 Adobe XD 转换 HTML / CSS
Convert HTML / CSS from Adobe XD
刚刚下载了 Adobe XD,我想我会爱上它的。我只是有一个问题将它从 Adobe XD 导出到 HTML / JS / CSS 并将它移植到我在 Visual Studio 中的代码,所以我可以做 WebForm。
这怎么可能。
虽然一些外部插件可以帮助您实现这一点,但您(目前)还不能在本地实现。
Adobe XD 是一种原型制作工具,即它设计用于在将网站和应用程序的设计传递给将 "manually" 构建HTML/CSS/JS出来了。
但是,导出到 HTML/CSS/JS 功能之前已被社区多次询问,Adobe 团队目前正在处理此问题(检查 this and this).
Adobe XD 有一个插件生态系统,您可以在其中下载第三方构建的插件来完成 Adobe XD 本身不支持的任务。对于网络导出,我可以推荐一个名为 "Web Export."
的插件
为了使用插件,
- 确保你有最新版本的 XD
- 转到
Plugins
> Discover Plugins
> 搜索 "Web Export"
- 点击"Install"
希望对您有所帮助!
您可以为此使用 Anima 插件。
要为 XD 使用 Anima:www.animaapp.com/xd
AdobeXD 使用 x 和 y 坐标将元素定位在 canvas 上。这不是 HTML/CSS 用于网站的方式。您需要创建一个 html 结构并使用网格、flex 等定位元素
您可以使用 position:absolute
并像在 AdobeXD 中那样定位 html 节点,但这在不同的设备上以及何时执行响应代码时效果不佳。
有些应用程序和插件可以导入具有绝对位置的 html 和 css,但您无法使用这些代码做很多事情。也有Desech Studio相对导入AdobeXD,但像素不完美,需要自己调整边距和宽度。
现在大多数人在没有任何工具的情况下手写html/css,因为工具有局限性。
刚刚下载了 Adobe XD,我想我会爱上它的。我只是有一个问题将它从 Adobe XD 导出到 HTML / JS / CSS 并将它移植到我在 Visual Studio 中的代码,所以我可以做 WebForm。
这怎么可能。
虽然一些外部插件可以帮助您实现这一点,但您(目前)还不能在本地实现。
Adobe XD 是一种原型制作工具,即它设计用于在将网站和应用程序的设计传递给将 "manually" 构建HTML/CSS/JS出来了。
但是,导出到 HTML/CSS/JS 功能之前已被社区多次询问,Adobe 团队目前正在处理此问题(检查 this and this).
Adobe XD 有一个插件生态系统,您可以在其中下载第三方构建的插件来完成 Adobe XD 本身不支持的任务。对于网络导出,我可以推荐一个名为 "Web Export."
的插件为了使用插件,
- 确保你有最新版本的 XD
- 转到
Plugins
>Discover Plugins
> 搜索 "Web Export" - 点击"Install"
希望对您有所帮助!
您可以为此使用 Anima 插件。
要为 XD 使用 Anima:www.animaapp.com/xd
AdobeXD 使用 x 和 y 坐标将元素定位在 canvas 上。这不是 HTML/CSS 用于网站的方式。您需要创建一个 html 结构并使用网格、flex 等定位元素
您可以使用 position:absolute
并像在 AdobeXD 中那样定位 html 节点,但这在不同的设备上以及何时执行响应代码时效果不佳。
有些应用程序和插件可以导入具有绝对位置的 html 和 css,但您无法使用这些代码做很多事情。也有Desech Studio相对导入AdobeXD,但像素不完美,需要自己调整边距和宽度。
现在大多数人在没有任何工具的情况下手写html/css,因为工具有局限性。