Airbnb在官方的设计博客中，又介绍了一款新的开源库-React Sketch.app
博客地址：http://airbnb.design/painting-with-code/（Painting with Code Introducing our new open source library React Sketch.app）
Airbnb最近一直在设计类的拓展性工具作出实践，年初的Lottie，作为After Effect插件，支持动画导出json直接复用，给通过AE做动效的同学带来了很大的帮助；现在，Airbnb将工具拓展实践在了Sketch上，在设计工程化的路上进行探索。
git地址：https://github.com/airbnb/react-sketchapp
那么我们可以通过React Sketch.app做些什么呢？
在git的文档中，Airbnb给出了三个使用场景：
-Manage design systems
React Sketch.app是为了Airbnb’s design system而构建的，提供了一种更加便捷的方法来管理设计资料。
-Use real components for designs
在你的设计中code，使用真实的React组件，然后在Sketch中完成渲染。
-Build new tools on top of Sketch
最简单的方法将Sketch作为自定义设计工具的画布使用。
好像也没有理解它，我们可以看看官方的一些示例：
像Airbnb这样体量的公司，Sketch的设计资料十分庞大，每次修订管理，也要与前端团队（Web Android iOS ）进行统一，这样的过程中，无论是沟通还是执行都会是很大的工作量。通过React Sketch.app，可以在编辑器中直接实现对设计资料的管理：
这样，你就不需要再去反复沟通，排期，增加额外的工作量，直接在编译器就能完成你的设计迭代工作。
http://airbnb.design/wp-content/uploads/2017/04/DLS-Component-Screen-Sizes.mp4
Automatically testing our components on multiple screen sizes
它是怎么实现的？
就像我们熟悉使用的Axure和Sketch插件（Measure和Marketch），都可以实现设计稿在浏览器中的渲染，可以在浏览器中查看设计稿的html&css；React Sketch.app扮演着同样协调渲染的作用，把编译器作为输出源，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，代码结构也比较清晰，容易阅读。
似曾相识的感觉
在设计过程中引入code，React Sketch.app并不是第一家，而在几年前也有一款产品，引入的是coffeescript：Framer
在同时期的产品中，Framer是一个异类，他不像flinto，pixate，principle，不是连接画板，调整属性，coding实现的方法吸引了很多人去尝试，但是并没有获得更多的拥护者，因为coding的学习曲线对没有基础的设计师而言并不够友好，虽然也开始支持接入Sketch，但是还是离它的用户很远。让人不以为意，coding虽然对设计师而言是一项不错的附属技能，但是真的会扮演着越来越重要的角色吗？
也许是的
现在设计工具和开发工具有了更多的连接，实现方式变得更加平滑，工作中的交集不仅限于会议，工作内容上也略有渗透，参与更多的产品环节，能帮助你做得更好，从产品实现的路径再来审视自己的设计。
很多Ghost和HEXO的博客主题设计得都很不错，它们的实现也有很多是一个人完成的。
看起来很棒是不是？不过它还是面临着一些挑战：
使用者对react的学习成本；React Sketch.app并不能实现双向映射，你可以通过编辑器修改Sketch文件，但是不能修改Sketch文件实现编译器的代码调整（大部分人还是跟容易接受这一种方式吧）。
这几天也听了Alibaba的的开放论坛，内部工具 fusion tool 在对建立style guide的时候更加友好，有兴趣的话应该可以搜索到UCAN中，“设计工程模式化”的分享，双向管理，第三方工具，看起来效果不错。
