如何将 adobe xd 转换为 html css (vue)？

Posted 2023-02-22

【中文标题】如何将 adobe xd 转换为 html css (vue)？

【英文标题】：How do I convert adobe xd to html css (vue)?

【发布时间】：2020-01-28 15:40:01

【问题描述】：

我想使用 vue.js 制作一个单页应用程序。我得到了这样的参考https://coreui.io/vue/ 来实现它。我的同事使用 adobe xd 制作了一个原型。我的工作是将其转换为 html css，它将使其正常运行并连接到 api。我可以自动转换吗？还是我必须手动转换它。如果无法自动转换，是否有模板可以帮助我转换为 html css？我的css很弱。所以我需要一个参考。所以我可以快速转换

请帮我几个选项。谢谢

【参考方案1】：

我认为您必须手动转换 然而，社区之前已经多次询问导出到 HTML/CSS/JS 功能，Adobe 团队目前正在努力解决这个问题（请查看this 和这个）。

另外，我认为您还可以使用一个名为“Web Export”的插件。

为了使用插件，

确保您拥有最新版本的 XD

转到插件

发现插件

搜索“网页导出”

点击“安装”

【讨论】：

链接说他们已经在八月添加了这个功能。所以现在也许我们可以使用它。我希望结果转换为与原型完全相同的 CSS

【参考方案2】：

最直接的选择是手动编写 html/css，然后手动将其与 vue 组件集成。

但是既然你说你对css不是那么熟练，你可以使用Desech Studio导入AdobeXD文件，然后做一些调整，在Desech Studio中安装vue插件，然后它将你的html/css代码与vue集成直接。

查看https://github.com/desech/studio-vue 的 github 存储库以查看提示和插件的限制。