Airbnb在官方的設(shè)計(jì)博客中，又介紹了一款新的開源庫-React Sketch.app
博客地址：http://airbnb.design/painting-with-code/（Painting with Code Introducing our new open source library React Sketch.app）
Airbnb最近一直在設(shè)計(jì)類的拓展性工具作出實(shí)踐，年初的Lottie，作為After Effect插件，支持動畫導(dǎo)出json直接復(fù)用，給通過AE做動效的同學(xué)帶來了很大的幫助；現(xiàn)在，Airbnb將工具拓展實(shí)踐在了Sketch上，在設(shè)計(jì)工程化的路上進(jìn)行探索。
git地址：https://github.com/airbnb/react-sketchapp
那么我們可以通過React Sketch.app做些什么呢？
在git的文檔中，Airbnb給出了三個使用場景：
-Manage design systems
React Sketch.app是為了Airbnb’s design system而構(gòu)建的，提供了一種更加便捷的方法來管理設(shè)計(jì)資料。
-Use real components for designs
在你的設(shè)計(jì)中code，使用真實(shí)的React組件，然后在Sketch中完成渲染。
-Build new tools on top of Sketch
最簡單的方法將Sketch作為自定義設(shè)計(jì)工具的畫布使用。
好像也沒有理解它，我們可以看看官方的一些示例：
像Airbnb這樣體量的公司，Sketch的設(shè)計(jì)資料十分龐大，每次修訂管理，也要與前端團(tuán)隊(duì)（Web Android iOS?）進(jìn)行統(tǒng)一，這樣的過程中，無論是溝通還是執(zhí)行都會是很大的工作量。通過React Sketch.app，可以在編輯器中直接實(shí)現(xiàn)對設(shè)計(jì)資料的管理：
這樣，你就不需要再去反復(fù)溝通，排期，增加額外的工作量，直接在編譯器就能完成你的設(shè)計(jì)迭代工作。
http://airbnb.design/wp-content/uploads/2017/04/DLS-Component-Screen-Sizes.mp4
Automatically testing our components on multiple screen sizes
它是怎么實(shí)現(xiàn)的？
就像我們熟悉使用的Axure和Sketch插件（Measure和Marketch），都可以實(shí)現(xiàn)設(shè)計(jì)稿在瀏覽器中的渲染，可以在瀏覽器中查看設(shè)計(jì)稿的html&css；React Sketch.app扮演著同樣協(xié)調(diào)渲染的作用，把編譯器作為輸出源，Sketch作為“瀏覽器”。
API文檔
打開Sketch，在terminal寫出下列代碼可以快速開始：
git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install
npm run render
styling中可以看到，React Sketch.app覆蓋了大量的CSS style和flexbox layout，代碼結(jié)構(gòu)也比較清晰，容易閱讀。
似曾相識的感覺
在設(shè)計(jì)過程中引入code，React Sketch.app并不是第一家，而在幾年前也有一款產(chǎn)品，引入的是coffeescript：Framer
在同時期的產(chǎn)品中，F(xiàn)ramer是一個異類，他不像flinto，pixate，principle，不是連接畫板，調(diào)整屬性，coding實(shí)現(xiàn)的方法吸引了很多人去嘗試，但是并沒有獲得更多的擁護(hù)者，因?yàn)閏oding的學(xué)習(xí)曲線對沒有基礎(chǔ)的設(shè)計(jì)師而言并不夠友好，雖然也開始支持接入Sketch，但是還是離它的用戶很遠(yuǎn)。讓人不以為意，coding雖然對設(shè)計(jì)師而言是一項(xiàng)不錯的附屬技能，但是真的會扮演著越來越重要的角色嗎？
也許是的
現(xiàn)在設(shè)計(jì)工具和開發(fā)工具有了更多的連接，實(shí)現(xiàn)方式變得更加平滑，工作中的交集不僅限于會議，工作內(nèi)容上也略有滲透，參與更多的產(chǎn)品環(huán)節(jié)，能幫助你做得更好，從產(chǎn)品實(shí)現(xiàn)的路徑再來審視自己的設(shè)計(jì)。
很多Ghost和HEXO的博客主題設(shè)計(jì)得都很不錯，它們的實(shí)現(xiàn)也有很多是一個人完成的。
看起來很棒是不是？不過它還是面臨著一些挑戰(zhàn)：
使用者對react的學(xué)習(xí)成本；React Sketch.app并不能實(shí)現(xiàn)雙向映射，你可以通過編輯器修改Sketch文件，但是不能修改Sketch文件實(shí)現(xiàn)編譯器的代碼調(diào)整（大部分人還是跟容易接受這一種方式吧）。
這幾天也聽了Alibaba的的開放論壇，內(nèi)部工具 fusion tool 在對建立style guide的時候更加友好，有興趣的話應(yīng)該可以搜索到UCAN中，“設(shè)計(jì)工程模式化”的分享，雙向管理，第三方工具，看起來效果不錯。
