Airbnb 想让你通过写代码来完成 sketch 中的界面设计

2018/1/11

Airbnb 的设计师好像很热衷于用技术的手段去解决一些设计问题。继发布 Lottie 之后,他们又发布了 React Sketch.app ——一个可以帮助你将 React 代码实时转化为 Sketch 设计的工具。

那么,他们为什么要做这个东西呢?根据 Airbnb 设计团队博客上的文章( http://airbnb.design/painting-with-code )所述,那是在一个雨夜,因为没带伞大家困在办公室,闲着没事就做了。不过呢,这是我编的。

像 Airbnb 这种国际化大公司,都会沉淀出自己的设计系统(包括设计规范和设计资源等),但是随着团队不断增大,他们的设计系统也逐渐庞大,变得复杂起来。在这个时候,设计系统的管理和迭代就会出现问题,即使是改变某一处颜色都会牵一发而动全身,需要手动地去改动每一个关联的地方。而且这种跨平台、国际化的设计系统,每次迭代都会有着庞大的工作量。

对于这种重复性逻辑性较强的工作,代码却有着天然的优势。同时,对于工程师而言,一套通过代码管理的设计系统会让他们觉得更加熟悉,这使得设计师工程师之间的协同变得简单起来。这里顺便介绍一下 React ,React 最开始是 Facebook 的工程师开源的一套前端框架,到现在已经形成一个包含了移动端、虚拟现实、硬件控制的完整生态。React 提倡组件式开发,并使用一种全新的 jsx 语法,让代码更加清晰可控。

同时,在设计中使用代码还有以下好处:

  • 可以使用真实数据进行填充。
  • 快速生成多尺寸屏幕的弹性布局。
  • 自动生成国际化版本。
  • 单一数据源,一处改动所有资源自动更新。

说了这么多可能你还是不知道这是个啥,没关系,我们跟着官方指南( http://airbnb.io/react-sketchapp )走一遍,体会就更深一点了。

必要条件:

  • 一台安装了 macOS 的电脑
  • 已经安装了版本号43+的 Sketch 软件

安装Node、NPM

这两个东西一个是我们运行代码需要的环境,一个是包管理器,可以看做插件管理器。安装 Node 就像安装普通软件一样,请用电脑打开 https://nodejs.org/zh-cn ,点击下载按钮下载软件包。左边这个版本是稳定版,推荐下载。

下载后双击安装包,跟着指引一步步安装即可。最后安装成功后,打开终端,输入 node -v 并按下回车,当输出版本号时就表明安装成功。

而 NPM 一般是包含在 Node 内的,所以安装好 Node 就表示 NPM 也被安装了。输入 npm -v 并按下回车,看到输出版本号就表示 NPM 安装成功。

下载项目

官方指南中让我们用 git 下载,考虑到设计师一般都没有安装 git ,我们就直接从该项目的 github 主页下载。使用电脑访问:https://github.com/airbnb/react-sketchapp ,点击这个绿色按钮,在弹出的下拉菜单中点击蓝色的 “Download ZIP” 下载该项目的压缩包。

下载完成后,将压缩包解压并将该项目文件夹移到用户名那个文件夹,也就是左侧带着小房子的那个文件夹下。

安装项目

在此之前,我们先去 https://atom.io 下载一个 Atom 代码编辑器,这个编辑器很可爱的,相信你会爱上它。安装步骤就略去了,和安装其他Mac软件一样。

打开编辑器后,点击菜单栏的 file -> open ,选择刚才的 react-sketchapp (我给文件夹改名字了,解压后应该默认应该是 react-sketchapp-master )文件夹,我们在代码编辑器中选中 examples 文件夹,这里面每个文件夹都是一个示例。我们先展开示例中的第一个文件夹—— basic-setup ,用它来进行尝试。

打开它下面的 src 文件夹,我们要编辑的代码文件就是 my-command.js ,它的代码就像右边那样。可能你还看不懂这些代码,不过没关系,暂时先不需要看懂。

好了,希望刚才安装 Node 之后你还没有关掉终端。我们接着输入 cd react-sketchapp/examples/basic-setup && npm install ,按回车。它的意思就是进入 react-sketchapp/examples/basic-setup 文件夹,并且安装所需要的依赖工具。需要注意的是如果你的项目文件夹名字不是 react-sketchapp ,要把这句命令行中的对应的项目名字改掉。如果过一会后出现了下图这样的显示,就代表安装依赖工具完成。

此时打开 Sketch ,新建一个空白文件。复制 npm run render 这行命令到终端,点击回车,这时就开始渲染这段代码了。等命令行运行完毕,就会自动切换到 Sketch 。可以看到,这时候 Sketch 空白文件中已经出现了一个设计图。

而该项目文件夹下也多出了 basic-setup.sketchpluginnode_modules 两个文件夹,第一个其实是刚才运行渲染命令时生成的 Sketch 插件,第二个是安装的依赖工具。

进行到这里,我们就明白了它工作原理其实是:my-command.js 这个代码文件是一个 Sketch 插件的代码,在命令行运行渲染命令就是把它生成一个 Sketch 插件,并通过该插件在 Sketch 中“画”出一份设计稿。

不过呢,这还没完,我们试着改一下代码。我们把这里的高度和宽度从 96 改成 80 ,外边距从 4 改成 20 ,按住 Command+S 保存代码文件。

神奇的一幕出现了,Sketch 文件竟然同步发生变化——每个方块变小间距变大。所以代码文件的编辑会实时同步到 Sketch 文件中,但是改变 Sketch 文件却不会同步到代码,这也许就是 Airbnb 团队所说的单一数据源。

最后

目前来说,我还没有想清楚这个工具在工作中的具体应用。如果你也不明白,不妨先按照上面的步骤走一遍,体验一下,说不定会有一些灵感。