UI 设计师未来的全新工作方式?React - SketchApp 新手上路

3,162 阅读10分钟
原文链接: zhuanlan.zhihu.com
前不久 Airbnb 才发布了让业界抖三抖的 Lottie,就在前天,Airbnb 又对外公布了一个算是开天辟地的新的开源项目 —— React - SketchApp。从公布之初,它就迅速被设计师和前端工程师们所关注,作为非主流边缘设计师,我被它所吸引,在第一时间了解并进行了体验。

一、React - SketchApp 是啥?

React - SketchApp 是一个开源库,为设计系统量身定制。它通过将 React 元素渲染到 Sketch 来连接设计和开发之间的鸿沟。
这个神奇的开源库给设计师们提供了一个全新的设计工作流程:在时下最流行的 React 前端框架下用代码进行设计,并实时渲染到 Sketch 中审阅设计。细思恐极,在设计圈大红大紫的 Sketch 虽说占了开源库的一半名字,但其实担当的只是一个浏览器的角色。真正留下的设计文档则成了代码。

二、为啥??为啥??

你一定在想,为什么好好的,突然让所有设计师用起代码做设计了?为啥又要用前段框架了?这成本对我们来说有多高?h听听 Airbnb 怎么说吧。

一个设计系统可以让设计师复用样式、组件、图形,这可以给设计师更多的时间去进行更高层次的思考。同时,一个好的设计系统也让工程师自信地添加新功能,而不用去看密密麻麻的标注线,痛苦地和设计师来回调整像素。而同样的,一个完善的设计系统一般都是非常庞大而复杂的,想有序地构建和发展这个系统,本身就有着巨大的工作量。在我们团队中,瓶颈就在 Sketch Template 上。
就拿 Airbnb 的设计系统 DLS 举例,它从字体、颜色、间隙的规范开始,逐渐发展成了跨平台、跨屏幕尺寸、跨语言的丰富设计库。当然作为一个设计系统,永远也不会有完成的时候,我们持续的向其中增加内容,更改和调整已有的组件,让每一个人都可以使用它。
但是在这个过程中,每一点对这个系统的增加和更改,都会产生很大的工作量。文档需要更新,每个 App 都需要调整,Sketch Template 又要重新绘制。而所有这些工作还必须协同进行。
<img src="https://pic1.zhimg.com/v2-c3cb0524a3bc557cd773056c66fd5398_b.png" data-rawwidth="1000" data-rawheight="563" class="origin_image zh-lightbox-thumb" width="1000" data-original="https://pic1.zhimg.com/v2-c3cb0524a3bc557cd773056c66fd5398_r.png">

图中是 Airbnb 基于 Sketch Template 的设计系统

基于图形的设计工具在版本控制上有着先天的劣势,所有的可以拖来拖去的元素经常让我们对设计系统的状态产生不确定感。「移动端 Title 字体是多大来着?」「现在最新的方案还是这样子么?」「这个组件在不同屏幕上怎么显示?」诸如此类的问题在办公室中几乎是时时出现 。
相反,代码相对来说就更容易管理,同时我们已经有了对代码版本管理的积累和基础。而维护 Sketch Template 还只能依靠劳动密集的人工管理。因此我们希望通过代码来优化整个工作流程。
Sketch 文件本身倒是可以直接用代码组织,但是提供的 API 却经常变化。相反 React 框架给可复用文档提供了完美的封装形式,同时有前端基础的设计师可能已经比较熟悉了。

总的来说,Airbnb 在完善自己庞大设计系统的探索过程中,遇到了基于图形的设计系统的瓶颈,因此毅然决然地走向了另一条路——基于代码设计。强大的版本管理,可靠文档结构,更多的信息内容,都成为了 Airbnb 选择设计代码化的理由。

三、核心优势

剔除 Airbnb,在仔细看了相关文档和项目样例后,总结出了一下这个开源工具在构建设计系统时的核心优势:

  1. 稳定的文档:用成熟的前端框架作为设计系统基础,可以保证整个设计系统长期的可用性。
  2. 数据的清晰准确:以代码为描述设计的形式,杜绝了基于图片描述设计时容易产生的数据不稳定。
  3. 可进行响应式设计:比起 Sketch 略显简陋的 Resizing,React 提供了功能完备的布局系统,可以在设计端进行准确完整的响应式设计。演示视频
  4. 版本管理:避开了基于图片设计的版本管理难点,git 等工具组织设计系统,让系统更实时、可考、
  5. 跨平台开发:因为和 ReactNative 采用同一套布局系统,配合 ReactNative 可以很好地进行跨平台工作。
  6. 引入真实数据 & API:可以和任何前端开发一样引入真实的数据和 API 实现例如实时地图自动多语言等有趣的功能。

以上这些优势,确实可以切中很多团队在构建大型设计系统时的痛点。就如我自己所在的团队最近也基于 Sketch Template 构建了一套比较完备的设计系统。正如之前提到的 Airbnb 所提到的,在使用这个设计系统之初,我们就能感受到,未来的版本控制、规范维护上都面临着很大的挑战。同时,我们的设计系统在规范开发对接的这一方面还没能做出长足的努力。

相比之下 React - SketchApp 在这些问题下,跳出了原有的思考方式,用超前全新的方案解决目前方案的痛点。

四、新手上路

说了这么多概念上的东西,大家一定很期待从实用角度看看它到底是怎么工作的,接下来就让我们对 React - SketchApp 做一个初步的体验吧。对它同样感兴趣的也可以根据下面步骤一起尝试。

  • 搭建环境

首先我们需要搭建项目运行的所需环境。一个是 Sketch 43+,另一个是 Node.js + npm,分别傻瓜安装后,我们就已经有了运行的所需环境了。

验证一下,打开终端,直接输入

npm -v

如果返回显示了 npm 版本,就说明一切 OK。<img src="https://pic3.zhimg.com/v2-85d965dd12e9b0497d39884c0bbb9e1e_b.png" data-rawwidth="1174" data-rawheight="736" class="origin_image zh-lightbox-thumb" width="1174" data-original="https://pic3.zhimg.com/v2-85d965dd12e9b0497d39884c0bbb9e1e_r.png">


  • 运行项目

直接按官网指示,先在终端输入下方指令,将项目 Clone 到本地。

git clone https://github.com/airbnb/react-sketchapp.git

然后打开一个空的 Sketch 文档,之后继续在终端中运行下方指令。

cd react-sketchapp/examples/basic-setup && npm install
npm run render

我们选择的是官方实例中的 basic-setup,在走完进度后,我们可以在 basic-setup/src 目录下找到 my-comman.js 文件,打开后,终于进入了 React - SketchApp 的工作状态。

<img src="https://pic4.zhimg.com/v2-e35082e2e64467f8dae532219a46a573_b.png" data-rawwidth="1798" data-rawheight="904" class="origin_image zh-lightbox-thumb" width="1798" data-original="https://pic4.zhimg.com/v2-e35082e2e64467f8dae532219a46a573_r.png">
  • 第一次接触

有兴趣和基础的的可以先用这个 Example 为基础试试、玩玩,看看它到底能做什么。而作为新手一下看到这么多代码可能很懵逼,不过没关系,我们可以先从最基本的入手,首先把所有代码替换成下面的内容,然后 Command + S 保存渲染。

import React from 'react';
import { render, Artboard, Text, View } from 'react-sketchapp';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Futura', color: '#333333' }}>
      { props.message }
    </Text>

  </Artboard>
);

export default (context) => {
  render(<App message="Hello world!" />, context.document.currentPage());
}

&amp;amp;amp;amp;lt;img src="https://pic2.zhimg.com/v2-0f986591c9d4b24275d0647e4538e3b9_b.png" data-rawwidth="1791" data-rawheight="906" class="origin_image zh-lightbox-thumb" width="1791" data-original="https://pic2.zhimg.com/v2-0f986591c9d4b24275d0647e4538e3b9_r.png"&amp;amp;amp;amp;gt;在视图重新渲染后,我们可以看到,内容简单多了,更有利于我们从头尝试和理解。对于 API,我们可以先参看更详细的

在视图重新渲染后,我们可以看到,内容简单多了,更有利于我们从头尝试和理解。对于 API,我们可以先参看更详细的官方文档

  • 了解基本元素和图层结构

从文档中,我们可以看到,对于目前版本的 React - SketchApp,有几个最基本的核心元素:<Artboard>、<View>、<Image>、<Text>,通过这些元素的嵌套和配合,我们可以很容易地组合出和 Sketch 中一样的图层结构。

拿刚才的文件进行举例,假如我们想给它增加一个外框,只需要用 <View> 来套住它。

<Artboard>
    <View
      name = 'newLayer'
      style={{
        backgroundColor: '#363636'
      }}
    >
        <Text style={{ fontFamily: 'Futura', color: '#FFFFFF' }}>
          { props.message }
        </Text>
    </View>
</Artboard>

&amp;amp;amp;amp;lt;img src="https://pic1.zhimg.com/v2-66692f70f96cee4ea056dbefdd5193fc_b.png" data-rawwidth="1793" data-rawheight="905" class="origin_image zh-lightbox-thumb" width="1793" data-original="https://pic1.zhimg.com/v2-66692f70f96cee4ea056dbefdd5193fc_r.png"&amp;amp;amp;amp;gt;保存后我们可以直接看到效果,再看看图层区域,实际上图层的结构和代码的结构非常相似。相信这时大家对元素和图层应该有了初步印象。

保存后我们可以直接看到效果,再看看图层区域,实际上图层的结构和代码的结构非常相似。相信这时大家对元素和图层应该有了初步印象。

  • Play With It!

在尝试了上面的内容并且参考官方 Example 以后,已经算是可以开始自己的探索之路了。目前这个项目还处于 Beta 阶段,甚至官方文档还十分的简陋。想要去体会它在布局、适配、管理、对接上的优点,需要亲自开荒(目前我也在开荒)。希望在这个阶段,这个文章可以作为一个引子,让更多的人可以一起讨论交流。总之,Play with it,自己亲自体会代码管理设计的神奇吧。发现新的东西我也会和大家在之后的专栏中分享。

五、总结

做出一个高效组织的设计系统并且进一步弥合开发和设计之间的鸿沟,是很多团队都想做到的事情。有的团队在试图通过 Sketch 自动导出布局,有的团队如蓝湖在优化 Sketch 的项目管理。大多数这些努力都是围绕基于视觉的设计软件 Sketch ,总体思路都是试图让开发的边缘靠近设计,而很多项目都证明了让开发贴近设计有着越来越高的边界成本。

Airbnb 开创了一种新的可能——让设计面相开发,让设计行为本身就在前端框架中发生,同时还能一并解决经典设计体系所固有的系统管理成本过高的问题。这无疑让我们在这个新生体系中看到了巨大的潜能——面相开发设计是否是未来设计到开发的终极答案?

或许有一天,熟练掌握前端代码,在前端框架下设计,是每一个互联网产品设计师的全新工作方式。