Framer 学习资源汇总

Framer 不是一款很大众的原型工具，因此网上可以找到的学习资源不多。今天我把自己接触到的资源进行汇总，希望能帮助你更好地学习Framer。如果你有补充的话，可以在下方留言评论。

需要说明的是，目前英文资料比中文资料更加丰富，所以英语不太好的设计师朋友们还是尽量逼迫自己啃一下英文，对自己以后的设计生涯帮助会很大（来自一个英语四级没过但毕业后狂补并至今受益的我的建议）。

官网资源

其实我们找来找去，最好的资源还是在官网，但我们却往往忽视它。

• 入门视频：https://framer.com/getstarted/tutorials/
• 官方或社区kit：https://framer.com/getstarted/resources/
• 官方指导：https://framer.com/getstarted/guides/
• 官方示例：https://framer.com/getstarted/examples/
• 官方博客：https://blog.framer.com/
• 官方文档：https://framer.com/docs/

Framer 中文网

如果你的英语不是很好，但是又想急切地上手，可以去 Framer 中文网看我翻译过的入门知识和文档。

• 资源：http://www.framercn.com/learn/resources
• 编程知识：http://www.framercn.com/learn/programming
• 设计模式：http://www.framercn.com/learn/design
• 代码模式：http://www.framercn.com/learn/code
• 协作：http://www.framercn.com/learn/collaborate
• 文档：http://www.framercn.com/docs
• 灵感（作品）：http://www.framercn.com/inspiration
• 文章合集：http://www.framercn.com/articles

还有更多新功能即将上线，如问答社区等，请期待。

电子书籍

• 国内：豆瓣阅读《Framer原型设计指南》。
• 国外：framerbook。

github

Framer 原型设计的动效逻辑是基于代码的，而编程相关最好的资源在程序员开（交）源（友）社区 github。

• Framer 核心引擎库：https://github.com/koenbok/Framer（有些代码问题可以在 issues 里面搜到）
• 与 Framer 有关的好东西：framer awesome
• Framer 模块（类似于 Sketch 的插件）：framermodules
• 帮助你高效导入 Sketch 设计图：sketch-framer
• Framer VR 设计组件：https://github.com/jonastreub/VRComponent
• 让你在 Framer 中使用真实数据：https://github.com/marckrenn/framer-Firebase
• Framer 常用代码片段收集：https://github.com/robotdestroy/Framer-Snippets-Library
• Framer 谷歌材料设计组件库：https://github.com/k-vyn/framer-material-kit
• 常用的快捷方法函数：https://github.com/facebookarchive/shortcuts-for-framer

博客

• 一个台湾设计师关于 Framer 的合集：https://medium.com/framer-js-taiwan
• Framer 入坑指南系列文章：https://www.jianshu.com/c/894fd643e695
• 一个美国设计师的 Framer 教程：https://www.prototypingwithframer.com/
• 一个设计师的 Framer 系列文章：https://medium.com/@tessgadd
• PeterZ 的知乎专栏《DesignCoder》：https://zhuanlan.zhihu.com/designcoder
• 我的知乎专栏《嘿！设计师》：https://zhuanlan.zhihu.com/codesigner

项目

• Framer100：一位设计师由易到难的一百个Framer示例 http://tonyxj.github.io/100daysofframer/index.html

视频

• Framer 基础入门系列中文教程: 腾讯视频
• coffeescript入门：https://www.youtube.com/playlist?list=PL399DF0B74063889F
• Framer Crash Course：https://www.youtube.com/playlist?list=PLWlUJU11tp4f41p4dzizVkjjTQ38kA0wG

搜索

善用搜索能够缩短你解决问题的时间，推荐在谷歌用英文搜索，能搜到很多 Facebook 小组成员的解答。关于 module 使用问题可以直接在对应 github 的 issues 里面搜索，一般也能搜到答案。