公司最近有几个toC项目对UI要求比较高，所以设计师用Figma出了UI，但是根据UI写代码效率又很慢，就找了个生成代码的方式，在这记录一下
Figma是什么？
Figma 是一个 基于浏览器 的协作式 UI 设计工具，从推出至今越来越受到 UI 设计师的青睐，也有很多的设计团队投入了Figma 的怀抱，接下来我会带大家深入了解 Figma，以及我们为什么要使用 Figma。
Figma生成代码
Figma本身也集成了一些插件，比如Figma to code，但是他只能生成下图这几种语言，竟然没有vue和微信小程序，我们经常用的就是vue和小程序，无奈又在插件库里找，终于让我找到了一款插件：codefun，可以生成微信小程序和vue
codeFun
CodeFun 是一款 UI 设计稿智能生成源代码的工具，可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。它最大的特色是：
- 精准还原设计稿，不再需要反复 UI 走查
- 可以生成如工程师手写一般的代码
在日常工作中，诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减，原来 8 小时的工作量只需要 10 来分钟即可完成。
它可以为我们生成：
- Taro (Vue)
- Taro (React)
- React
- HTML5
- 微信小程序
- vue
- uni-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肯定是 简单的
