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

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

设计

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

自动排布

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

响应式布局

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

组件商店

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

可交互原型

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

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

无缝衔接到开发

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

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

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

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

参考：

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