cover 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作为自定义设计工具的画布使用。

好像也没有理解它,我们可以看看官方的一些示例:

Some of Airbnb‘s Sketch templates for DLS
像Airbnb这样体量的公司,Sketch的设计资料十分庞大,每次修订管理,也要与前端团队(Web Android iOS )进行统一,这样的过程中,无论是沟通还是执行都会是很大的工作量。通过React Sketch.app,可以在编辑器中直接实现对设计资料的管理: 官方example管理示例,Sketch文件与编译器中的代码相对应 这样,你就不需要再去反复沟通,排期,增加额外的工作量,直接在编译器就能完成你的设计迭代工作。

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文档

http://airbnb.io/react-sketchapp/

打开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虽然对设计师而言是一项不错的附属技能,但是真的会扮演着越来越重要的角色吗?

也许是的

现在设计工具和开发工具有了更多的连接,实现方式变得更加平滑,工作中的交集不仅限于会议,工作内容上也略有渗透,参与更多的产品环节,能帮助你做得更好,从产品实现的路径再来审视自己的设计。 https://hexo.io) 很多Ghost和HEXO的博客主题设计得都很不错,它们的实现也有很多是一个人完成的。

看起来很棒是不是?不过它还是面临着一些挑战:

使用者对react的学习成本;React Sketch.app并不能实现双向映射,你可以通过编辑器修改Sketch文件,但是不能修改Sketch文件实现编译器的代码调整(大部分人还是跟容易接受这一种方式吧)。

这几天也听了Alibaba的的开放论坛,内部工具 fusion tool 在对建立style guide的时候更加友好,有兴趣的话应该可以搜索到UCAN中,“设计工程模式化”的分享,双向管理,第三方工具,看起来效果不错。

扫描二维码,分享此文章

ShuSQ's Picture
ShuSQ