めちゃくちゃ簡単！ Figmaのデザインにモーションを加えるWebエディター「Jitter」

こんにちは。
Maromaro デザイナーのshunです。

以前「3ステップで誰でもカンタン！　アニメーションライブラリ「Lottie」でサイトに動きを取り入れよう。」
という記事で、Figmaで作ったデザインをLottieで動かしてサイト反映できますよ！と紹介させてもらったのですが、

もっともっとカンタンなアニメーション作成が可能なツールを見つけたのでご紹介します。

その名も「Jitter」。（ひと昔前ならTwitterのサードバーティかと思いますよね。）

以前紹介したLottieでは

1. Figma上でプロトタイプアニメーションを作成
2. Lottieに連携
3. Lottie上でコードを書き出す

という流れで、アニメーション作成ができるとしていたのですが、
①の時点で難しい、時差的なアニメーションができない等少しハードルがありました。

そんなネックだった部分を直感的にシンプルな操作で解決できるのが「Jitter」です。
それでは具体的な使い方を見ていきましょう。

①アカウント作成

Jitterのサイトへ飛んで、右上の「Try for free」をクリック

Google連携かメールアドレスでアカウントを作成します。

②FigmaのデザインをJitterに連携

Figmaで作ったモーションさせたいフレームをプラグインの「Jitter Animation for Figma」でJitterに連携します。

これで連携が完了します（めちゃカンタン)

③Jitterでモーションをつける

連携するとJitterの中にデザインが表示されます。

動かしたい要素を選択して、New Animationをクリック。
すると動かし方や速度、方向などが表示されポチポチ設定していくだけでアニメーションがついていきます。（レイヤー構造もFigmaと同じで探しやすい）

各種アニメーション長さやタイミングなどは画面下部にあるタイムラインからドラック＆ドロップなどで直感的に編集ができます。

④Exportで任意の形式で書き出す

アニメーション設定が完成したらExportします。
右上のボタンから、MP4やgifなど任意の形式で書き出せます。Lottieもできるので、そのままHTMLにも反映が可能です。

⑤完成！

今回はgifで書き出してみました。

おおーーできてる！

・・・・・・・・

もうお気づきかと思いますが、無料版だと右下に小さく「Jitter.video」とウォーターマークが入るようです。

またmp4の4K書き出しなど書き出し形式や、モーションの設定など一部制限がかかります。

調べた感じ、一番安いプランで月$15（年$180）のようでした。

そ、そんなに使うのかしら・・・？と絶妙なラインですね。

しかし無料範囲でも、クライアントに動きのサンプルが見せられたり、社内エンジニアへのイメージ共有としてはカンタンに作れてありがたいので、活用していけそうです！

本記事は動くバナーを作ってみましたが、サイトのUIのマイクロインタラクションや、イラストのモーションなども作って公開している人がいたので、可能性が広がりそうですね。

p.s.
今回題材とした、月のブックカバー、「Covers」にて絶賛好評発売中です！
しなやかで上質な本革に三日月の箔押がされたシンプルでおしゃれなブックカバーです。
ぜひご覧くださいませ。

以上、Maromaro Shunでした。