设计师们经常回避使用 Framer（http://framerjs.com/） ，因为和其他原型工具相比，它的初始学习曲线更高。这是由于它是基于代码来实现原型，但这也恰恰是令它强大和全能的原因 —— 你可以创建其他工具无法实现的详尽的、高保真的交互原型和动效。

当学习一个新的软件和工具时，按照逐步指导的教程来在实践中学习是一个很好的探索和学习的方式。

下面是10款Framer的教程，可以帮助你从菜鸟开始使用Framer创建属于你自己的交互原型。不过，在你开始之前，请先去Framer官网的 学习专区（http://framerjs.com/learn/basics/） 熟悉一下layers、animation、events、CoffeeScript以及其他相关的基础知识。

创建Inbox App动效

http://www.prototypingwithframer.com/zero-inbox-animation/

使用Sketch和Framer再现Google Inbox 收件箱清空时的动效

实现Uber Apple Watch App 原型

http://www.prototypingwithframer.com/uber-apple-watch/

一个逐步指导如何实现Uber Apple Watch App原型效果的Framer教程。

不熟悉 Framer? 让你入门的三要点

https://medium.com/@designforhuman/new-to-framer-just-3-things-to-get-you-started-47397f27c71e

David Lee 带你学习Framer的三个关键概念：events, layers, states，以及一个Google Inbox的原型范例。

创建一个按钮Loading动效

http://www.prototypingwithframer.com/creating-a-button-loading-animation/

使用Framer实现一个简单的按钮loading动效

使用Framer实现 Material Design 原型效果

http://www.prototypingwithframer.com/material-design-with-framer/

一个如何实现常见material design 交互原型效果的Framer教程。

至那些认为Framer.js怪异和困难的人们

https://medium.com/@sean_mateer/framer-js-for-people-who-think-things-like-framer-js-are-weird-and-hard-add2068c8114

Sean Mateer 教你如何使用Framer创建一个引导界面的滑屏效果Demo

iOS 锁屏交互原型

http://www.prototypingwithframer.com/ios-lock-screen-interaction/

一个如今常见的手机app原型效果 —— 滑屏翻页效果

Twitter 庆祝生日气球动效

http://www.prototypingwithframer.com/twitter-birthday-balloon-animation/

使用Sketch和Framer在Twitter个人信息界面生成随机的气球动效

和卡内（美国说唱歌手）一起学Framer

https://medium.com/@_mikehlee/learn-framer-with-kanye-32bc68eb80d8

用Framer+卡内（美国说唱歌手）的头像图片实现一些交互效果

用Framer创建你的第一个原型

https://medium.com/@kennycheny/creating-your-first-prototype-with-framer-c39221da7668

这是我创建的第一个Framer原型

通过这些Framer教程，你将体验到Framer的强大，以及顺利的实现属于你自己的原型。

像学习更多关于Framer的内容？

请浏览原作者的博客 Prototyping with Framer http://www.prototypingwithframer.com/

From：https://medium.com/@kennycheny/learning-framer-6030028cb08e#.ooq5fenes

--------------------------------------------------------------------------------------------

Shunz顺子

欢迎订阅个人微信公众号：UX思考（ID：UXThink）