如何评价 Airbnb 发布的 React Sketch.app 工具?

Painting with Code Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents.If you’re a designer or an engineer familiar with React, you should feel right at home with the new library, and you can pla…
关注者
1,293
被浏览
94,829

最早关注到这方面是从 mschoening 的这几条 Twitter(需翻墙)开始

https://twitter.com/mschoening/status/847496408168976384twitter.com/mschoening/twitter.com/mschoening/

这里展示了一种可能,随着 Sketch 43 的发布,由于文件格式完全开源和 JSON 化,前端代码和设计稿的互相转换和同步是可行的道路了。

然后有人提到 jongold(react-sketchapp 作者,Airbnb 工程师)正在做一套东西,能够把代码渲染到 Sketch 文件中。当时 mschoening 的说法是:

I’m not very interested in the inverse but some folks are working on it.

接下来就是 react-sketchapp 的释出了。我们可以在项目 README 中看到,这是一个设计师使用 React 语法视觉稿的项目。

官网也罗列了你现在可以用这个做什么:

  • 管理可复用的设计资源。
  • 使用真实的数据和组件进行设计。

react-sketchapp 希望你用 React 代码来制作和管理 Sketch 视觉稿以及相关的设计资源(比如变量化的色彩系统和字体大小等,很容易的统一修改样式同步到所有组件)。

说实话,这个东西正式发布的时候,我还是有点失望的。按照现有的工作逻辑,设计稿是上游,前端代码是下游,如果已经能写 React 代码了,我为什么还需要出设计稿,不如直接出原型产品。大多数人关心的是如何从 Sketch 导出 React 代码,从而解决现有流程中的几个问题:

  1. 保证设计的可行性:解决设计难以实现的问题。
  2. 前端代码实现的还原度:解决实现和设计不一致的问题。
  3. 节省 UI 的开发时间:工程师可以把更多精力投入在数据和流程上。

对于这个方向,react-sketchapp 也给出了自己的看法,可以看出 Airbnb 想解决的问题和我们大多数人遇到的问题不太一样:

Is there two-way binding? Can I generate React components from Sketch? Nope. Isomorphisms are compelling but our focus is on tools that we can use day-to-day to improve the productivity of designers and engineers working on large-scale production applications. Getting production-ready semantics out of Sketch is more difficult than generating production-ready Sketch templates from React components. Our solution is to keep our our design system’s source of truth in code, and use react-sketchapp to compose & consume it. To edit our design system, we are free to leverage any technology that can create React components, or be compiled to JSX, such as: React-centric IDEs in-house design tools that are tailored to our workflow (whilst being backed by data, version control & semantic versioning) writing React components in text editors with our fingers

其中很重要的理由是,从 Sketch 到 React 代码的转换在实现上有难度,对制作 Sketch 的语义化要求很高。因为本质上设计师做 sketch 是而非带有逻辑和层级关系的


我们自己内部在尝试做一个产品遇到了类似的问题。我们希望设计师直接基于已有的组件和模板进行在线组装设计,跳过设计出稿阶段,直接导出高保真的代码片段。在研发和试用过程中发现,设计师对于页面的树形结构很难理解,上手成本较高,而且新平台的体验很难做到像 Sketch 这种专业设计工具那样顺滑。因此我们也观望和探索从 Sketch 直接导出 React 这个方向,相信社区中也有很多人有类似的想法。


那么 react-sketchapp 这个项目的现实意义是什么?

按照 jongold 在 Painting with Code 里的说法,他们似乎创造了一个新职业(设计工程师?)。在这种模式下工作的设计师写代码,有完整的工作流,使用真实的业务数据,按工程化的方式管理整个产品的设计系统,这也是 Airbnb 的设计团队在尝试的新的工作方式。虽然对于大多数设计团队来说这种模式目前很难落地(缺少这样的人),但是它的确打开了一个新的窗口和思路,在智能设计这个风口上,更多和工程结合的设计工具和产品会在 UI 设计领域的社区中展露出来。


很喜欢 jongold 引用的这段话:

“The strange and beautiful truth about the ‘adjacent possible’ is that its boundaries grow as you explore them. Each new combination opens up the possibility of other new combinations”