h5文件上传插件(h5文件上传插件教程)

你有多久没和前端小哥哥小姐姐撕逼了呢?

h5文件上传插件(h5文件上传插件教程)

作为UI设计师和我们对接最频繁的莫过于前端工程师了, 那你和前端“撕”的最多的是什么呢?站在设计师角度,我想无非是前端没法99%还原我们的设计稿,很多细节都看不到写不好!站在前端工程师角度便是对设计细节不敏感,很难按设计要求还原,什么分割线、阴影、颜色、间距、像素大概差不多就行。导致的结果就是前端天天被UI追着改界面,让我们前端很不爽、苦不堪言,从此UI和前端便成了一对欢喜冤家。。。那么,有没有一款设计稿自动生成代码的工具,可以减少前端工程师的工作量又可提升开发效率,同时还不必被设计追着改呢?别说还真有!!今天给各位小伙伴们推荐一款UI前端效率神器——CodeFun,上传UI设计稿就可一键转换为源代码,而且代码还原度极高,瞬间解放前端双手,UI无需设计走查,从此欢喜冤家双双把家还!

一、CodeFun是什么

CodeFun是一款致力于UI设计效果图智能生成代码神器,可以精准还原设计稿,不再需要反复 UI 走查,生成的代码如工程师手写一般的丝滑,无需进行二次修改,8 小时工作量,10 分钟就可完成,大大解放双手。

它是通过强大的 AI 算法可以识别页面中的循环列表、九宫格、等比例等多种业务模式,并输出为 v-for、grid、flex-grow 等多种仿人手风格的代码。对设计稿进行重新的计算,不依赖于设计稿中原有的分组关系和命名,所以UI设计师同学再也不用担心会增加工作量,节约大量时间来摸鱼

三步完成上传下载:

在 Sketch 插件中上传设计稿

在 CodeFun 工具中查看代码

将生成的代码拷贝到自己已有的工程中即可

1、安装 Sketch 插件

在CodeFun官网注册好账号,登陆CodeFun后在用户菜单中下载插件。

CodeFun官网:

https://ide.code.fun/u/1tE60yAu

接着,打开 Sketch,插件菜单中出现 CodeFun 选项,表示安装完成。

2、上传设计稿

打开一份 Sketch 设计稿,然后插件菜单中打开 CodeFun 插件界面,Sketch 菜单 > 插件 > CodeFun > 上传设计稿

发表评论

登录后才能评论