书籍

《Framer 原型设计指南》豆瓣专栏是我写的一本比较成体系的教程书，通过实例逐个讲解 Framer 中的一些概念，如图层、状态、组件等，再通过一些综合案例帮助你进阶。

​​​​

视频教程

《Framer Studio 基础入门系列中文教程》是国内第一份比较完整的视频教程，帮助初学者快速入门。 ​​​

官方模板

这两个模板包含了常见的 iOS 和 Android 上的交互控件，包括动作菜单、滚动视图和页面等。

• ​下载 Android 版本​

• ​下载 iOS 版本​

官方套件

Framer 团队出品的两个完整套件，让你基于它们定制自己的原型，不再从零开始。

• ​内含 8 个社交主题原型以及详细说明。​

• ​10 个旅行主题原型，有着丰富的交互效果。​

模块

正如 Sketch 和 Photoshop 有众多的插件帮我们处理一些定制化的任务一样，Framer 也有很多额外的插件——这就是 Framer 模块。很多 Framer 的用户贡献了精彩的 Framer 模块，让我们可以快速制作原型。

• ​简单的音频播放模块。​

• ​创建环形的加载器和动效。​

• ​让你快速分布对齐图层。​

• ​收集的 Framer 代码片段。​

• ​在 Framer 中使用谷歌字体。​

• ​帮助你创建渐变效果。​

• ​通过栅格帮助你快速布局。​

• ​绑定不同图层的不同属性。​

• ​完整的 iOS 组件库。​

• ​处理用户输入的组件。​

• ​完整的谷歌材料设计组件。​

• ​iOS 版的消息通知。​

• ​处理设备方位事件的模块。​

• ​在 Framer 中绘制 SVG 路径。​

• ​为你的原型创建透视。​

• ​安卓水波纹按钮模块。​

• ​监听手机摇晃事件。​

• ​创建底部切换菜单。​

• ​快速添加文本图层。​

• ​更好地处理货币或数字信息。​

• ​视频播放器插件。​

• ​快速关联页面跳转。​

入门教程

下面这些教程由易到难，你可以逐篇阅读，跟着里面的实例学习 Framer。有些教程可能时间比较久了，和现在的版本有出入，但不影响学习。

• ​像学习写文章一样学习 Framer 编程​

• ​Framer 图层 | 一起来画个音乐播放器​

• ​Framer 动画 | 让播放器的摆针动起来​

• ​Framer 状态 | 如何动态展示一个 logo 的演变过程​

• ​Framer 事件 | 如何制作安卓点击水波纹效果？​

• ​原创教程 | 做一个酷酷的弹出式菜单​

• ​翻译教程 | 创建一个 Inbox 无邮件提示动画​

• ​你可能不知道，Framer中藏着一把瑞士军刀​