Lottieで使えるアニメーションを作るワークフロー

Shunsuke Sawada

アプリやWebで使うためのアニメーションって、簡単なものだとCSSやGIF画像を貼り付けることで対応できますが、パフォーマンスや実装を考えるとやはり Lottie が必要。とくに再生を制御する場合は必須になってきます。
このアニメーションを作る方法がけっこう面倒なので、手順をまとめます。

必要なツール

Figma

まずはアニメーションしたいデザインを Figma で作ります。
AEUX は Sketch にも対応しているので、Sketch を使用してもOK。
Illustrator は微妙です。

AEUX

AEUX は、Figma か Sketch で作成されたデータをうまく After Effect に取り込むために必要なプラグインです。

Illustrator で作成したデータを After Effect に読み込んでアニメーションさせるためには、シェイプレイヤーに変換する必要がありますが、その時に余分なデータが多く生成されてしまい、アニメーション作成の邪魔となります。特にマージパスが入っていると Lottie で再生できないので注意です。
また、最終的な Lottie 用ファイルにも、余分なデータが含まれることなるので、実装した時にパフォーマンスにも影響してしまう。この問題を解決するのが AEUX となります。

Figma にインストール

AEUX は現時点では Figma の公式プラグインとして公開されていないので、こちらからダウンロードしたファイルを Plugins > Development > New Plugin... から自分でインストールする必要があります。
プラグインファイルはインストールした後も移動させず、削除もしないでください。

AfterEffects にもインストール

AfterEffects にも AEUX のプラグインをインストールしておく必要があります。ZXP Installer を使ってインストールしてください。
そして AfterEffects が起動した状態にしておきます。
プラグインファイルはインストールした後も移動させず、削除もしないでください。

起動

Figma で Command + / として、aeux を検索したら起動するはず。
転送したいデザインのフレームを選択して、Send selection to Ae を選択。
これで、新規コンポジションとしてデザインが転送できているはず。

ちなみに、Overloadというツールを使えば Illustrator でも同じようなことができそうです。未検証ですし、現時点では 6,600 円かかります。

After Effects

このようなアニメーションを作成するアプリケーションとしては大げさ過ぎるので、あまり使いたくなかったですが、やはりデファクトは AE になってしまうみたい。Haiku とか他のサービスもあるけども結局有料だし。

ここでは AE の使い方は解説しませんが、根気のいる作業になります :)
アニメーションを作成する前に、必ず こちらのサポートされている機能 を確認しましょう。
エフェクトやマージパスは使えないので注意です。

便利なツール Key Cloner も使うと良いかもしれません。ループアニメーションは特に。スクリプトのインストール方法は こちらの記事 が参考になりました。

LottieFiles

LottieFiles は複合的なウェブサービスです。

等ができたりします。
ここでは一番目のプラグインが必要です。こちらからインストール

ほとんどの人が右側の Adobe Exchange 経由で良いかと思います。
Creative Cloud ユーザー以外の方は、左のボタンで .zxp ファイルをダウンロードし、ZXP Installer を使用してインストールします。ちょっと面倒ですね。

インストールできたら、Window > Extensions > LottieFiles から起動することができます。

書き出したいコンポジションを選択すれば、アニメーションがレンダリングされるとともに、JSON ファイルを保存できるようになります。LottieFiles にログインしていれば、直接 Web にアップロードすることもできます。

BodyMovin

BodyMovin は LottieFiles にも組み込まれているソフトウェアで、AfterEffects のキーフレームアニメーションを Lottie 用の JSON に変換してくれます。

LottieFiles のプラグインを使用する場合は不要ですが、より詳細なオプションを利用する必要がある場合は、こちらをインストールしてください。同じく ZXP Installer でインストールします。

特に Expo x ReactNative の環境で Lottie を動かす場合は、BodyMovin を使って以下のオプションを有効にしてください。

実装する

LottieFiles もしくは BodyMovin を使って書き出した JSON ファイルを使って各プラットフォームに実装します。
各実装方法はこちらのドキュメントを参照

プロトタイピングの場合は、LottieFiles Figma Plugin を使うと GIF 画像として読み込むことができます。

以上です。

Happy Animation!

参考

5
Shunsuke Sawada

おすすめの記事

RailsでGoogle mapsを使いこなすためのメモ 4 / 取り出したデータを使って地図にピンを落とす
RailsでGoogle mapsを使いこなすためのメモ 5 / すでに存在するピンは再度取得しないようにする
5
Figmaで使えるアニメーション透過GIFをつくる
2