UxDigest
首发于UxDigest
今秋才发布的 Framer X 已经有人尝鲜了

今秋才发布的 Framer X 已经有人尝鲜了

交互设计师 Aaron 参加 Framer X 在纽约的 Demo 之后写了一篇体验文章,以下是文章的译文,如果你想阅读原文,戳 → 这儿


我在之前的文章中提到设计与开发的融合,可以缕出一条时间线:

2016 - AirBnb · Jon Gold 的 React-Sketchapp 插件可以将 React Native 的组件渲染到 Sketch 的 Artboard 上;

2017 - Webflow 允许用户通过可视化的方式建造网站,并输出网页代码;

2017 - Brainly · Konard Dzwindel 的 Html-Sketchapp 可以将任何 Html 元素渲染到 Sketch 的 Artboard 上;

2017 - Seek / Mark Dalgleish 的 Html-Sketchapp-cli 将 Brainly 的流程打包成一条命令行操作;

2018 - Google 发布了一套工具,能够将 Material Design 的交互控件紧密对应成 Material Design 的代码。其中包括 Material Theme Editor 和 Material Design 交付工具 Gallery.IO

现在,轮到 Framer X 了。

我开始关注 Framer X 很大一个原因是,社区内有多位大神为其背书:

AirBnb 的 Jon Gold 发推 「 有了 Framer X,我再也不会有开发另外一套设计工具的冲动了!
Facebook 的 Daniel Eden 说 「 用过 Framer X 的演示版本后,我可以确信 Framer X 将会成为最棒的设计工具!

然而在 Google 上搜索 「 Framer X 」关键词时,返回的结果并不多。Framer 只发布了一个展示界面的 Teaser 预告 。

于是,我参加了 Framer X 在纽约的 Demo 场。演讲人 Krijin Rijshouwer 在 Framer 早期就加入了团队。Demo 结束后,我找到 Krijin 问了他一些关于 Framer X 的一些问题,并得到了耐心的解答。

Framer X 的工作流程和功能

我尽量将自己看到的、听到的内容讲清楚,不过Krijin告诉我他们每天都在对 API 做调整,所以这里的内容可能会与秋季发布的正式版本有一些差异。

新建 Framer X 工程

有两种方式新建一个 Framer X 文件。第一种是「屏幕( Screen)」,另一种是「代码(“Code”)」。如果你是从「代码」新建,会发生两件事:

1. Framer X 会导出一个工程文件夹,里边使用的是 NPM 结构的 Node_modules 文件夹,以及一套 .tsx ( TypeScript )文件。

2. 你的文本编辑器(例如, VS Code)会自动打开默认的 .tsx 文件。里边包含了一些 React 的起始代码。

👆这一点就已经有点了不起了。Framer X 导出 NPM 结构,包含 node_modules 文件夹和 React 代码,这对开发来说再熟悉不过了。


Teaser 预告中最大的曝光应该就是新的组件(Component)选项了


使用 Framer X 时,你会发现侧边栏有一个新的 「组件(Component)」选项,用来生成文字和形状。如果我理解的是真确的,每一个 Component 都会生成对应的 .tsx React Component 文件。你可以打开 .tsx 文件,并将代码复制粘贴到主 App.tsx 文件里。

TL;DL Framer X 提供了一种可以让用户在 Framer X 中进行可视化操作,在代码编辑器中写 React 代码,并且在两种状态下来回切换的机制。

回到 Framer X: 你可以改变组件的颜色、缩放,和位置。你也可以为组件添加交互动画,例如旋转和弹跳。当你保存 Framer X 项目时,代码并不是保存到 App.tsx 文件中,而是被保存在一个附属的 Framer .tsx 文件。 如果你想将变化体现在总代码里,你可以手动将代码复制到 App.tsx 文件中。

在这种「 Framer X · 文本编辑器」双环境下,每一位设计师/开发者都可以根据自己的喜好选择对应的环境。

还有啥?

还有一些特性让 Framer 与 Sketch 的区别上越走越远。其中一个就是现成的交互元素,例如开关、切换、以及文本框。另外一个是类似 App Store 一样的市场,可以用来开发分享更多的交互元素。

总结

针对设计师 - Framer X 可以允许设计师进行可视化操作,并将设计直接生成为 React 代码。他们可以设计 UI 元素和动画,并将其导出成 TypeScript 代码。可以预想到时候很多设计师都会跃跃欲试。

对于开发者 - Framer X 提供了另外一种控制 React 元素的方式。习惯代码环境(例如 React,CSS,和 ZEit,等)的开发者则可以仍旧使用文本编辑器。

我跟 Krijin 形容 Framer X 的感觉有点像将代码渲染到浏览器窗口,并通过浏览器窗口直接对元素进行操作,他同意这种比喻,我觉得这很酷😎。(译者:我也觉得很酷 😎 x 2)

编辑于 2018-07-23

文章被以下专栏收录