早在 6 月份，设计工具 Framer 官方就在网站上放出了新产品 Framer X 的消息，并表明这是一个“突破性的产品，能够更好地融合设计和开发”。同时，这款产品最初有一句 Slogan 是 “React meets design” ，React 是 Facebook 2013 年开源的一款组件化构建界面的前端框架，主要特点是用数据维护界面状态。将代码更完美地融合进设计，构筑更强大的设计系统，这一切都给我们很丰富的想象空间。
通过这几个月对 Framer X 的使用，我试着写一下我的感受，以及我对于设计师用代码做设计这件事，和我对设计系统的理解。
先抛出结论：Framer X 更像一个设计工具了，布局、组件、路径这些功能都很完善；但是对于想要实现高保真可交互原型的人来说，却更难了，因为要学会使用 React 构建组件；不过它却更接近一个可以构建设计系统的设计工具了。
Framer 最初是通过 “Code to Design” 进入设计工具市场的，最开始的几个版本都只能通过代码来完成设计。后来为了降低门槛增加了设计模式，即通过图形化的方式进行设计。Framer X 则是以设计模式为主，代码为辅，而其图形化设计模式也已经十分成熟。
像简单的自适应布局、基本动效、形状绘制完全不在话下，除此之外，Framer X 相比于其它设计工具还有一些更好用的特性。
第一个就是 Stack ，Stack 翻译成中文是“堆、栈”，这里的 Stack 其实就是前端里的弹性布局（ Flex Box ），在设计工具中的作用有点类似于 Sketch 的 Paddy 插件。有了这个功能，你可以很简单地进行多个元素的排列。如下图，先画出一个 Stack ，再把其他元素拖进去就会自动对齐排列，能大大节省时间。
更方便的是，当你拖动 Stack 中的元素时，他们会自动改变顺序。
Framer X 内置了一个组件商店，支持设计师们将自己创建的组件上传，供其他设计师使用。这很像是一个开源社区，集众人之力，来完善一个组件社区。想象一下，当你需要设计一个小程序时不需要从零开始，直接从组件商店下载小程序基础组件，是不是可以节省很多时间？
Framer X 内置的组件商店，聚集了用户创建的各种组件，方便其他用户拿来就用，不用重复造轮子。以后组件会逐渐增多，生态慢慢发展起来，这些即开即用的组件可以大大提升我们的工作效率。何况这其中的代码组件还是可以交互的，可以组合起来实现一个极其高保真的设计。
最近 Framer 团队正在内测团队商店功能，帮助团队实现私有组件商店，统一管理设计组件，也是很值得期待的。
最后详细的介绍一下在 Framer X 中最强大也是我最看好的功能——代码组件。
在 Framer X 中创建组件有两种方式——设计组件和代码组件，设计组件即通过图形化模式创建组件，这和 Sketch Symbol 类似，而代码组件就是完全使用代码创建的组件。代码组件的好处是它极其接近真实产品，比如说一个视频播放器组件是可以进行真正的播放、暂停的。而且你可以在右侧面板中像调节图层属性一样调节组件的属性，比如播放器的背景色。
当你要使用代码创建组件时，Framer X 会使用第三方代码编辑器（如果没有安装则会推荐你安装 VS Code）打开一个 React 模板文件，里面写好了一些基本代码。我们现在创建一个 Button 组件试试看，下图左边就是这个组件在设计区的样子，右边是其代码。右边的代码看起来有些难懂，后面会简要介绍。
首先回顾一下前端界面实现的传统方式：用 HTML 绘制基本结构，用 CSS 添加样式，用 JS 控制逻辑，即通过 JS 改变 HTML 或者 CSS 来响应用户的操作，从而改变界面状态。
在 React 中则是通过数据维护界面状态的。每个 React 组件内都维护了一些数据，这些数据对应界面中的一些内容，想要改变界面状态则需要改变这些数据。
拿官方的 StatusBar 组件举例。这个组件的数据包含了外部属性（ Props ）和内部状态（ State ）。所谓外部属性就是通过外部数据来调节它，StatusBar 有三个外部属性： Carrier 、Appearance 、Battery ，分别对应着界面的运营商、外观（暗色或亮色）、电量这几个界面状态。其内部维护了一个 State ，即显示时间。而每个组件都有一个生命周期，包含初始化、已经装载、渲染等等。其中 render （渲染）所做的工作就是随时观察 Props 和 State 变化，并跟着重新渲染组件界面。
我们再通过上述最简单的 Button 组件的代码来对应一下这些概念。
这里只做一个简要介绍，React 的概念细节繁多，具体的了解入门可以参考文末的文章。
最后说一说我为什么觉得代码组件是很强大的，以及为什么看好它。
从上面的文字中可以看出，虽然用代码实现组件能做出更加复杂逼真的效果，但对设计师的门槛也更高了（需要很扎实的 JS 基础，能理解 React 实现方式，还要学会 TypeScript ）。那我为什么会看好它呢？
很多设计师认为，像 Framer 这一类要求设计师具有代码能力的设计工具的目标就是导出代码，给工程师复用。在我看来这是错误的，要知道“术业有专攻”，不要以为会用 JS 写几个动效你的代码就能够作为工程代码了，其实还差得远，你的代码很多时候都会被开发嫌弃的。
那设计师学编程的意义何在呢？我认为是为了构建“设计系统”，使用一种工程化的思维去提高设计效率，缩减设计和开发之间的罅隙。
在开发圈有一句话，“懒出效率是工程师的美德”。我们身边的程序员经常会写一些脚本去替代体力工作，但是我们设计师却一直在做很多重复性劳动。要想提高效率，其实使用代码是很好的一种方式。
最近流行的“设计系统”概念，其实就是为了提高设计效率。回想一下我们现在使用的 Sketch Symbol ，想要制作一套组件库很容易，但是想要做出一套包含丰富可调节属性的组件库却不容易，需要按照命名规范组合，还得预先想好各种可能的组合。
这其实还是很低效的设计方式，而用代码来描述组件逻辑才是真正高效和自然的。在 Framer X 中通过代码做出的组件，可以给它设定各种属性，这些属性可以和一般图层属性一样调节。如下图，StatusBar 组件的属性可以在 Framer X 右侧面板中调节，就像调节一个图层的样式一样简单。
如果你有关注 Airbnb 的设计博客，应该会注意到他们正在使用代码构建设计系统。
他们曾经在自己的开源工具 React Sketch.app 介绍中说过：在 Sketch 中管理设计系统资源是很复杂的——容易出错且很耗费时间。而这套工具使用代码来管理设计系统资源，它具有数据源唯一（改动组件代码，所有设计图文件中的组件更新）、可使用真实数据等特点。
而这一切，在 Framer X 中则更简单了一些。现在的 Framer X 代码组件，允许我们自定义组件逻辑，可以在设计区直接调节属性，在预览时还是真实可交互的，这让我们距离构建一个真正的设计系统更近了一步，唯一变难的是，你需要真正地写代码了。
阮一峰：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
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。