Framer X 是一款全能型设计工具,可以用来制作原型图、UI 设计图、可交互原型等。除此之外,它还支持使用 React 代码编写的组件直接接入,这样我们就可以给原型加入相机拍照、语音识别、真实地图、空间感应等其它设计工具不能或不好实现的效果。
Framer X 的特性可以从设计、可交互原型和代码三方面来讲。
设计
Framer X 绘制功能齐全,你可以在里面绘制出想要的界面或图标。但除此之外它还有一些比较方便好用的功能。
自动排布
Framer X 内置一种叫做 Stack 的设计元件,将其它元素拖放进去之后就会被自动排布,你还可以直接拖动某个元素来快速排序。
响应式布局
通过设定边界条件,来实现元素的响应式布局。
组件商店
直接从组件商店下载别人分享的组件,快速开始设计,不再从零开始。
可交互原型
直接通过快速连接来制作页面跳转,模态框弹出等效果。
还可以快速制作出翻页轮播,页面滚动等复杂效果。
无缝衔接到开发
Framer X 内置代码编辑器,提供了一个强大的基础库,支持 React 代码组件直接在设计中使用。有了代码,你就可以实现更加真实的效果。
比如加入一个真实的视频播放器,添加真实数据,嵌入地图等等。
代码组件还可以设置面板中的调整属性,这样你就能在右侧属性面板中直接调节组件。比如一个地图组件,你可以直接调节显示的城市、显示风格等等。
除此之外,Framer X 还提供 API,可以直接和开发工作流连接起来,形成一个完整闭环的设计系统生态。
参考:
Framer 中文网:https://www.framercn.com