一键部署设计稿至线上 —— D2C国产神器
微软近期推出了Power Apps 新功能 Express Design。只要上传一个草图或者是 Figma 文件，Express Design 都会在几秒钟之内用 AI 技术将其转化为一个应用程序。
不写代码就能生成一个应用，一直以来是我们的梦想，目前主要分为两个派别，一种是面向非开发人员为主的平台：Low Code、No Code ，另一种是面向所有人员的智能化平台：Design to Code，那我们今天就来体验一下 Power Apps 到底如何，在后面我们也将讨论与微软竞争的国产软件们。
Power Apps功能体验
我们今天来体验一下这个 Express Design。
首先登录 make.powerapps.com/ 首页，登录必须是教育账号，或者是公司账号。我这里申请了个 a1 的教育账号来体验。
点击 + 创建
Express Design 支持图片或者是 figma 文件的方式导入，我们先选择 图片 的方式导入
然后看效果
总体来说情况比较一般，我们再来试试导入 figma 的情况
这是一个 figma 的设计稿
首先需要获取到 figma 的设计url 和 token
效果非常的一般。
3.介绍目前国内业界有的一些产品 （code.fun 、imgcook 、58、蓝湖 等众多公司等
国内业界目前也有很多这种方向的优秀低代码平台/方案，像 code.fun ，imgcook，58 的 毕加索等等
首先我们来看看大名鼎鼎阿里出品的 imgcook，首先在 figma 插件中 找到 imgcook 插件，点击 run
然后出来一个弹窗，点击导出
成功后前往 www.imgcook.com/editor#/ 粘贴数据
然后就生成了我们的项目
我们可以可以到，大概的布局都还原了，但是一看细节，却不太尽人意。
当然我们可以使用右侧的面板来自己进行后期调整
但是这链接颜色，真的也太累人了吧。
然后再看看我们比较关注的拟人化的代码书写 + 布局方式
好吧。。。布局已经稀巴烂了。
我将生成后的代码放到了 codesandbox 方便大家编辑和体验。
可以在 codesandbox 编辑看效果：codesandbox.io/s/eager-dir…
在线预览地址：9mt732.csb.app/
我们再来看看另外的几家产品，由于蓝湖、58毕加索不支持 figma 文件，暂时测试不了。我们就来试试 code.fun 的效果吧。
继续在 figma 搜索 codefun 插件，点击 run 后， 微信扫码登录
然后选择创建的方式，以及设计稿类型
然后我们来到编辑界面，几乎就是完美实现，除了头图有部分色差外，基于一模一样。
然后我们点击在线预览按钮，即可生成在线地址，无须手动导入到 codesandbox
大家可以在线体验一下：ide.code.fun/api/p/63256…
当然 codefun 也和 imgcook 类似，具有右侧的后期处理功能
还实现了类似 chrome tools 中的元素选择器，用于快速定位元素。
默认情况下复杂的配置面板也是收起的，需要点击可视化编辑器后才 会出现
设计稿中的列表也是自动识别了，从布局上使用了 flex 纵向布局，从代码上，使用 data 数据循环生成，可以说这个思路非常的程序员化，而不是中看不中用的 “人工智障”
接着我也从 figma、即时设计上找了几个设计稿在 codefun 上生成效果，感觉都非常的不错，如果你想生成一个静态的落地页，真的强烈推荐，秒级部署。
冬日饮品潮流
设计稿：
地址：
效果图：（页面也是响应式的）
冬日饮品潮流
设计稿：
地址：
效果图：
在生产多次页面的时候也发现了一些问题：
1.每次生成链接的时候，我并没有改动都需要重新生成链接
2.有时候会出现图片丢失的情况
3.部分情况有色差需要手动调整
不过总的来说，从 微软的 power apps 再到 imgcook 最后到 codefun ，可以发现我们国产的软件并不比国外的差，也许有一天我们会引领者标准！