公司最近有几个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肯定是 简单的