Framer初学者が挫折しないためのベストプラクティス

2018年9月10日 23:47

会社でFramerに興味のある人に使い方を紹介する機会があったので、少し上達までのベストパスのようなものを考えてみました

この記事の前提
・JavaScriptは入門書を少し読んだりドットインストールをみたことがある程度の理解
・SketchやAdobe XDは使い慣れている

早く使えるようになるコツ

Framerを早く使いこなせるようになるコツ、それは、
自分が気に入ったサンプルを落としてきて真似して作ってみるのが一番！だと思ってます。

サンプルを落としてきて、ワザを学び、それを応用して自分でも一つ作ってみる、ということを10回も繰り返せば、もう初級者は卒業です。

超大作を作ってやりたい！という気持ちはグッと我慢して、小さなアウトプットを一つ一つ積み重ねていくのが大事です。

サンプルを落としてきて参考にする時に、自分では理解できないコードが書かれてたりすると厄介です。

そんな残念な事象を避けるために、この順番で学習すれば恐らくハマらないだろうという勉強中を考えてみました。

ここでLayerと言っているのは色やシャドウの付け方のことですね。これをコードで作る時は、どういう記述をすればいいかという話です。

下のブログにとても良くまとまっています。全部を一度に覚える必要はなくて、こういうこともできるんだーと頭に入れておく程度で良いです

「AしたらBする」というアクションの書き方です。イベントを指定して、何を起こすかを記述してあげればいいです。

「クリックされたらコメントアウトする」という記述であればこの通り

クリックされるレイヤー名.onClick ->
    print "クリックされたよ"

EdgeSwipeだったり、onScollだったり、どんなイベントがあるのかな？というのを公式Documentをみて軽く覚えておくと後がラクです

StateというのはAからBへの状態変化のことです。Stateの使い方についてはこちらのブログが大変良くまとまっています。

ちゃんと作り込むとこんなのもできる

同じ要素を繰り返し並べる時に便利です。

理解には一苦労ですが、ほとんどのサンプルで使われてるので早めに覚えてしまうのが良いです。下のブログに良くまとまってます

スクロール要素を作るのに必要なのが、ScrollComponentです。こちらのブログに良くまとまってます。サンプルもあります

スクロールじゃなくて、ヌルッとした動きをさせたいときに

ProttやInvisionみたいな画面遷移を簡単に作りたいなーと思った時にはFlowComponentを使います。他のツールと比べてちょっと面倒だなと思うかもしれません（Framer Xではかなり簡単になります）

冗長なコードが、スッキリ綺麗になります。ある程度の規模のプロトを作るには必須のClass。これがマスターできれば間違いなくFramer中級者！複雑なプロトタイプも作れるようになってるはずです！

このPeriscopeのLikeアニメーションのプロトタイプを作ってみるとclassの良さがわかるかも