Framer.jsに興味を持ったら ~tutrial, moduleまとめ~

![Framer.js](http://nlevin.com/framer/img/framer-studio.png)

※　随時更新
[元ソース](https://github.com/podo/awesome-framer)

# Framerの学習曲線
①　Framer.jsの公式サイトのチュートリアルを一通りやってみる

②　Galleryサイトやソースの上がっているプロジェクトの中から面白いと思ったプロジェクトを選び、真似してみる

みたいな感じに進めれば、使い勝手も良くなり業務でも使えるツールになってくると思います。

# Tutrials/examples

### いいExapmleの探し場所...
[公式Gallery](http://framerjs.com/gallery/)
公式のExampleが一番。やりたいことが大体揃っている

[UPLabs](https://www.uplabs.com/)
最近プロジェクトの投稿数が伸びてきた、dribbbleよりも実用的な投稿が多いサイト。"framer"のタグで検索するとソースコードごとダウンロードできるものが結構見つかる。

[FramerCode](http://framerco.de/)
一番クオリティが高く、そして実用的なtutrialが載っているサイト

[Farid SabitovのDribbbleページ](https://dribbble.com/FaridSabitov)
１日１プロジェクトをポストする100DAY Framerプロジェクトを始めたSabitofさんのページ。
Framerファイルだけでなく、Sketchファイルまでgit hubで交換してくれている

[Learn Framer The Hard Way](http://rmion.com/framer-js-in-100-days/)
こちらも50日間毎日framerプロジェクトを上げ続けることを目標に頑張ってる人のページ。見事にやりきった模様。

[Framer Experiments](http://thatedchao.com/published/2014/09/27/framer.html)
DropBoxのデザイナーのブログの１エントリー。Framerのコードがsource付きでまとまっている

### 試してみて勉強になったExample
[Periscope Heart Animation](http://framerco.de/post/124353078989/video-walkthroughperiscope-heart-animation-module)
Seatleのmeetupで開催された「classの基本」の内容に基づいたtutrial。class運用をマスターするのに最適。


#少し慣れてきたら
[Code Less & Achieve More with Arrays in Framer](https://medium.com/framer-prototyping/code-less-achieve-more-with-arrays-in-framer-c43594d13d59#.v9n4isalr)
配列やfor文を使ってよりシンプルで管理しやすいコードを書こう、という内容。

[Class Basic](https://www.facebook.com/jordandobson/videos/10155071749263747/)
せっかくjsベースで作ってるのでclassを使ってシンプルなコードを書こうよ、という話。

# モジュール
![capture_06.gif](https://qiita-image-store.s3.amazonaws.com/0/54076/4c4245ce-7174-fbf7-1bba-80a3b0c62cb2.gif)
[Framer-material-kit](https://github.com/k-vyn/framer-material-kit)
[紹介記事](http://qiita.com/52shinNaka/items/56b01bd9b7800a9cad05)

![](https://cdn-images-1.medium.com/max/800/1*jIPUuUF0KbNSGGrwE5zR9w.gif)
[view controller](https://github.com/awt2542/ViewController-for-Framer)
Prottのように紙芝居風にサクッと画面遷移を作れるようになるモジュール。
今やこれがないとモック作れないくらい

![](https://camo.githubusercontent.com/1d16f4a4fda403029965d54ee920cad528b68b71/687474703a2f2f766c6164696d697273686c7967696e2e636f6d2f6173736f727465642f702f706772617068736e2e676966)
[framer-path](https://github.com/vladimirshlygin/framer-path/blob/master/README.md)
SVGアニメーションを作るためのモジュール。これも必要度高め

![](https://github.com/ajimix/Input-Framer/raw/master/img/input.gif)
[input module](https://github.com/ajimix/Input-Framer)
Framerでinput要素を作るにはHTML要素ごといじってしまうか、このモジュール使うか。
画像の上にこのモジュール読み込ませたレイヤーかぶせるだけでいいのでとても使い勝手が良い。


[iOS kit for Framer](https://github.com/k-vyn/framer-ios-kit)  

[iOS tab barを作るモジュール](https://github.com/petterheterjag/tabBarModule)

[iOS通知を作るモジュール](https://github.com/leinerud/framer.iosnotification)

[グリッド代わりになるモジュール](https://github.com/nilshoenson/Framer-Grid)

[Material design独特のRipple animationを作るモジュール](https://github.com/offirg75/framer.RippleTransition)

[Audio Player Module](https://github.com/benjaminnathan/Framer-AudioPlayer)

[video player module](https://github.com/stakes/Framer-VideoPlayer)

[UI sound module](https://github.com/RayPS/Framer-Module-UISound/)
音を再生できるようにするモジュール

[Camera Layer](https://github.com/ktcy/CameraLayer)

[iOS keyboard](https://github.com/supsupmo/ios-keyboard-for-framer)

[VR module](https://github.com/jonastreub/VRComponent)
未来を生きよう。

# おまけ
### 他サービスと組み合わせてより快適に
Framerはweb baseなので、sketch上でプロトタイプが作れるCraftと組み合わせて、
大まかな遷移はCraft、こまかなインタラクションはFramerというふうに使い分けられるという話。
[Injecting Micro-Interactions into Craft’s Prototype](https://blog.prototypr.io/injecting-micro-interactions-into-crafts-prototype-1b4e8b72f01c#.8ubs5siqu)


Firebaseと組み合わせてデータの受け渡しもできるようになるよ、というTutrial記事。
[Supercharge your Framer prototype with Firebase](https://medium.com/framer-prototyping/framerfirebase1-e7d13a939cf4#.i3vasn8mt)