01.契機

每一個偉大的項目背后總有一個必要的契機和一個有趣的故事，而我們的故事是這樣開始的。

在我們團隊設計師之間經常會聽到這樣一些問題：

1、這個項目是誰做的？有沒有源文件？
2、這個產品是設計規范是什么？我這樣做符合規范嗎？
3、之前那誰誰離職了，文件誰能找到？

總體說來就是設計文件管理難，規范一致性統一難，設計師對接協同難

在技術同學之間也會存在一些問題：

1、這部分代碼是誰寫的，怎么這么亂？
2、技術框架已經落后了，我們現在不這么寫了，再優化也沒有價值，我們計劃重構代碼
3、大量重復的UI還原工作，研發變身”切圖仔”
4、明明是按照設計稿還原，設計同學總說差1px

而在產品側的問題卻是這樣的：
每次都做了很多重復的事，我們版本需求量太有限了，這些問題大大影響了產品節湊和業務擴展的要求。

我們在工作協同開發過程中，一直缺少一個連通器，導致產品、設計、技術溝通協作不便，設計和技術規范落地較難。同時因為缺少容器承載導致各種資源和文件共享不便。因此使得我們重復設計和重復開發內容較多，影響了我們版本需求的吞吐量。

對于一款成熟的產品來說，夯實設計與技術的框架基礎地基，這樣才能助力我們在上空蓋更壯麗的樓閣，基于這種契機，我們希望做一次徹底的改變

1

02.故事

生逢亂世總有一些拯救世界的英雄出現。當我們帶著想法和前端專家“存哥”一起聊的時候，沒想到我們雙方的想法不謀而合，甚至在細節和方向都出奇的一致。經過幾次深度的協商溝通，我們快速制定了解決方案，同時招募研發團隊，快速的開展項目，帶著激情與理想，「58UXD」與「前端技術委員會」發起了共建項目「風火輪」。

主要通過兩方面來解決問題：

設計插件提效：通過Sketch插件進入設計師的工作流程，聚合設計資產，解決設計規范落地、設計資產可視化承載，提升設計規范和設計資產的使用率，增強資源共享避免重復設計。

設計協同管理：通過風火輪協作平臺進行團隊資產、項目管理，實現設計稿在線標注解析，供研發同學在線查看研發。

在這里有的同學就會說，這不就是做了一個藍湖嗎？

那可就想簡單了，我們的終極目標是：“把設計稿變成終端代碼”。通過智能解析，將設計稿自動化解析生成代碼，提升產研效率。

那么背后的邏輯和我們的思路又是什么呢？

3

03.代碼生成

在我們集團設計師Sketch的使用率高達90%，因此我們選擇了Sketch作為UI自動生成代碼的設計源，通過Picasso解析工具進行智能解析，高精度還原設計稿，支持多種代碼格式，滿足各種場景需求。

設計稿生成代碼的主要流程如下圖：

設計稿生成代碼的實際效果展示：

為了提升操作效率，我們將Picasso工具在風火輪協作平臺直接內置，這樣設計師上傳設計稿交付需求的同時，風火輪自動將設計稿轉換成代碼。代碼生成的UI界面與設計稿幾乎完全一致，并且代碼的可用度高，生成代碼的結構布局合理、可維護性高，提供了兩種模式: 專注于高精度解析的運營版和專注于代碼可用度的普通版，并且支持多種格式、尺寸的切圖，導出來滿足不同平臺、不同尺寸屏幕的需求。

為了保證智能解析代碼的還原度，我們通過以下幾個方式來處理解析問題：

1、還原度計算—感知哈希算法

我們將自動生成的UI頁面通過puppeteer進行截圖，通過感知哈希算法與原圖進行像素對比，計算出生成頁面的真實還原度。

2、樣式解析-漸變解析方案

在漸變處理方面，首先根據漸變類型分為線性漸變、徑向漸變、環形漸變三種，然后根據漸變值、位置等信息計算漸變方向距離及漸變節點之間的比例，最終生成漸變樣式代碼。

3、圖片處理—精準切圖方案

為了精準還原圖片，我們通過調用sketch API進行圖層截圖的方式，計算不規則圖形的精準位置及大小，精準切圖是保證我們的高精度還原頁面的關鍵；

為了保證智能解析代碼的可用度，我們通過以下三個方式來處理可用度問題：

1、結構重組

由于設計同學輸出設計稿是以視覺為主，不太關注分組結構的合理性，因此我們需要將原有的分組去掉，按照符合開發習慣的方式進行重新分組。

2、特征分組

針對列表這種重復結構的場景，我們通過特征分組算法識別相似結構，減少代碼重復，提升生成代碼的合理性

3、樣式優化-樣式精簡、樣式排序

樣式精簡及排序，使得生成代碼更貼近工程師”手寫代碼”，代碼可維護性更高。

w

04.能力與規劃

我們做一下回顧，20年12月30日成功將「風火輪」研發上線以來，歷經7個月的時間，用戶覆蓋了集團85%的產研團隊，并且覆蓋了大多數的子公司。Sketch Plugin以容器的形式承載了6000+的設計資產和14調業務的設計規范，智能生成了1500+代碼。

風火輪上線7個多月的時間，經歷的3次版本迭代，上線核心功能點20+；風火輪插件發布了2個大版本，20多個小版本迭代，快速解決了100+的線上BUG，不斷完善功能和優化體驗。并且建立了完善的用戶反饋機制，以最快的的方式解決用戶訴求。

目前為止我們生成代碼覆蓋了常見終端代碼格式：Web、Mini Programs、React Native、Flutter、iOS、Android等。代碼解析還原精度達99.8%，生成終端代碼可用度85%（目前行業頂級）

在未來我們要以解放生產力為目標，繼續深耕從設計到代碼的路線，以風火輪為媒介，將產品、設計、開發緊密的連接起來，為我們內部協同發光發熱。同時也歡迎更多的設計師和研發工程師加入我們，共同構建風火輪生態，編寫故事的下一篇章。

原文地址： 58UXD（公眾號）

轉載請注明：學UI網》把設計變成終端代碼｜風火輪背后的故事和規劃

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.dzxscac.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務