Figmotionの使い方

はじめに

今回ご紹介するのは、簡単なアニメーションを作ることができるFigmaのプラグインです！

こちらはFigmotionで作成したボタンをプロトタイプに組み込んだものです！

このようにFigmotionを使えば、Figma上で簡単なアニメーションを作ることができます。そしてFigmaのプロトタイプ機能と組み合わせると、細かな動きを再現することができます。
それでは早速Figmotionについて学んでいきましょう！

Figmotionの基本

Figmotionでは、下記の11項目に対して動きをつけることができます。

書き出しはmp4、gif、webmの3つの形式から選べます。

Figmotionを開くと、このような画面が出てきます。

画面を開いたら、まず右上の「Select child to animate」をクリックし、アニメーションをつけるパーツを選択します。

そしたらアニメーションをつけていきます。
Xの横にあるダイヤ型のアイコン（キーフレーム）をクリックすると、タイムハンドルがある場所にキーフレームを置くことができます。タイムハンドルはドラッグするか、またはタイムラインの上にある時間タイトルをクリックすることで動かせます。

次に配置したキーフレームをクリックすると、このようなエディタが出てきます。

msは現在エディタを開いている地点を表しています。そして、その下の数字を変えることでアニメーションを設定できます。

ここまでざっくりと使い方をご紹介しました。ではここから実践編です！

実際に使ってみよう

では、早速Figmotionを使ってみましょう！
インストールはこちらからできます。

figmotion.app

使い方をご説明すると同時に、簡単なボタンのアニメーションを作ってみます！

1. パーツをフレームでまとめる

フレームの中に、アニメーションをつけたいパーツが入っている状態にします。
今回作成するボタンは、テキスト（download）と背景の２つのレイヤーから構成されています。

2. figmotionを開く

先ほどのフレームを選択した状態で、コマンド+/からfigmotionを検索して、「Open Figmotion」をクリックします。

3. アニメーションをつけたいパーツを選択する

figmotionが開けたら、まず右上の「Select child to animate」をクリックし「背景」を選択します。

4. アニメーションをつける

1. X軸方向の動きをつける

まず0msから300msの間にX軸方向の動きをつけます。0ms地点の設定をこのようにします。起点を左寄り中央に、座標位置は0にします。

もう片方は700ms地点にキーフレームを置き、同様の設定にします。

2.widthの設定

次に widthの設定です。0msから300ms間に動きをつけます。0ms地点のwidthを32にし、０ms地点での背景を正円の形にします。

3.opacityの設定

最後にopacityを設定です。widthと同様に0msから300ms間に設定します。0ms地点の値を0にし、見えなくします。

4. アニメーションを再生してみよう

ここまで設定してきたアニメーションを再生して確認しましょう。左上の再生ボタンをクリックすると、一連のアニメーションが再生されます。またタイムハンドルをドラッグすることでも確認できます。

5. 書き出し

確認ができたら書き出します。formatでgifを選び、永遠に再生したい訳ではないので「Enable loop」のチェックを外し、「Auto download and insert gif」にチェックを入れます。framerateは１秒間のコマ数です。ここでは24で書き出してみます。

6. 完成！

書き出しが終わりfigmotionを閉じると、gifが生成されています。
これで完成です！

まとめ

今回はFigmaで簡単なアニメーションを作成できるプラクイン「Figmotion」をご紹介しました！
Figmaのプロトタイプと掛け合わせると、タップのような動作に対するフィードバックなどをアニメーションで表現したりすることができます。
今後プロトタイプにアニメーションを取り入れる際には、Figmotionを使ってみてはいかがでしょうか？