前端人不可错过的低代码神器，告别切图，一键成稿啦！-CodeFun

将设计稿转代码是前端工程师日常不断重复的工作，这部分工作复杂度较低但工作占比较高，往往又比较枯燥繁琐，有时候开发迭代周期短，静态页面又多，常常让有些前端开发苦不堪言！

那么，有没有一款设计稿自动生成代码的工具，减少前端工程师的工作量，提升开发效率？

本文推荐一款前端代码自动生成的神器CodeFun，能够完美生成可读性很高的代码，目前支持微信小程序端、移动端H5和混合APP等。也就是说，通过这款工具，设计师再也不用还原走查了，测试再也不用适配样式了，前端开发再也不用切图写样式了，这不就是我们期待已久的神器吗？

CodeFun 是什么？

CodeFun是一款相当优秀的UI设计稿智能生成源代码的工具，CodeFun可以精准还原设计稿，不再需要反复UI走查，节省您大量的繁琐工作如像扣像素、调布局等。CodeFun是一款相当优秀的UI设计稿智能生成源代码的工具，CodeFun可以精准还原设计稿，不再需要反复UI走查，节省您大量的繁琐工作如像扣像素、调布局等。

基本简介CodeFun 是一款 UI 设计稿智能生成源代码的工具，可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。它最大的特色是：精准还原设计稿，不再需要反复 UI 走查可以生成如工程师手写一般的代码在日常工作中，诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减，原来 8 小时的工作量只需要 10 来分钟即可完成。

基础功能

环境准备

开始使用 CodeFun 前，需要先准备好如下环境：

1.CodeFun 账号，请点此 注册

2.安装 Chrome 浏览器

3.安装设计软件 Sketch / Photoshop / Figma / XD / 即时设计

4.安装 Sketch / Photoshop / Figma / 即时设计 插件，登陆 CodeFun 后即可下载

5.安装小程序开发者工具或者 vscode 等 IDE，用于预览 CodeFun 生成的代码

6.准备一份移动应用页面的设计稿

安装 Sketch 插件

在官方下载页面下载sketch插件。

下载然后解压，双击进行安装。

在安装插件之前，请确保系统中已经装好 Sketch，若Sketch版本低于 55 请更新Sketch。

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

下载然后解压，双击进行安装。

安装完成后重启Photoshop，点击菜单栏 -> 窗口 -> 扩展 -> CodeFun

安装 Figma 插件

客户端/PC端进入社区插件市场中搜索Codefun[跳转]

点击安装(客户端/PC同步)

点击进入设计稿

打开插件 Main menu -> Plugins -> CodeFun

安装 即时设计 插件

前往即时设计官网插件安装页面，点击“安装”即可安装本插件。跳转

点击进入设计稿

打开插件（左侧工具栏） 插件 -> CodeFun

上传 Sketch 设计稿

根据环境准备教程安装好插件

点击菜单栏插件->CodeFun->上传设计稿

选中要上传的设计稿，设置好项目名，点击上传。

上传 PSD 设计稿

根据环境准备教程安装好插件

点击菜单栏->窗口->扩展->CodeFun

选中要上传的设计稿，设置好项目名，点击上传。

获取代码

用户在上传完设计稿后，有两种获取代码的方式：

区域提取代码

整站打包下载

虽然两种途径获取的代码没有任何区别，但是在使用场景上还是有少许的差异。

区域提取代码

进入设计稿详情页，点击右上角的查看代码按钮

每一次查看代码都会对设计稿进行重新推算，如果在详情页中做了任何的二次修改，可以实时得到新的变化。关于设计稿二次修改，可以参阅【link】

面板介绍

查看代码面板一共有 4 个子面板，分别对应了 HTML、CSS、JS 和全局 CSS 四种代码。以小程序开发为例，我们只需要将其依次拷贝到小程序的 wxml、wxss、js 和全局 wxss 文件中即可。

一定要记得拷贝全局 CSS 文件，因为如果不拷贝的话，页面内将会出现显示不正常。

不过全局 CSS 在同一个项目中只需要拷贝一次。以小程序为例，我们将其拷贝到 app.wxss 文件中即可。后续再拷贝其他页面时，就不再需要拷贝全局 CSS 了。

区域提取

点击 Dom 树或者画布上的任意节点，可以观察到代码窗口的代码会发生变化，这正是 CodeFun 最重要的区域提供功能。用户可以根据自己的需求，拷贝任意区域的代码到自己已有的工程项目中。

当点击画布的空白区域时，Dom 树和画板都不再选中任何节点，此时代码窗口将显示整页代码。

提取设置

提取代码时，可以对输出代码的平台、风格进行个性化的配置，点击如图所示的设置按钮

即可弹出**设置面板**