UI 設計師未來的全新工作方式？React-SketchApp 新手上路

前言

這篇也同樣適用前端工程師的工作方式，前幾天分享了Lottie 跟 AE 結合的大殺器【第921期】大殺器Bodymovin和Lottie：把AE動畫轉換成HTML5/Android/iOS原生動畫，今天來了解另一個前端跟設計師耦合的東西，有了它可能能節省不少時間。今日早讀文章由 @RayChao 授權分享。

正文從這開始~

前不久 Airbnb 才發布了讓業界抖三抖的 Lottie，就在前天，Airbnb 又對外公布了一個算是開天闢地的新的開源項目 —— React - SketchApp。從公布之初，它就迅速被設計師和前端工程師們所關注，作為非主流邊緣設計師，我被它所吸引，在第一時間了解並進行了體驗。

一、React - SketchApp 是啥？

React - SketchApp 是一個開源庫，為設計系統量身定製。它通過將 React 元素渲染到 Sketch 來連接設計和開發之間的鴻溝。

這個神奇的開源庫給設計師們提供了一個全新的設計工作流程：在時下最流行的 React 前端框架下用代碼進行設計，並實時渲染到 Sketch 中審閱設計。細思恐極，在設計圈大紅大紫的 Sketch 雖說佔了開源庫的一半名字，但其實擔當的只是一個瀏覽器的角色。真正留下的設計文檔則成了代碼。

二、為啥？？為啥？？

你一定在想，為什麼好好的，突然讓所有設計師用起代碼做設計了？為啥又要用前端框架了？這成本對我們來說有多高？聽聽 Airbnb 怎麼說吧。

一個設計系統可以讓設計師復用樣式、組件、圖形，這可以給設計師更多的時間去進行更高層次的思考。同時，一個好的設計系統也讓工程師自信地添加新功能，而不用去看密密麻麻的標註線，痛苦地和設計師來回調整像素。而同樣的，一個完善的設計系統一般都是非常龐大而複雜的，想有序地構建和發展這個系統，本身就有著巨大的工作量。在我們團隊中，瓶頸就在 Sketch Template 上。

就拿 Airbnb 的設計系統 DLS 舉例，它從字體、顏色、間隙的規範開始，逐漸發展成了跨平台、跨屏幕尺寸、跨語言的豐富設計庫。當然作為一個設計系統，永遠也不會有完成的時候，我們持續的向其中增加內容，更改和調整已有的組件，讓每一個人都可以使用它。

但是在這個過程中，每一點對這個系統的增加和更改，都會產生很大的工作量。文檔需要更新，每個 App 都需要調整，Sketch Template 又要重新繪製。而所有這些工作還必須協同進行。

Airbnb 基於 Sketch Template 的設計系統

基於圖形的設計工具在版本控制上有著先天的劣勢，所有的可以拖來拖去的元素經常讓我們對設計系統的狀態產生不確定感。「移動端 Title 字體是多大來著？」「現在最新的方案還是這樣子么？」「這個組件在不同屏幕上怎麼顯示？」諸如此類的問題在辦公室中幾乎是時時出現 。相反，代碼相對來說就更容易管理，同時我們已經有了對代碼版本管理的積累和基礎。而維護 Sketch Template 還只能依靠勞動密集的人工管理。因此我們希望通過代碼來優化整個工作流程。

Sketch 文件本身倒是可以直接用代碼組織，但是提供的 API 卻經常變化。相反 React 框架給可復用文檔提供了完美的封裝形式，同時有前端基礎的設計師可能已經比較熟悉了。

總的來說，Airbnb 在完善自己龐大設計系統的探索過程中，遇到了基於圖形的設計系統的瓶頸，因此毅然決然地走向了另一條路——基於代碼設計。強大的版本管理，可靠文檔結構，更多的信息內容，都成為了 Airbnb 選擇設計代碼化的理由。

三、核心優勢

剔除 Airbnb，在仔細看了相關文檔和項目樣例後，總結出了一下這個開源工具在構建設計系統時的核心優勢：

穩定的文檔：用成熟的前端框架作為設計系統基礎，可以保證整個設計系統長期的可用性。

數據的清晰準確：以代碼為描述設計的形式，杜絕了基於圖片描述設計時容易產生的數據不穩定。

可進行響應式設計：比起 Sketch 略顯簡陋的 Resizing，React 提供了功能完備的布局系統，可以在設計端進行準確完整的響應式設計。演示視頻

版本管理：避開了基於圖片設計的版本管理難點，git 等工具組織設計系統，讓系統更實時、可考、

跨平台開發：因為和 ReactNative 採用同一套布局系統，配合 ReactNative 可以很好地進行跨平台工作。

引入真實數據 & API：可以和任何前端開發一樣引入真實的數據和 API 實現例如實時地圖、自動多語言等有趣的功能。

以上這些優勢，確實可以切中很多團隊在構建大型設計系統時的痛點。就如我自己所在的團隊最近也基於 Sketch Template 構建了一套比較完備的設計系統。正如之前提到的 Airbnb 所提到的，在使用這個設計系統之初，我們就能感受到，未來的版本控制、規範維護上都面臨著很大的挑戰。同時，我們的設計系統在規範開發對接的這一方面還沒能做出長足的努力。

相比之下 React - SketchApp 在這些問題下，跳出了原有的思考方式，用超前全新的方案解決目前方案的痛點。

四、新手上路

說了這麼多概念上的東西，大家一定很期待從實用角度看看它到底是怎麼工作的，接下來就讓我們對 React - SketchApp 做一個初步的體驗吧。對它同樣感興趣的也可以根據下面步驟一起嘗試。

搭建環境

首先我們需要搭建項目運行的所需環境。一個是 Sketch 43+，另一個是 Node.js + npm，分別傻瓜安裝後，我們就已經有了運行的所需環境了。

驗證一下，打開終端，直接輸入

npm-v

如果返回顯示了 npm 版本，就說明一切 OK。

運行項目

直接按官網指示，先在終端輸入下方指令，將項目 Clone 到本地。

git clone https://github.com/airbnb/react-sketchapp.git

然後打開一個空的 Sketch 文檔，之後繼續在終端中運行下方指令。

cd react-sketchapp/examples/basic-setup&&npm install

npm run render

我們選擇的是官方實例中的 basic-setup，在走完進度後，我們可以在 basic-setup/src 目錄下找到 my-comman.js 文件，打開後，終於進入了 React - SketchApp 的工作狀態。

第一次接觸

有興趣和基礎的的可以先用這個 Example 為基礎試試、玩玩，看看它到底能做什麼。而作為新手一下看到這麼多代碼可能很懵逼，不過沒關係，我們可以先從最基本的入手，首先把所有代碼替換成下面的內容，然後 Command + S 保存渲染。

importReactfrom react ;

import{render,Artboard,Text,View}from react-sketchapp ;

constApp=props=>(

{props.message}

);

exportdefault(context)=>{

render(,context.document.currentPage());

}

在視圖重新渲染後，我們可以看到，內容簡單多了，更有利於我們從頭嘗試和理解。對於 API，我們可以先參看更詳細的官方文檔。

了解基本元素和圖層結構

從文檔中，我們可以看到，對於目前版本的 React - SketchApp，有幾個最基本的核心元素：、、、，通過這些元素的嵌套和配合，我們可以很容易地組合出和 Sketch 中一樣的圖層結構。

拿剛才的文件進行舉例，假如我們想給它增加一個外框，只需要用 來套住它。

name= newLayer

style={{

backgroundColor: #363636

}}

>

{props.message}

保存後我們可以直接看到效果，再看看圖層區域，實際上圖層的結構和代碼的結構非常相似。相信這時大家對元素和圖層應該有了初步印象。

Play With It！

在嘗試了上面的內容並且參考官方 Example 以後，已經算是可以開始自己的探索之路了。目前這個項目還處於 Beta 階段，甚至官方文檔還十分的簡陋。想要去體會它在布局、適配、管理、對接上的優點，需要親自開荒（目前我也在開荒）。希望在這個階段，這個文章可以作為一個引子，讓更多的人可以一起討論交流。總之，Play with it，自己親自體會代碼管理設計的神奇吧。發現新的東西我也會和大家在之後的專欄中分享。

五、總結

做出一個高效組織的設計系統並且進一步彌合開發和設計之間的鴻溝，是很多團隊都想做到的事情。有的團隊在試圖通過 Sketch 自動導出布局，有的團隊如藍湖在優化 Sketch 的項目管理。大多數這些努力都是圍繞基於視覺的設計軟體 Sketch ，總體思路都是試圖讓開發的邊緣靠近設計，而很多項目都證明了讓開發貼近設計有著越來越高的邊界成本。

Airbnb 開創了一種新的可能——讓設計面相開發，讓設計行為本身就在前端框架中發生，同時還能一併解決經典設計體系所固有的系統管理成本過高的問題。這無疑讓我們在這個新生體系中看到了巨大的潛能——面相開發設計是否是未來設計到開發的終極答案？

或許有一天，熟練掌握前端代碼，在前端框架下設計，是每一個互聯網產品設計師的全新工作方式。

最後，看完這個有一種想去下載sketch 來試玩的衝動，有這個好奇心這種能改變多少。

關於本文

作者：@RayChao

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！