从react-sketch.app说起
airbnb又发布了款开源工具，这次是一个利用react来生成sketch设计稿的工具。
基本原理
是利用sketch开放的api接口，把react写的组件按照接口逻辑输入sketch。这样就可以通过代码来管理设计稿啦。
我曾经尝试过玩耍sketch的api接口，但是发现连官方文档的示例都运行不起来。。。目前skecth的api接口还不够稳定，还在调整。相关的参考资料很少，得专门去看一些著名插件的源码，所以本来想基于sketch开发一套自动生成设计规范的想法半途而废了。
躺在我微信公众号里就有一篇关于给sketch开发插件的文章，等sketch的开放接口研究透了再更新哈。
回到react-sketch.app，这是一种用代码作为设计语言，用于设计稿版本管理的尝试。
我趁空闲，看了一遍官方文档，有些看法。下面来谈谈react-sketch.app能做啥?
1、官方示例ProfileCards
可以建立组件库，这样以后设计师需要使用，直接调用，迭代也方便了，修改一处，其他套用的组件都一并修改了，大大减少了工作量。
通过通过代码做版本控制，用代码描述设计，避开了基于图片设计的版本管理难点，设计师可以用git 等工具组织设计系统。
顺便介绍下版本控制（Version Control）
版本控制，作用是追踪文件的变化。
为什么需要版本控制？简单说，就是当你出错了，可以很容易地回到没出错时的状态。
你可能已经在不知不觉中，布置了自己的版本控制系统。比如，创建了类似下面这样的文件名：
*KalidAzadResumeOct2006.doc
*KalidAzadResumeMar2007.doc
*instacalc-logo3.png
*instacalc-logo4.png
* logo-old.png
什么是版本控制系统？
通过文件名识别版本，对于小型项目或者单个文件也许可行。但是对于软件开发来说，是不适用的。
你能想像吗，要是Windows操作系统的源文件，是在一个叫做"Windows2007-Latest-UPDATED!!"的共享目录中开发的，并且每个程序员都可以编辑，都有一个自己的子目录，那会发生什么情况？那么，Windows就根本不可能被制造出来。
大型的、频繁修改的、多人编写的软件项目，需要一个版本控制系统（简称VCS，行话叫做"文件数据库"），追踪文件的变化，避免出现混乱。一个好的VCS应该做到以下几点：
备份（Backup）和恢复（Restore）
文件的每一次编辑都得到保存，可以恢复到任意一个日期。
同步（Synchronization）
让不同用户随时都能得到文件的最新版本。
撤销（Short-term undo）
文件被你搞乱了，怎么办？那就撤销编辑，回到最近一次的无差错版本。
追踪修改（Track Changes）
文件的每一次编辑，你都可以写下注解，解释编辑的原因。
试验功能（Sandboxing）
当你对文件做出重大变更时，你可以把编辑内容暂时性地保存在一个单独的区域，不断进行测试和除错。等到确认正确以后，再加入主版本。
分支（Branching）和合并（merging）
分支功能可以看成是一个更大的测试版本。你将整个的代码做一份拷贝，然后再起一个独立的名字，追踪其变化，与原版本脱离关系，这就是分支。以后，你还可以将分支版本再并入源版本，这就是合并。
以上引自阮一峰的博客，做了点精简。
2、官方示例Styleguide
可以直接生成设计规范，
官方只是简单的一个颜色跟字体的设计规范，其他暂时没有，看看我有没有时间开发一套完整的，把页面的元素、组件也自动标注，并且生成文档。
和进行响应式设计；
React 提供了功能完备的布局系统，可以在设计端进行准确完整的响应式设计。应用的是flex布局，Flex是Flexible Box的缩写，意为"弹性布局"。
可以通过赋予div比例，及设置排列方式、对齐模式，来达到响应式设计的目的。
详情可以查看阮一峰的博客
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
Responsive design (响应式设计)：
建立一个网页，通过CSS Media Queries，Content－Based Breakpoint（基于内容的断点）等技术来改变网页的大小以适应不同分辨率的屏幕。
Adaptive design (自适应设计)：
为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。目前AWD网页主要针对这几种分辨率（320，480，760，960，1200，1600）
响应式设计，只需一套代码，减少了自适应设计的针对不同分辨率编写不同代码的工作量。
3、官方示例VenueSearch on Web + Sketch w/ react-primitives, Foursquare & Google Maps
调取api,以真实数据来做设计；
可以和任何前端开发一样引入真实的数据和 API 实现例如实时地图、自动多语言等有趣的功能。
设计的时候考虑的就是真实数据的展示效果,让设计更接地气，避免设计稿很美，实际产品开发完，效果大打折扣。
以上是结合几个官方示例，总结的react sketch.app的优点。
还有一点要单独说明的就是：
实时预览
这对于程序员的意义更大，因为react写完的前端代码，可以实时在sketch里预览啦，很直观。
其实，实时预览不是个新鲜事。
web端有:
在线JS代码调试工具的产品，支持javascript、css、html代码可视化在线调试工具。
介绍3个网站，有兴趣可以玩玩去。
作为练习跟学习，还有调试一些小代码，还是很好用的。
Codepen
http://codepen.io/
JSFiddle
https://jsfiddle.net/
React
https://codesandbox.io
移动端有：
React Native 开发即时预览与分享工具。推荐一个：
Expo Sketch
https://sketch.expo.io/
入门跟快速开发react native必备啊！
还有一类是IDE编辑器。
FaceBook 官方推荐的 Atom＋Nuclide
我使用过Sublime Text ,由于颜值不高,我弃用了,改用atom,最近突然发现还有个
IDE Deco
https://www.decosoftware.com/
decosoftware专门为 ReactNative 打造的开源 IDE Deco
特点：实时预览,可视化调节属性值，代码库模版
目前只有Mac版本，如果你正好在学习react native，可以试试。
对了，deco IDE还是开源的，可以研究下他的实现代码了，用的是electron，调用nodejs的系统级api，然后再结合react native，实现的编辑器。
最关键是开源！用的不爽可以自己改～
设计+科技=
自在园O设计Mix科技实验室。
长按识别二维码即可获取更多～