真效率神器,UI稿智能转换成前端代码,准确率极高
大家好,我是若川。在這充滿網絡促銷活動的幾個月,倍感壓力的,除了你的口袋,是否還有程序員的發量呢?每年的雙十一、雙十二購物狂歡節,各大電商平臺都會上線讓消費者充滿購買欲望的活動頁面,而這些活動頁面大多都是靜態頁面,只是為一些商品提供一個入口,UI設計小姐姐設計完頁面之后交給前端程序員,然后程序員就開始無聊繁瑣的搬磚。如果有一款神器,可以直接將UI小姐姐的設計稿轉換成頁面代碼,是否能讓廣大前端開發者大呼萬歲?
神器來了!
正常項目流程
使用神器之后
CodeFun是什么?
CodeFun 是一款 UI 設計稿智能生成源代碼的工具,可以將 Sketch、Photoshop 的設計稿智能轉換為前端源代碼。它最大的特色是:
精準還原設計稿,不再需要反復 UI 走查
可以生成如工程師手寫一般的代碼
在日常工作中,諸如像扣像素、調布局這些繁瑣、枯燥的體力活都將得到極大的削減,原來 8 小時的工作量只需要 10 來分鐘即可完成。
官網鏈接掃碼識別進入
掃碼一鍵注冊產品,限時免費體驗
設計稿格式與輸出平臺
目前主流的 UI 設計軟件有 Sketch、Photoshop、XD 和 Figma,目前 Sketch和PS 版本已完美支持,XD和Figma插件正在開發。
| Sketch | 插件上傳 | ? 完美支持 | |
| PSD | 插件上傳 | ? 完美支持 | |
| SVG | Web 端文件上傳 | ? 技術預覽版 | 可以將 PSD / XD 先導出為 SVG 再上傳 |
| XD | 插件上傳 | 🕜 后續支持 | |
| Figma | 插件上傳 | 🕜 后續支持 | 目前可以導出為SVG格式再上傳 |
設備終端和平臺
| 微信小程序 | ? 支持 | 原生 / uni-app/taro |
| 移動端 H5 | ? 支持 | vue /react |
| 混合 App | ? 支持 | uni-app / taro |
| 桌面 Web | 🕜 后續支持 | vue / react |
| 原生iOS | ? 暫不支持 | |
| 原生Android | ? 暫不支持 |
安裝插件
PS插件安裝使用
CodeFun的ps插件最低支持到PS2018版本,所以大家在安裝之前,要檢查一下自己的ps版本哦!
進入官網下載 ?ps插件
雙擊下載的codefun.psplugin.v0.3.3.exe(Windows)或者codefun.psplugin.v0.3.3.pkg(macOS)安裝包
重啟ps
PS菜單欄 -> 窗口 -> 擴展 -> CodeFun
根據上操作,看到下圖,說明PS插件安裝成功啦!
然后掃碼登陸,選中要上傳的頁面,點擊上傳就能在CodeFun的操作面板上看到剛剛上傳的設計稿了
進入CodeFun的操作面板
Sketch插件安裝使用
CodeFun的sketch插件最低支持到55版本,所以大家在安裝之前,也要檢查一下自己的sketch版本哦!
進入官網下載 ?sketch插件
解壓下載的codefun.sketchplugin.v0.8.8.zip
雙擊codefun.sketchplugin安裝插件
重啟sketch
sketch菜單欄 -> 插件 -> CodeFun
代碼智能生成!!
上面已經將CodeFun插件安裝好了,接下來讓我們感受一下CodeFun帶來的神奇體驗!我們準備了有接近100個頁面的設計稿,來嘗試一下生成這么多頁面的效果如何!
上傳完畢后,查看一下控制面板
我們選擇一張個人中心的頁面, 這個頁面的組成元素有grid網格布局,下面展示一下CodeFun的代碼生成質量
Grid網格布局代碼:
網格布局css代碼:
可以注意到上方css中,CodeFun是生成了grid-template-columns: repeat(4, 1fr)這種仿手寫的代碼,而不是使用絕對定位去實現的頁面布局。
我們再選擇一個含有list列表的頁面,看一下CodeFun的識別情況
先上頁面圖
CodeFun對上圖頁面智能識別的代碼:
JS代碼:
通過上方代碼不難發現,CodeFun并沒有生成很多冗余的列表代碼,而是使用for循環去實現的。
再來體驗一下CodeFun的數據綁定功能!
數據綁定生成的代碼:
CodeFun已經自動將數據綁定的代碼生成!怎么樣,這一套體驗下來,有沒有讓你心動呢?不要著急,我們將這接近一百個頁面的代碼選擇vue平臺全部下載下來,然后跑起來看看是什么樣的!
點擊右上角下載代碼,選擇平臺為vue,設置好首頁點擊下載
使用開發工具打開下載的項目
在項目運行npm install安裝所需要的依賴
最后使用命令npm run serve運行項目
項目順利運行,并且底部的tabbar也都正常定位
我用十分鐘完成了上面的操作,解決一百張頁面的代碼全部生成完畢!在用剩下的3天完成一些邏輯部分,怎么樣?有沒有被這個強大的智能代碼生成震撼到呢?從此,前端工程師再也不用寫無聊的靜態樣式代碼啦!
效率
整體來說,從生成活動頁面,和商城頁面來說,基礎樣式布局是很完美的,節約了大量的時間成本,讓開發者專注于業務邏輯的處理,將后端獲取的數據直接渲染在頁面上即可,不再因為UI小姐姐的繁瑣布局而頭疼,真正的提升了開發者的效率。
感受
面對如今活動平凡,花樣繁雜的需求,配合使用codefun真正可以做到 部門領導 們要求的低成本、高效率、高產出。將前端工程師的時間花在刀刃上!重要的是codefun不管是針對UI設計師還是前端開發者都是零成本使用,設計師在設計時并不需要使用什么特別標注或者規范以供codefun識別,只需要根據自己的設計習慣將界面設計完成就好,codefun會根據其AI算法將設計文稿智能編組。前端工程師也只需要將生成代碼復制或者下載使用即可。
團隊使用codefun之后也降低了開發和UI的溝通成本。設計文稿完成后直接用codefun上傳,然后將項目跑起來和UI進行確定即可,而不是項目做了一半才發現布局的不合適。
更多詳情和疑問,可以加群獲取技術支持哦!
總結
以上是生活随笔為你收集整理的真效率神器,UI稿智能转换成前端代码,准确率极高的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [html] 请使用一个div写出有三
- 下一篇: Mac新手必装App推荐