推薦閱讀：
《高顏值定制化的命令行工具，讓終端工作更高效！-Starship》
將設計稿轉代碼是前端工程師日常不斷重復的工作，這部分工作復雜度較低但工作占比較高，往往又比較枯燥繁瑣，有時候開發(fā)迭代周期短，靜態(tài)頁面又多，常常讓有些前端開發(fā)苦不堪言！
那么，有沒有一款設計稿自動生成代碼的工具，減少前端工程師的工作量，提升開發(fā)效率？
本文推薦一款前端代碼自動生成的神器CodeFun，能夠完美生成可讀性很高的代碼，目前支持微信小程序端、移動端H5和混合APP等。也就是說，通過這款工具，設計師再也不用還原走查了，測試再也不用適配樣式了，前端開發(fā)再也不用切圖寫樣式了，這不就是我們期待已久的神器嗎？
CodeFun 是什么？
CodeFun是一款相當優(yōu)秀的UI設計稿智能生成源代碼的工具，CodeFun可以精準還原設計稿，不再需要反復UI走查，節(jié)省您大量的繁瑣工作如像扣像素、調布局等。CodeFun是一款相當優(yōu)秀的UI設計稿智能生成源代碼的工具，CodeFun可以精準還原設計稿，不再需要反復UI走查，節(jié)省您大量的繁瑣工作如像扣像素、調布局等。
基本簡介CodeFun 是一款 UI 設計稿智能生成源代碼的工具，可以將 sketch、Photoshop 的設計稿智能轉換為前端源代碼。它最大的特色是：精準還原設計稿，不再需要反復 UI 走查可以生成如工程師手寫一般的代碼在日常工作中，諸如像扣像素、調布局這些繁瑣、枯燥的體力活都將得到極大的削減，原來 8 小時的工作量只需要 10 來分鐘即可完成。
基礎功能
環(huán)境準備
開始使用 CodeFun 前，需要先準備好如下環(huán)境：
1.CodeFun 賬號，請點此 注冊
2.安裝 Chrome 瀏覽器
3.安裝設計軟件 Sketch / Photoshop / Figma / XD / 即時設計
4.安裝 Sketch / Photoshop / Figma / 即時設計 插件，登陸 CodeFun 后即可下載
5.安裝小程序開發(fā)者工具或者 vscode 等 IDE，用于預覽 CodeFun 生成的代碼
6.準備一份移動應用頁面的設計稿
安裝 Sketch 插件
在官方下載頁面下載Sketch插件。
下載然后解壓，雙擊進行安裝。
在安裝插件之前，請確保系統中已經裝好 Sketch，若Sketch版本低于 55 請更新Sketch。
接著，打開 Sketch，插件菜單中出現 CodeFun 選項，安裝完成。
安裝 Photoshop 插件
在官方下載頁面下載Photoshop插件。
下載然后解壓，雙擊進行安裝。
安裝完成后重啟Photoshop，點擊菜單欄 -> 窗口 -> 擴展 -> CodeFun
安裝 Figma 插件
- 客戶端/PC端進入社區(qū)插件市場中搜索Codefun[跳轉]
- 點擊安裝(客戶端/PC同步)
- 點擊進入設計稿
- 打開插件 Main menu -> Plugins -> CodeFun
安裝 即時設計 插件
- 前往即時設計官網插件安裝頁面，點擊“安裝”即可安裝本插件。跳轉
- 點擊進入設計稿
- 打開插件（左側工具欄） 插件 -> CodeFun
上傳 Sketch 設計稿
- 根據環(huán)境準備教程安裝好插件
- 點擊菜單欄插件->CodeFun->上傳設計稿
- 選中要上傳的設計稿，設置好項目名，點擊上傳。
上傳 PSD 設計稿
- 根據環(huán)境準備教程安裝好插件
- 點擊菜單欄->窗口->擴展->CodeFun
- 選中要上傳的設計稿，設置好項目名，點擊上傳。
上傳XD設計稿
- 支持導入即時設計，直接上傳。
- 將 XD 文件格式，導入到即時設計平臺中
在即時設計的編輯頁面中，可以選擇將設計稿轉換為 Sketch 格式
將導出的Sketch格式設計稿走Sketch 上傳流程【link】
上傳 Figma 設計稿
- 根據環(huán)境準備教程安裝好插件
- 點擊 Main menu->Plugins->CodeFun
- 選中要上傳的設計稿，設置好項目名，點擊上傳。
上傳JSD（即時設計）設計稿
- 前往即時設計官網插件安裝頁面，點擊“安裝”即可安裝本插件。跳轉
- 點擊進入設計稿
- 打開插件（左側工具欄） 插件 -> CodeFun
獲取代碼
用戶在上傳完設計稿后，有兩種獲取代碼的方式：
- 區(qū)域提取代碼
- 整站打包下載
雖然兩種途徑獲取的代碼沒有任何區(qū)別，但是在使用場景上還是有少許的差異。
區(qū)域提取代碼
進入設計稿詳情頁，點擊右上角的查看代碼按鈕
即可彈出代碼面板
每一次查看代碼都會對設計稿進行重新推算，如果在詳情頁中做了任何的二次修改，可以實時得到新的變化。關于設計稿二次修改，可以參閱【link】
面板介紹
查看代碼面板一共有 4 個子面板，分別對應了 HTML、CSS、JS 和全局 CSS 四種代碼。以小程序開發(fā)為例，我們只需要將其依次拷貝到小程序的 wxml、wxss、js 和全局 wxss 文件中即可。
一定要記得拷貝全局 CSS 文件，因為如果不拷貝的話，頁面內將會出現顯示不正常。
不過全局 CSS 在同一個項目中只需要拷貝一次。以小程序為例，我們將其拷貝到 app.wxss 文件中即可。后續(xù)再拷貝其他頁面時，就不再需要拷貝全局 CSS 了。
區(qū)域提取
點擊 Dom 樹或者畫布上的任意節(jié)點，可以觀察到代碼窗口的代碼會發(fā)生變化，這正是 CodeFun 最重要的區(qū)域提供功能。用戶可以根據自己的需求，拷貝任意區(qū)域的代碼到自己已有的工程項目中。
當點擊畫布的空白區(qū)域時，Dom 樹和畫板都不再選中任何節(jié)點，此時代碼窗口將顯示整頁代碼。
提取設置
提取代碼時，可以對輸出代碼的平臺、風格進行個性化的配置，點擊如圖所示的設置按鈕
即可彈出**設置面板**
熱文推薦：
《高顏值定制化的命令行工具，讓終端工作更高效！-Starship》
《接口性能優(yōu)化十倍，來了解一下java應用診斷利器的強大！-Arthas》
《一款高顏值鍵盤演示工具，助你優(yōu)雅展示鍵盤操作！-Keyviz》
《您的跨平臺密碼守護神，安全存儲，隨心所欲，無論何處皆可信手拈來！-KeePassXC》
版權聲明：本文內容由互聯網用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發(fā)現本站有涉嫌抄襲侵權/違法違規(guī)的內容， 請發(fā)送郵件至 舉報，一經查實，本站將立刻刪除。