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

視頻

• coffeescript入門：https://www.youtube.com/playlist?list=PL399DF0B74063889F
• Framer Crash Course：https://www.youtube.com/playlist?list=PLWlUJU11tp4f41p4dzizVkjjTQ38kA0wG

搜索

善用搜索能夠縮短你解決問題的時間，推薦在谷歌用英文搜索，能搜到很多 Facebook 小組成員的解答。關於 module 使用問題可以直接在對應 github 的 issues 裡面搜索，一般也能搜到答案。

推薦閱讀：