由設計稿轉化爲前端代碼的實現思路

從設計稿直接生成前端代碼，省去中間流程，作到精度還原的同時並節約研發資源，已經有不少團隊在研究和實踐這樣的思路。

筆者簡單描述一下思路，以 sketch 爲例，拋磚引玉。

先上圖：

解釋：

第一步：和設計師約定設計規範，好比如何排布圖層，如何分組，如何命名等

第二步：編寫 sketch 插件，將符合設計規範的設計稿轉化爲 「sketch code」（即 sketch 輸出的一套 DSL）

圖片內容來自 imgcook

第三步：制定映射關係，將 「sketch code」 映射爲 「fe code schema」

圖片內容來自 imgcook

第四步：將 「fe code schema」 轉化爲多平臺特異的代碼片斷

圖片內容來自 imgcook

第五步：將代碼片斷集成到項目工程中

Done.

相關工具

• Sketch2Code
• imgcook
• fusion design
• 鹿班
• Sketch 插件 Blade
• react-sketchapp
• pix2code
• PxCook

好文推薦

• www.cnblogs.com/sskyy/p/781…
• www.cnblogs.com/dhsz/p/8431…
• cloud.tencent.com/developer/n…