推荐阅读：
《高颜值定制化的命令行工具，让终端工作更高效！-Starship》
将设计稿转代码是前端工程师日常不断重复的工作，这部分工作复杂度较低但工作占比较高，往往又比较枯燥繁琐，有时候开发迭代周期短，静态页面又多，常常让有些前端开发苦不堪言！
那么，有没有一款设计稿自动生成代码的工具，减少前端工程师的工作量，提升开发效率？
本文推荐一款前端代码自动生成的神器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 插件
在官方下载页面下载Photoshop插件。
下载然后解压，双击进行安装。
安装完成后重启Photoshop，点击菜单栏 -> 窗口 -> 扩展 -> CodeFun
安装 Figma 插件
- 客户端/PC端进入社区插件市场中搜索Codefun[跳转]
- 点击安装(客户端/PC同步)
- 点击进入设计稿
- 打开插件 Main menu -> Plugins -> CodeFun
安装 即时设计 插件
- 前往即时设计官网插件安装页面，点击“安装”即可安装本插件。跳转
- 点击进入设计稿
- 打开插件（左侧工具栏） 插件 -> CodeFun
上传 Sketch 设计稿
- 根据环境准备教程安装好插件
- 点击菜单栏插件->CodeFun->上传设计稿
- 选中要上传的设计稿，设置好项目名，点击上传。
上传 PSD 设计稿
- 根据环境准备教程安装好插件
- 点击菜单栏->窗口->扩展->CodeFun
- 选中要上传的设计稿，设置好项目名，点击上传。
上传XD设计稿
- 支持导入即时设计，直接上传。
- 将 XD 文件格式，导入到即时设计平台中
在即时设计的编辑页面中，可以选择将设计稿转换为 Sketch 格式
将导出的Sketch格式设计稿走Sketch 上传流程【link】
上传 Figma 设计稿
- 根据环境准备教程安装好插件
- 点击 Main menu->Plugins->CodeFun
- 选中要上传的设计稿，设置好项目名，点击上传。
上传JSD（即时设计）设计稿
- 前往即时设计官网插件安装页面，点击“安装”即可安装本插件。跳转
- 点击进入设计稿
- 打开插件（左侧工具栏） 插件 -> CodeFun
获取代码
用户在上传完设计稿后，有两种获取代码的方式：
- 区域提取代码
- 整站打包下载
虽然两种途径获取的代码没有任何区别，但是在使用场景上还是有少许的差异。
区域提取代码
进入设计稿详情页，点击右上角的查看代码按钮
即可弹出代码面板
每一次查看代码都会对设计稿进行重新推算，如果在详情页中做了任何的二次修改，可以实时得到新的变化。关于设计稿二次修改，可以参阅【link】
面板介绍
查看代码面板一共有 4 个子面板，分别对应了 HTML、CSS、JS 和全局 CSS 四种代码。以小程序开发为例，我们只需要将其依次拷贝到小程序的 wxml、wxss、js 和全局 wxss 文件中即可。
一定要记得拷贝全局 CSS 文件，因为如果不拷贝的话，页面内将会出现显示不正常。
不过全局 CSS 在同一个项目中只需要拷贝一次。以小程序为例，我们将其拷贝到 app.wxss 文件中即可。后续再拷贝其他页面时，就不再需要拷贝全局 CSS 了。
区域提取
点击 Dom 树或者画布上的任意节点，可以观察到代码窗口的代码会发生变化，这正是 CodeFun 最重要的区域提供功能。用户可以根据自己的需求，拷贝任意区域的代码到自己已有的工程项目中。
当点击画布的空白区域时，Dom 树和画板都不再选中任何节点，此时代码窗口将显示整页代码。
提取设置
提取代码时，可以对输出代码的平台、风格进行个性化的配置，点击如图所示的设置按钮
即可弹出**设置面板**
热文推荐：
《高颜值定制化的命令行工具，让终端工作更高效！-Starship》
《接口性能优化十倍，来了解一下java应用诊断利器的强大！-Arthas》
《一款高颜值键盘演示工具，助你优雅展示键盘操作！-Keyviz》
《您的跨平台密码守护神，安全存储，随心所欲，无论何处皆可信手拈来！-KeePassXC》
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。