FigmaでLottieアニメーションを作ってみた！

こんにちは！SaaS事業部デザイナーの澤田です！エキサイトホールディングス Advent Calendar 2024 の19日目を担当します。

エキサイトホールディングスの各社に所属するエンジニア・デザイナーが力を合わせてブログのバトンを回しているので、ぜひ他の記事も覗いてみてください😊

qiita.com

本日はもうすぐクリスマス🎄...ということで、Lottie（ロッティ）というサービスを利用してクリスマスにちなんだアニメーションを作成してみました！

この記事では、Lottie初心者向けに、同じくLottie初心者が実践したことの共有となります🔰 ぜひ「こんなこともできるよ...!」などがありましたら教えていただけると嬉しいです..!!

Lottieとは？
Lottieアニメーションの作り方
Lottieでは無料アニメーションもたくさん！
まとめ

Lottieとは？

『Lottie（ロッティ）』とは、Airbnbが開発したJSONベースのアニメーションファイル形式です。GIFと比較してファイルサイズが小さく、どんなデバイスでもピクセル化を起こさずに拡大縮小できるのが特徴です。

FigmaやAfter Effectsなどのデザインツールで作成したアニメーションを、Webサイトやアプリに簡単に取り込むことができます。

参考：Lottieアニメーションとは？- LottieFiles

Lottieアニメーションの作り方

今回は普段よく使用するFigmaで作成しました。そのほかAfter effectやLottie Creatorを利用してアニメーションを作ることもできます!

0.事前準備

Lottieのアカウントを作成する

1.Figmaのプロトタイプ機能でアニメーションイメージを作成

①フレームを作成し、アニメーションに必要なオブジェクトを配置する

②プロトタイプ機能を使ってアニメーションを作る

【作成のポイント】

最終形態から遡って作成し、不要なパーツは不透明度を0%にする（削除してしまうとうまくいきませんでした💦）
トリガーはアフターディレイにする（ユーザーが特定のフレームで一定の時間を費やすと、自動で次のアクションへと進むことができる設定です）
アニメーションはスマートアニメートにする（フレーム間で同し要素がある場合、変化前と変化後の要素の差分を埋め合わせてアニメーションをつける機能です）
フローの開始地点をつける（地点名がファイル名になります）

まだ自由になんでも再現できる...というわけではないみたいです。詳しくはサポートサイトをご参照ください。

2.プラグイン「LottieFiles」をインストール

3.ログインし、LottieFilesへ書き出す

①書き出したいフレームをすべて選択し、「Export to Lottie」ボタンをクリックする・または「Select prototype flow」から書き出したいフローを選択する

② 「Save to workspace」をクリックする＞アップロード先のフォルダーを選択し、「Save」ボタンをクリックする

4.LottieFilesで書き出したアニメーションを確認

再生スピードや配色などはここでも変更できます。思った通りにアニメーションが出来たら、Enble Asset CDNのトグルスイッチをONにし、埋め込みコードをコピーします。

ウェブサイト上のアニメーションを表示したい箇所にこのコードを記述するだけで簡単にWEBアニメーションが実装可能です！

今回作成したクリスマスツリーのアニメーション

<script src="https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player src="https://lottie.host/80f8339e-ec85-4c78-b03e-cee4d9f76c93/Ff5O64O6jE.json" background="transparent" speed="1" style="width: 300px; height: 300px" direction="1" playMode="normal" loop controls autoplay></dotlottie-player>