从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，实现的编辑器。

最关键是开源！用的不爽可以自己改～