Framer X 更像一个设计工具了，但对设计师的门槛也更高了

今晚听了蔡琴的演唱会，就用她的这首歌做背景乐

早在 6 月份， Framer 官方就在网站上放出了新产品 Framer X 的消息，并表明这是一个“突破规则的产品，能够更好地融合设计和开发”。同时，这款产品最开始的一条 Slogan 是 “React meets design” ，React 是 Facebook 2013 年开源的一款组件化构建界面框架，主要特点是用数据维护界面状态。这一切都给我们很丰富的想象空间。

终于，我在这周收到了 Framer X 的测试版，简单把玩了一下，试着写一下我的感受。

先抛出结论：Framer X 更像一个设计工具了，布局、组件、路径这些功能都很完善；但是对于想要实现高保真可交互原型的人来说，却更难了，因为要学会使用 React 构建组件；不过它却更接近一个可以构建设计系统的设计工具了。

好用的特性

首先说一下它相比于其它设计工具我觉得更好用的一些特性。

Stack

第一个就是 Stack ，Stack 翻译成中文是“堆、栈”，这里的 Stack 其实就是前端里的弹性布局（ Flex Box ），有点类似于 Sketch 的 Paddy 插件。有了这个功能，你可以很简单地进行多个元素的排列。如下图，先画出一个 Stack ，再把其他元素拖进去就会自动对齐排列，能大大节省时间。

更方便的是，当你拖动 Stack 中的元素时，他们会自动改变顺序。

组件商店

Framer X 支持以两种方式创建组件：从设计区创建和通过代码创建。而通过代码创建的组件更加强大，可以实现各种交互效果（后面详细介绍）。

Framer X 内置了一个组件商店，支持设计师们将自己通过代码创建的组件上传，供其他设计师使用。说到这个我不禁想到了 Sketch 的插件生态，可以说 Sketch 之所以这么受欢迎，其用户社区贡献的大量插件功不可没，但是 Sketch 好像并不特别重视。

Framer X 内置的组件商店，聚集了用户创建的各种组件，方便其他用户拿来就用，不用重复造轮子。以后组件会逐渐增多，生态慢慢发展起来，这些即开即用的组件可以大大提升我们的工作效率。何况这些组件都是可以交互的，可以组合起来实现一个极其高保真的设计。

我最看好的功能

最后详细的介绍一下在 Framer X 中我最看好的功能——使用代码制作组件。

简介

上文提到 Framer X 组件有两种，在设计区创建的组件和 Sketch Symbol 类似，而另外一种就是使用代码创建的组件。

Framer 最开始是没有设计模式的，所有的界面都要使用代码实现。后来比较稳定的版本包含了设计模式和代码模式，通过代码去操作设计模式下的图形。而在 Framer X 中，则没有了代码模式，但是支持通过其他代码编辑器来编写组件，嵌入设计区。

当你要使用代码创建组件时，Framer X 会使用第三方代码编辑器（如果没有安装 VS Code 则会推荐你安装）打开一个 React 模板文件，里面写好了一些基本代码。我们现在创建一个 Button 试试看，下图左边就是这个组件在设计区的样子，右边是其代码。右边的代码看起来有些难懂，后面会简要介绍。

React 原理

首先回顾一下前端界面实现的传统方式：用 HTML 绘制基本结构，用 CSS 添加样式，用 JS 控制逻辑，即通过 JS 改变 HTML 或者 CSS 来响应用户的操作，从而改变界面状态。

在 React 中则是通过数据维护界面状态的。每个 React 组件内都维护了一些数据，这些数据对应界面中的一些内容，想要改变界面状态则需要改变这些数据。

拿官方的 StatusBar 组件举例。这个组件的数据包含了外部属性（ Props ）和内部状态（ State ）。所谓外部属性就是通过外部数据来调节它，StatusBar 有三个外部属性： Carrier 、Appearance 、Battery ，分别对应着界面的运营商、外观（暗色或亮色）、电量这几个界面状态。其内部维护了一个 State ，即显示时间。而每个组件都有一个生命周期，包含初始化、已经装载、渲染等等。其中 render （渲染）所做的工作就是随时观察 Props 和 State 变化，并跟着重新渲染组件界面。

我们再通过上述最简单的组件的代码来对应一下这些概念。

这里只做一个简要介绍，React 的概念细节繁多，具体的了解入门可以参考文末的文章。

为什么看好它？

最后说一说我为什么很看好这个功能。

从上面的文字中可以看出，虽然用代码实现组件能做出更加复杂逼真的效果，但对设计师的门槛也更高了（需要很扎实的 JS 基础，能理解 React 实现方式，还要学会 TypeScript ）。那我为什么会看好它呢？

很多设计师认为，像 Framer 这一类要求设计师具有代码能力的设计工具的目标就是导出代码，给工程师复用。在我看来这是错误的，要知道“术业有专攻”，不要以为会用 JS 写几个动效你的代码就能够作为工程代码了，其实还差得远。

那设计师学编程的意义何在呢？我认为是为了构建“设计系统”，当然，知道技术边界，拥有代码思维是这个过程中额外获得的。

在开发圈有一句话，“懒出效率是工程师的美德”。我们身边的程序员经常会写一些脚本去替代体力工作，但是我们设计师却一直在做很多重复性劳动。要想提高效率，使用代码是很好的一种方式。

最近流行的“设计系统”概念，其实就是为了提高设计效率。回想一下我们现在使用的 Sketch Symbol ，想要制作一套组件库很容易，但是想要做出一套包含丰富可调节属性的组件库却不容易，需要按照命名规范组合，得预先想好各种可能的组合。

但是这件事对于代码来说却是非常简单和自然的。在 Framer X 中通过代码做出的组件，可以给它设定各种属性，这些属性可以和一般图层属性一样调节。如下图，StatusBar 组件的属性可以在 Framer X 右侧面板中调节，就像调节一个图层的样式一样简单。

如果你有关注 Airbnb 的设计博客，应该会注意到他们正在使用代码构建设计系统。

他们曾经在自己的开源工具 React Sketch.app 介绍中说过：在 Sketch 中管理设计系统资源是很复杂的——容易出错且很耗费时间。而这套工具使用代码来管理设计系统资源，它具有数据源唯一（改动组件代码，所有设计图文件中的组件更新）、可使用真实数据等特点。

而这一切，在 Framer X 中则更简单了一些。现在的 Framer X 代码组件，允许我们自定义组件逻辑，可以在设计区直接调节属性，在预览时还是真实可交互的。这让我们距离构建一个真正的设计系统更近了一步。

React 入门资料

阮一峰：React 入门实例教程
http://www.ruanyifeng.com/blog/2015/03/react.html

完全在浏览器中开发React应用
https://zhuanlan.zhihu.com/p/40523470

awesome-react 中文版
https://github.com/Pines-Cheng/awesome-react-cn

推荐阅读