起源是我在 DN 社區(qū)看到這么一篇文章：Painting with Code。
相關(guān)翻譯在知乎很快就有了：UI 設(shè)計師未來的全新工作方式？React - SketchApp 新手上路。
草草看一下覺得很振奮，我也很喜歡 Airbnb 在設(shè)計領(lǐng)域做的一些嘗試，當(dāng)時覺得他們發(fā)布了一款可以用代碼控制設(shè)計稿的工具很厲害，似乎未來設(shè)計師再也不用畫圖稿了，設(shè)計到開發(fā)的溝通環(huán)節(jié)也可以省略了。但是至于這款工具的真正意義，為什么它現(xiàn)在不可以雙向編輯（只能代碼影響設(shè)計稿，設(shè)計稿不能改變代碼）等一些問題我還不是很明白。
最近工作中我和開發(fā)經(jīng)過一些探討，結(jié)合知乎尤雨溪大大在相關(guān)問題下的回答，我似乎有點想明白了，這涉及到組件化的設(shè)計。
就像前端有組件化開發(fā)，設(shè)計也有組件化設(shè)計。我有一篇翻譯的文章詳細(xì)地講解了這個過程和方法（翻譯地不好，還是建議閱讀原文），簡單來說就是為了提升效率，在設(shè)計稿中把頁面分成一塊塊的組件，每個組件里面的元素又定義了相關(guān)的樣式，這樣你在做其他頁面的時候就可以復(fù)用這些樣式和組件，從開發(fā)的角度來說就是“造輪子”。Sketch 44 中有最新 v4.0 版的 iOS UI 設(shè)計模板，和之前的相比升級了不少，這套模板中的一個頁面是由四級組件構(gòu)成的：
無論怎么看這都是一個龐大的工作量，即便是像我經(jīng)手的小項目，如果嚴(yán)格按照這樣來設(shè)計組件，也是需要花不少時間的，更何況是像 Airbnb 這樣的跨國公司。維護(hù)一套設(shè)計規(guī)范需要大量人力，單單從設(shè)計的的角度來說，在 Sketch 上，即便你給每個形狀和文字都定義并且命名了相應(yīng)的樣式，也耐不住組件之多，也避免不了會出現(xiàn)改變圖層的間距導(dǎo)致修改大量細(xì)節(jié)這樣的情況，換句話說，定義樣式/組件規(guī)范是一項巨大的工作，修改維護(hù)規(guī)范也是。
注：Sketch 上有很多插件能輔助，但用的工具越多帶來的麻煩也越多，不要沉迷研究插件
最近了解了下 AntDesign 和 Element 的框架，在他們提供的 Sketch 組件設(shè)計素材中也并沒有給每個形狀和文字定義樣式，這就意味著設(shè)計師要根據(jù)自己團(tuán)隊的需求來更改這套組件就勢必要對上百個樣式進(jìn)行調(diào)整。
況且，調(diào)整完之后還需要交付給開發(fā)，期間還有溝通成本。我不禁懷疑起自己做這些瑣碎工作的意義。
用我目前淺薄的前端知識大膽猜測一下，已經(jīng)生成的前端框架再由設(shè)計師在設(shè)計稿上修改是否顯得很雞肋，定義好的樣式可否直接在代碼上直接修改，這樣只需要調(diào)整幾個參數(shù)就能使頁面整體風(fēng)格發(fā)生改變，就和有些博客的設(shè)置主題一樣。
那么回歸到本文開頭的那篇文章，Airbnb 的開源庫 React Sketch.app 的意義在哪里，我的理解就是，直接用代碼的方式來管理設(shè)計樣式和組件，顯而易見地會有兩個好處：
- 代碼管理效率高，設(shè)計師不需要手動修改每個地方；
- 減少和前端的溝通成本，都用代碼修改了，成本直接為0。
當(dāng)然很多設(shè)計師會抗拒這樣的方式：
- 不是所有設(shè)計師都需要設(shè)計整套設(shè)計系統(tǒng)；
- 花太多精力在這事上面那還有時間去搞創(chuàng)意；
- 學(xué)習(xí)代碼太費勁。
對于我這樣的懶人，倒是很樂于去走上這條不歸路學(xué)習(xí)代碼的，明白了這些痛點也就能理解 Airbnb 的設(shè)計師們?yōu)槭惨?React Sketch.app 了。當(dāng)然我理解地也比較片面，權(quán)當(dāng)對最近思考的一個總結(jié)。另外對待新事物需要過大腦，不能一味當(dāng)迷妹。
