代码，一种看不见的设计工具（顺便聊聊即将发布的 Framer X 将会给我们带来什么）

上个月 Framer 放出了新产品 Framer X 的预告片，让我想起了这篇旧文。这篇文章讲的是代码给我们的设计流程带来了怎样的变化，以及在不久的未来我们可以怎样利用这个工具。

除了设计工具标配的图形编辑、响应式布局以及快速连线原型，最大的变化是 Framer X 引入了组件——可以使用 React （ Facebook 创建的一种用于组件式开发的代码框架）编写组件，并存入组件库用以复用。借助于代码“唯一数据源”的优点，构建一套完整而强大的设计系统变成了可能。

对这个新的设计工具有什么特性好奇可以前往 https://framer.com/x 查看，阅读下面的文章可以了解代码在设计流程中的演进。

如果说到设计师的工具，你会想到什么？纸笔或者 Sketch 、Framer 这一类设计软件 ？有没有想过，其实编程也是一种强大的设计工具。

Airbnb 的设计经理 Amber Cartwright 曾在博客中写道：产品设计师利用人工智能或者类似于机器学习的技术进行工作的过程是一种看不见的设计。从 Airbnb 在 2017 这一年的摸索实践中，我们也能发现他们正在逐渐地使用这个看不见的工具。这一年他们陆续发布了 Lottie 、react-sketchapp 等工具，同时也构筑了一个强大的设计系统。我一直对 Airbnb 的设计流程很感兴趣，也看过其设计团队一些文章和视频，今天我试图从一个旁观者的角度去窥探他们是如何在设计流程中使用编程这个强大的工具的。

协作模式的改变

随着这些年互联网的快速发展，我们要设计的产品也日趋庞大和复杂，比如 Airbnb 的产品就面临国际化和多平台等问题，这给我们设计师和工程师都提出了很大的挑战。以往的单向协作模式到今天就不再适用了，现在设计师和工程师的协作流程将会是一种循环演进的模式，我们之间的交流也比以往更多。

但是，在这两者之间却存在着一些很难跨越的鸿沟，降低了我们的协作效率。为了消除这两个角色之间的障碍，让设计师和工程师有更多时间去做各自领域更具价值的事情，我们必须消除这两者之间的鸿沟。

协作模式的改变

因此，我们需要构建一个由设计师和工程师共同维护的设计系统，并且它是随着时间不断进化的。当然，为了保证这个设计系统的稳定可持续性，我们必须保证它是在每个参与者都充分理解了团队的基本设计原则之后才开始搭建的。

让设计系统参与进来

在传统印象中，设计师和工程师是两种完全不同的角色，甚至有时候他们的性格是截然相反的——一个感性浪漫，而另一个理性冷静。以此来看，让设计师和工程师共同维护一套设计系统可能看起来不太靠谱，但是就某些方面来说我们却有着极其相似的一面。比如设计师在进行在设计之前会归纳拆解，抽象出不同的组件来支撑需求，而工程师也会将代码模块化，形成一个可维护可扩展的库。我们不过是用自己擅长的语言讲述同一个故事而已，而这个设计系统就是我们要讲的故事。

Airbnb 设计系统

设计系统的资源管理

在以往的设计工作流中，我们依靠设计师人工管理自己的设计资源，这没什么问题。可是当面对一个设计系统时，还依赖人工就会有些混乱和疲累。一个复杂的设计系统包含的设计资源是极其庞大的，这些资源可能包括设计规范、组件库、媒体资源等等，而且还将面临版本管理和批量处理等问题。

对于这些，结构化的数据却有着天然的优势。所以我们只需要将所有的设计资源数据化，生成一份唯一的数据源，此后只维护这个唯一的数据源就可以了。基于此，Airbnb 的设计师们做了一个设计资源生成和管理的工具—— react sketchapp ，通过这个工具，我们可以通过代码去生成设计资源，而这份代码就是唯一的数据来源。

如果我们要对设计资源进行版本控制，就直接对这套代码进行版本控制，整个设计资源库就有了版本的管理。此外，我们将某些公共属性（比如颜色）提取出来作为变量，当我们想要批量修改这些属性时只需要修改这个变量就可以达到一处改动多处变化的效果。使用代码生成或维护设计资源的好处还有很多，比如我们还可以使用真实的数据去渲染等。

react-sketchapp

与此同时，他们还在探索另一个实验项目——Lona ，Lona 可以更进一步地帮助我们构建一个完整的设计系统，无论是组件还是色彩、样式等等都可以通过 Lona 来构建。我们还可以通过 Lona 来快速组合组件制作原型，产生多设备尺寸下的自适应的界面，还能够结合 Lottie 添加一些动画。

Airbnb 的实验项目 Lona

进一步缩小鸿沟，快速原型

也许到了这一步，你会认为机器已经帮助我们完成了很多繁杂的任务，但 Airbnb 的设计师却认为这还不够。他们认为，当我有一个新的产品想法时我能够立即去验证它 ，也就是说我能够立即生成一个产品原型去进行测试。

得益于 Airbnb 完整可靠的设计系统，我们可以借助机器学习来帮助生成原型。在 Airbnb 的设计系统中每一个组件都有自己独一无二的名字，所以我们可以训练机器将草图与之一一对应，并能够识别出一个简单的组合草图，快速生成原型。

训练机器学习将草图转化成原型

目前这套工具已经展现了极大的潜力，随着设计系统的不断进化，在以后人工智能一定会极大地帮助设计师和工程师去完成一部分工作。这种协作模式，其实是一种人类-机器共同演进的模式。在设计师和工程师之间，机器搭起了一座桥梁。

编程能帮助设计师做什么？这个问题我们大概听到了几百遍，所能想到的回答也不过是：它能帮助我做一些复杂的动效，能让我更好地与开发沟通等等。但是从 Airbnb 的设计实践中我们会发现自己的认知已经被颠覆，编程在设计领域的运用已经远超想象。我想，这大概就是设计师未来的工作方式吧。

参考链接：

https://airbnb.design/invisible-design

https://airbnb.design/painting-with-code

https://airbnb.design/sketching-interfaces

https://airbnb.design/the-way-we-build

https://github.com/airbnb/Lona