Framer 学习资源汇总
https://framercn.com (公众号:codesigner)
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 里面搜索,一般也能搜到答案。
编辑于 2018-07-03