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

GitHub 加速计划 / vu / vue
207.56 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐