Figma生成代码、生成小程序代码、生成vue代码、codefun插件 |
您所在的位置:网站首页 › 自动生成微信小程序 › Figma生成代码、生成小程序代码、生成vue代码、codefun插件 |
公司最近有几个toC项目对UI要求比较高,所以设计师用Figma出了UI,但是根据UI写代码效率又很慢,就找了个生成代码的方式,在这记录一下 Figma是什么?Figma 是一个 基于浏览器 的协作式 UI 设计工具,从推出至今越来越受到 UI 设计师的青睐,也有很多的设计团队投入了Figma 的怀抱,接下来我会带大家深入了解 Figma,以及我们为什么要使用 Figma。 Figma生成代码Figma本身也集成了一些插件,比如Figma to code,但是他只能生成下图这几种语言,竟然没有vue和微信小程序,我们经常用的就是vue和小程序,无奈又在插件库里找,终于让我找到了一款插件:codefun,可以生成微信小程序和vue CodeFun 是一款 UI 设计稿智能生成源代码的工具,可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。它最大的特色是: 精准还原设计稿,不再需要反复 UI 走查可以生成如工程师手写一般的代码在日常工作中,诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减,原来 8 小时的工作量只需要 10 来分钟即可完成。 它可以为我们生成: Taro (Vue)Taro (React)ReactHTML5微信小程序vueuni-app相对于figma to code可能更适用于国内开发者 具体的介绍和使用方式可以查看官方文档,地址:CodeFun 简介 | CodeFun 文档 Figma使用codefun首先在figma的插件市场找到codefun并安装插件 插件安装完成后,邮件点击你的UI设计图,选择plugins--codefun 点击之后会出现codefun的弹窗,先让你扫码登录,登录之后会出现下方弹窗 账号是不需要你去操作的,项目属性你可以自定义项目名、上传画板可以选择全部画板和选中的画板,全部画板就是当前UI项目中包含的所有画板,选中的就是你当前figma界面选中的画板 你也可以选择生成移动端或者桌面端 都设置好后,点击上传,或自动为你保存画板和图片到codefun 在上传时可能会出现提示确实字体,这是因为你本机的字体库中没有包含这些文字。 如果对文字字体有要求建议你先去安装字体,安装完字体再重新上传。 如果字体没有要求可以直接点击上传 上传完成后会出现以下提示 至此已经上传到codefun,我们需要去登录codefun 的客户端,我这里没有下载使用的是网页版 我的项目 | CodeFun 登录codefun后可以看到用户控制台 个人空间中会出现刚才你上传的项目,选择一个项目打开,就是你刚刚上传的页面 注:个人免费版最多支持50个页面(这里的页面指figma中的画板) 进入页面之后你可以对他进行操作 修改样式 添加交互 生成组件等 此时点击右上角查看代码,会在页面下方弹出代码窗口 直接将代码复制到你的项目中就可以使用了 注意: 生成的代码中包含全局样式,要注意将全局代码放到全局css文件,如果放到当前页面的css中将会多出很多代码量 生成后的css样式名是XX_1、XX_1这种形式,在修改和阅读时可能会出现不便 生成的页面中如果包含图片,codefun时默认放到了他自己的云上,建议将图片拿下来自己建个云进行存储 这就是他的图片资源管理器,都是以png存储的,你可以下载这里的图片,也可以直接去figma下载图片,我一般会在figma赋值图片的svg 生成其他语言代码如果要修改生成代码语言可以点击右上角设置,在这里你可以: 选择代码语言 选择css样式平台 修改像素单位 修改分辨率 。。。。 这个工具能帮助我们快速生成代码,但是生成的代码我们肯定是要进行微调的,甚至你可能发现他生成的代码和我们的UI布局不符合,这就需要我们去手动修改了,不过整体框架都出来了,微调就简单多了,相对于我们从无到有的写代码实现UI肯定是 简单的 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |