Adobe XD x Flutter = 所见即所得的移动UI设计

一直以来我想找一款类似于腾讯Demo的软件,可以方便地将绘制的UI直接导出为代码,达到所见即所得的效果。在Flutter开发的过程中,尽管现在构建UI已经非常方便,但对于复杂的视觉效果和交互还是不太方便。最近Google宣布推出了一款Adobe XD插件可以直接将设计的页面导出为Widget,所见即所得的移动UI设计成为可能。

在使用Adobe XD之前,我们需要新建一个Flutter项目,并在pubspec.yaml中添加adobe_xd包。假如我们的UI使用到了图片,也需要在assets内写明图片的路径。同时需要在Adobe XD上安装插件XD to Flutter,除了官方插件外还有其他第三方导出到Flutter的插件,如果感兴趣也能去体验。

在我们设计好了UI后,我们进入插件-XD to Flutter-UI Panel,分别点击页面内的每个图片,设置图片的Image Export Name,否则导出后AssetImage的路径为空。UI Panel的首页有一项Image Path说明了图片的保存位置,如果有必要可以修改。

举个例子,我们的图片位置为assets/images/gene.png,那么需要点开对应的图片,在导出文件名上填入gene,其他图片也需要相应设置。

设置完成之后点击单个组件Export Widget或者直接Export All Widgets就能把设计导出为Flutter代码,可以根据需要增加逻辑。

所见即所得已经成为现实,目前还需要解决的问题是对于不同屏幕大小,Adobe XD的页面无法自适应,这是一个非常严重的问题。

总之希望Flutter作为新的移动开发趋势能够变得更好,UI设计更为方便。谢谢大家的阅读。

  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 许可协议。转载需要标明作者,并以超链接的方式指向原文。
  • Copyrights © 2020 Kevin Li
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~