開源二期項目專題系列（一）
1. 開源項目名稱：Picasso
2. github地址： https://github.com/wuba/Picasso
3. 簡介：Picasso是58同城推出的一款sketch設計稿智能解析工具，可將sketch設計稿自動解析成還原精準，可用度高的前端代碼；從而提高前端開發效率，助力業務快速發展。
Picasso于2020年9月份開源，具備以下特點：

• UI還原度高，設計稿還原精準。
• 生成代碼可用度高，可維護性好。
• 解析工具使用方便、操作簡單，完全自動化解析。
• 針對不同的應用場景，提供運營版和普通版兩種模式。
• 支持導出多種尺寸(1倍 1.5倍 2倍 3倍)圖片，滿足不同屏幕尺寸適配需求。

項目背景UI自動化已經成為當前行業研究的趨勢，各大公司都在進行相關方向的研究，sketch設計稿存儲的是結構化數據，這給我們進行UI自動化解析生成代碼提供了契機；為了提升前端開發效率，減少頁面重構的工作，甚至某些場景下完全自動化生成代碼，Picasso智能解析工具應運而生。核心設計Picasso的核心解析流程主要包括Symbol解析、圖層重構、屬性解析、布局處理。

1. Symbol解析1). Symbol模塊整合

• 設計稿源文件中包含以下兩個json文件：Page頁面json和Symbol模塊json。
• 我們通過SymbolID的引用關系來推導出模塊之間的依賴關系，將symbol模塊json整合到各個Page頁面json中，便于后續的解析。

2). Symbol模塊傳參

• 參數只作用于其子Symbol模塊。
• 相同參數傳值：外層(父父級)參數值的權重高于內層(父級)。

3). Symbol模塊縮放

• 根據SymbolInstance和SymbolMaster的尺寸比例，等比例轉換symbolMaster的坐標尺寸，作為實例SymbolInstance的坐標尺寸。

通過對Symbol的解析，我們得了一個包含頁面重構所需的完整信息的json。2. 圖層重構圖層重構主要包含五個步驟，如下圖：

第一步. 去掉分組
由于UI設計師并不了解前端的布局習慣，他們對圖層進行的分組，往往和前端期望的結果差別較大，幾乎不可用；看下這張設計稿：

該設計稿的原始分組如下：

前端開發期望的分組如下：

因此，我們需要去掉設計稿中已有的分組，在后續的流程中進行重新分組。第二步. 分層
UI設計稿中經常會出現多層重疊的結構，例如彈層,吸底欄等；這時候需要我們進行分層處理，然后再對每層進行單獨處理。

第三步. 重新排序和組合
UI設計稿主要專注于視覺效果，對設計稿中圖層的順序沒有特別的要求，這就造成我們拿到的設計稿中圖層的順序是混亂的。

通過我們的排序算法，將圖層的按照從左上到右下的順序排列，如此同時處理圖層之間的父子關系,優化后的順序如下：

第四步. 特征分組
特征分組是Picasso解析過程的關鍵環節，我們通過提取圖層的結構特征，如位置，尺寸，類型等因素，進行特征分析，尋找相似圖層等方法，優化圖層的結構及組合方式，來提升代碼可用度。特征分組的主要流程如下：

我們來看下，在不同場景下經過特征分組處理后的解析效果：場景一.列表頁

場景二. 大類頁

第五步. 結構簡化
經歷了去組、分層、結構重組、特征分組這四個環節，圖層發生了多次聚合和重組，這個過程中會產生冗余的無用結構，需要對冗余結構進行優化。

結構優化規則:a. 容器:子元素屬于無意義元素 => 刪除子元素；b. 容器:子元素有意義，父元素無意義 => 刪除父元素；c. 圖片:父元素無背景及邊框 => 刪除父元素；d. 圖片:子元素與父元素位置大小完全相同 => 刪除父元素；e. 畫板:父元素為畫板的情況 => 不處理父元素，只處理子元素。

3. 屬性解析
屬性解析主要是將sketch源文件中的屬性一一對應成CSS樣式，這樣就得到了細節的視覺。

4.布局
在結構和樣式解析完成之后，接下來就是布局處理，布局完成之后，會進行相應的代碼生成；至此，解析工作全部完成，我們得到了前端開發需要的UI代碼。

總結

Picasso經過模塊解析、圖層重構、屬性解析、布局流程，完成了sketch源文件到代碼的自動化解析，同時保證了生成的代碼還原精準、可用度高。

未來規劃

Picasso擁抱開源之后，會繼續進行UI自動化探索，未來規劃如下：

• 持續優化解析算法，提升解析還原度和代碼可用度。
• 支持自定義DSL，便于生成小程序、RN、客戶端等多端代碼。
• 擴展解析源，例如PS設計稿的解析。

如何貢獻&問題反饋

感謝對 Picasso 的支持，可以在 https://github.com/wuba/Picasso 了解我們的項目，歡迎大家提交PR或Issue，向我們提建議或者反饋問題。

作者簡介：

黃文存：58同城 本地服務技術部 前端資深工程師 ；主要負責UI自動化、前端工程化相關工作。張志華：58同城 本地服務技術部 高級前端架構師；技術委員會委員 、負責本地服務前端團隊管理工作。
鞠美玉：58同城 本地服務技術部 高級前端工程師 ; 主要負責微信生態前端相關工作。推薦閱讀：深度學習在58商業排序的應用實踐
多樣性算法在58部落的實踐和思考
58技術沙龍 | 第十五期 走進微前端
開源｜qa_match更新啦——支持輕量級預訓練、提高問答通用性
58技術沙龍｜第十一期：基于深度學習的自動問答工具——qa_match開源項目解析

總結

以上是生活随笔為你收集整理的sketch 将动图转换为json_开源 | Picasso：sketch设计稿智能解析工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。