Framer X 是一款全能型设计工具,可以用来制作原型图、UI 设计图、可交互原型等。除此之外,它还支持使用 React 代码编写的组件直接接入,这样我们就可以给原型加入相机拍照、语音识别、真实地图、空间感应等其它设计工具不能或不好实现的效果。

Framer X 的特性可以从设计、可交互原型和代码三方面来讲。

设计

Framer X 绘制功能齐全,你可以在里面绘制出想要的界面或图标。但除此之外它还有一些比较方便好用的功能。

自动排布

Framer X 内置一种叫做 Stack 的设计元件,将其它元素拖放进去之后就会被自动排布,你还可以直接拖动某个元素来快速排序。

May-19-2019 12-02-50.gif

响应式布局

通过设定边界条件,来实现元素的响应式布局。

May-19-2019 12-04-52.gif

组件商店

直接从组件商店下载别人分享的组件,快速开始设计,不再从零开始。

WX20190519-120714@2x.png

可交互原型

直接通过快速连接来制作页面跳转,模态框弹出等效果。

WX20190519-122735@2x.png

还可以快速制作出翻页轮播,页面滚动等复杂效果。

WX20190519-122840@2x.png

无缝衔接到开发

Framer X 内置代码编辑器,提供了一个强大的基础库,支持 React 代码组件直接在设计中使用。有了代码,你就可以实现更加真实的效果。

比如加入一个真实的视频播放器,添加真实数据,嵌入地图等等。

WX20190519-123008@2x.png

代码组件还可以设置面板中的调整属性,这样你就能在右侧属性面板中直接调节组件。比如一个地图组件,你可以直接调节显示的城市、显示风格等等。

WX20190519-123343@2x.png

除此之外,Framer X 还提供 API,可以直接和开发工作流连接起来,形成一个完整闭环的设计系统生态。

参考:

Framer 中文网:https://www.framercn.com