airbnb又發(fā)布了款開源工具，這次是一個利用react來生成sketch設(shè)計稿的工具。
基本原理
是利用sketch開放的api接口，把react寫的組件按照接口邏輯輸入sketch。這樣就可以通過代碼來管理設(shè)計稿啦。
我曾經(jīng)嘗試過玩耍sketch的api接口，但是發(fā)現(xiàn)連官方文檔的示例都運行不起來。。。目前skecth的api接口還不夠穩(wěn)定，還在調(diào)整。相關(guān)的參考資料很少，得專門去看一些著名插件的源碼，所以本來想基于sketch開發(fā)一套自動生成設(shè)計規(guī)范的想法半途而廢了。
躺在我微信公眾號里就有一篇關(guān)于給sketch開發(fā)插件的文章，等sketch的開放接口研究透了再更新哈。
回到react-sketch.app，這是一種用代碼作為設(shè)計語言，用于設(shè)計稿版本管理的嘗試。
我趁空閑，看了一遍官方文檔，有些看法。下面來談?wù)?/span>react-sketch.app能做啥?
1、官方示例ProfileCards
可以建立組件庫，這樣以后設(shè)計師需要使用，直接調(diào)用，迭代也方便了，修改一處，其他套用的組件都一并修改了，大大減少了工作量。
通過通過代碼做版本控制，用代碼描述設(shè)計，避開了基于圖片設(shè)計的版本管理難點，設(shè)計師可以用git 等工具組織設(shè)計系統(tǒng)。
順便介紹下版本控制（Version Control）
版本控制，作用是追蹤文件的變化。
為什么需要版本控制？簡單說，就是當你出錯了，可以很容易地回到?jīng)]出錯時的狀態(tài)。
你可能已經(jīng)在不知不覺中，布置了自己的版本控制系統(tǒng)。比如，創(chuàng)建了類似下面這樣的文件名：
*KalidAzadResumeOct2006.doc
*KalidAzadResumeMar2007.doc
*instacalc-logo3.png
*instacalc-logo4.png
* logo-old.png
什么是版本控制系統(tǒng)？
通過文件名識別版本，對于小型項目或者單個文件也許可行。但是對于軟件開發(fā)來說，是不適用的。
你能想像嗎，要是Windows操作系統(tǒng)的源文件，是在一個叫做"Windows2007-Latest-UPDATED!!"的共享目錄中開發(fā)的，并且每個程序員都可以編輯，都有一個自己的子目錄，那會發(fā)生什么情況？那么，Windows就根本不可能被制造出來。
大型的、頻繁修改的、多人編寫的軟件項目，需要一個版本控制系統(tǒng)（簡稱VCS，行話叫做"文件數(shù)據(jù)庫"），追蹤文件的變化，避免出現(xiàn)混亂。一個好的VCS應(yīng)該做到以下幾點：
備份（Backup）和恢復(fù)（Restore）
文件的每一次編輯都得到保存，可以恢復(fù)到任意一個日期。
同步（Synchronization）
讓不同用戶隨時都能得到文件的最新版本。
撤銷（Short-term undo）
文件被你搞亂了，怎么辦？那就撤銷編輯，回到最近一次的無差錯版本。
追蹤修改（Track Changes）
文件的每一次編輯，你都可以寫下注解，解釋編輯的原因。
試驗功能（Sandboxing）
當你對文件做出重大變更時，你可以把編輯內(nèi)容暫時性地保存在一個單獨的區(qū)域，不斷進行測試和除錯。等到確認正確以后，再加入主版本。
分支（Branching）和合并（merging）
分支功能可以看成是一個更大的測試版本。你將整個的代碼做一份拷貝，然后再起一個獨立的名字，追蹤其變化，與原版本脫離關(guān)系，這就是分支。以后，你還可以將分支版本再并入源版本，這就是合并。
以上引自阮一峰的博客，做了點精簡。
2、官方示例Styleguide
可以直接生成設(shè)計規(guī)范，
官方只是簡單的一個顏色跟字體的設(shè)計規(guī)范，其他暫時沒有，看看我有沒有時間開發(fā)一套完整的，把頁面的元素、組件也自動標注，并且生成文檔。
和進行響應(yīng)式設(shè)計；
React 提供了功能完備的布局系統(tǒng)，可以在設(shè)計端進行準確完整的響應(yīng)式設(shè)計。應(yīng)用的是flex布局，Flex是Flexible Box的縮寫，意為"彈性布局"。
可以通過賦予div比例，及設(shè)置排列方式、對齊模式，來達到響應(yīng)式設(shè)計的目的。
詳情可以查看阮一峰的博客
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
Responsive design (響應(yīng)式設(shè)計)：
建立一個網(wǎng)頁，通過CSS Media Queries，Content－Based Breakpoint（基于內(nèi)容的斷點）等技術(shù)來改變網(wǎng)頁的大小以適應(yīng)不同分辨率的屏幕。
Adaptive design (自適應(yīng)設(shè)計)：
為不同類別的設(shè)備建立不同的網(wǎng)頁，檢測到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁。目前AWD網(wǎng)頁主要針對這幾種分辨率（320，480，760，960，1200，1600）
響應(yīng)式設(shè)計，只需一套代碼，減少了自適應(yīng)設(shè)計的針對不同分辨率編寫不同代碼的工作量。
3、官方示例VenueSearch on Web + Sketch w/ react-primitives, Foursquare & Google Maps
調(diào)取api,以真實數(shù)據(jù)來做設(shè)計；
可以和任何前端開發(fā)一樣引入真實的數(shù)據(jù)和 API 實現(xiàn)例如實時地圖、自動多語言等有趣的功能。
設(shè)計的時候考慮的就是真實數(shù)據(jù)的展示效果,讓設(shè)計更接地氣，避免設(shè)計稿很美，實際產(chǎn)品開發(fā)完，效果大打折扣。
以上是結(jié)合幾個官方示例，總結(jié)的react sketch.app的優(yōu)點。
還有一點要單獨說明的就是：
實時預(yù)覽
這對于程序員的意義更大，因為react寫完的前端代碼，可以實時在sketch里預(yù)覽啦，很直觀。
其實，實時預(yù)覽不是個新鮮事。
web端有:
在線JS代碼調(diào)試工具的產(chǎn)品，支持javascript、css、html代碼可視化在線調(diào)試工具。
介紹3個網(wǎng)站，有興趣可以玩玩去。
作為練習(xí)跟學(xué)習(xí)，還有調(diào)試一些小代碼，還是很好用的。
Codepen
http://codepen.io/
JSFiddle
https://jsfiddle.net/
React
https://codesandbox.io
移動端有：
React Native 開發(fā)即時預(yù)覽與分享工具。推薦一個：
Expo Sketch
https://sketch.expo.io/
入門跟快速開發(fā)react native必備?。?/p>
還有一類是IDE編輯器。
FaceBook 官方推薦的 Atom＋Nuclide
我使用過Sublime Text ,由于顏值不高,我棄用了,改用atom,最近突然發(fā)現(xiàn)還有個
IDE Deco
https://www.decosoftware.com/
decosoftware專門為 ReactNative 打造的開源 IDE Deco
特點：實時預(yù)覽,可視化調(diào)節(jié)屬性值，代碼庫模版
目前只有Mac版本，如果你正好在學(xué)習(xí)react native，可以試試。
對了，deco IDE還是開源的，可以研究下他的實現(xiàn)代碼了，用的是electron，調(diào)用nodejs的系統(tǒng)級api，然后再結(jié)合react native，實現(xiàn)的編輯器。
最關(guān)鍵是開源！用的不爽可以自己改～
設(shè)計+科技=
自在園O設(shè)計Mix科技實驗室。
聯(lián)系客服
