Figma で超簡単に Lottie アニメーションを作成する

Lottie は、Figma や、Adobe After Effects で作成したアニメーションを Web やアプリで利用できる軽量なフォーマットに変換できるライブラリです。JSON ベースのアニメーションファイルフォーマットを採用していて、さまざまなプラットフォームで再生することができます😄

今回の完成形はこちら。

イラストをつなげてエクスポートするだけなので、初心者の方でもイラストがあれば10分程度でポチポチと作成できます。

Lottie は、以下のような特徴があります。

従来の GIF や動画形式と比較して、Lottie は高品質なアニメーションを維持しながら、ファイルサイズを大幅に削減できます。

また、ベクター形式のため、どのような画面サイズでも鮮明な表示が可能です。開発者は JavaScript を使用してアニメーションの再生、停止、速度調整などを制御することができます。

Figma に LottieFiles をインストールするには、以下の手順を実行します。LottieFiles の公式サイトにアクセスします。

インストール後、Figma のプラグインメニューに LottieFiles が追加されます。Dev Mode プラグインは、アニメーションのプレビューやデバッグに役立つ機能を提供します。両方のプラグインを使用することで、より効率的な作業が可能になります。

Figma では、オブジェクトを作成することで、アニメーションさせたい要素を選択できます。

オブジェクトは可能な限りベクター形式で作成することをお勧めします。ベクターオブジェクトは、アニメーション時の品質を維持しやすく、ファイルサイズも抑えることができます。また、コンポーネントを活用することで、同じアニメーションを複数の場所で再利用することも可能です。

スマートアニメートとは、2 つのフレーム間で同じレイヤー名を持つオブジェクトのプロパティの変化を自動的にアニメーション化する機能です。位置、サイズ、回転、色、透明度などの変更を滑らかなアニメーションとして表現できます。

スマートアニメートを効果的に使用するためのポイント：

オブジェクトを選択して、右クリック → プラグイン → LottieFiles でエクスポートします。

Gif、MP4、WebM、MOV、Lottie JSON のエクスポート形式が可能です。JSON 形式は、Lottie の「Lottie JSON」からエクスポートできます。

エクスポート時は、アニメーションの品質とファイルサイズのバランスを考慮してフレームレートを設定します。一般的な Web アニメーションでは 30fps が推奨されますが、より滑らかな動きが必要な場合は 60fps を選択することもできます。

LottieFiles のアカウントを作成またはログインします。

LottieFiles のプラットフォームでは、アップロードしたアニメーションを管理・共有することができます。プレビュー機能を使用して、異なるデバイスやブラウザでの表示を確認できます。また、アニメーションの設定（ループ回数、再生速度、自動再生など）をカスタマイズすることも可能です。

LottieFiles の CDN（Content Delivery Network）設定画面では、アニメーションをウェブサイトやアプリで使用するための配信設定を行うことができます。

CDN を有効にすることで、アニメーションを様々なプラットフォーム（ウェブサイト、アプリ、SNS など）で効率的に使用することができます。特に大規模なトラフィックが予想される場合は、CDN の使用が推奨されます。

実装時は、アニメーションの複雑さとパフォーマンスのバランスを考慮することが重要です。特に、モバイルデバイスでの表示を考慮する場合は、ファイルサイズの最適化が必須です。また、アニメーションが自動再生される場合は、ユーザーの設定（省データモードなど）に応じて制御することをお勧めします。