最近よく耳にするLottie Files。
触る機会があったので、実作業と便利Tipをまとめました。

Lottie Filesとは

Lottie Files

Lottie（ロッティー）とは、Airbnbが開発したアニメーションライブラリ。CSSやJavascriptを使用せずに作成できる、オープンソースのWebアニメーションファイル形式。JSONでの書き出しが可能。

ついでに、Jsonとは？

JSON (JavaScript Object Notation)。JavaScriptのオブジェクト記法を用いたデータ交換フォーマット。 Python、PHP、JavaScript、C++、Javaなど様々な言語で使用できる。

After Effects： Lottie Filesの書き出し✌️

Step1. Adobe Creative Cloud でAE用の拡張機能をインストール。アカウントを作成する。

Step2. AEのエクステンションから、LottieFilesの拡張機能を選択。必要であれば、設定から下記のスクリプトに関するチェックを入れる。

Lottie Filesにログイン。パネルがアクティブになるので、書き出したいファイルを選択し、Renderを実行します。

Step3. Renderを実行後、「save to workspace」ボタンを押し、Workspaceに保存（つまりファイルのuploadであり、保存先のデフォルトはFirst Projectフォルダ）をすると、Downloadがアクティブになり、JSON形式ファイルでエクスポートすることが可能に。

ブラウザからLottie Filesにログインすると、下記の見た目のようなプロジェクトが作成されています。書き出しや、削除はここからでも可能。

無料アカウントの場合、ファイルのアップロード数に上限（無料は10ファイルまで）がある。

AEのアニメーションの種類によっては、サポートされていないものもあるので、アニメーションを作成する際には注意が必要。（下記の公式ガイドを参照する。）
マスクパスのアニメーションはサポートされていません😨💦

Figmaでの実装メモ & 参考Tips✌️

Figmaアニメーションの作成

作成から書き出しまでの流れは、下記の動画がわかりやすいです🐤

Figmaのプロトタイプ機能を使用してアニメーションを作成します。テキストの読み返しでは、下記記事が分かりやすいです🦔

Figmaのアニメーションで「パスの変形」が滑らかに再現できない場合、Lottie filesで書き出すと滑らかになるtipsはこちら⚽️↓

JSON書き出し手順

1. 「LottieFiles」のプラグインでアニメーションを書き出し

2. Lottie FilesにアップロードされたファイルからJSONを書き出し

STUDIOでの実装メモ & 参考Tips✌️

Figmaアニメーションの作成&書き出し

作成から書き出しまでの流れは、Figmaで行う🐤🦔⚽️（同じ）

STUDIOでの作業

1. 作成したLottie Filesの「Handoff & Embed」、［Enable Asset Link］を有効にし、Assets Linkを取得する。

2. 追加からLottiesを追加

3. Assets Linkを差し込みたいFilesに変更する。

おまけ：Lottielab

Lottielab：ブラウザ上で使えるモーションエディター（無料！）
SVGやFigmaデータを読み込める。

具体的なアニメーション作成方法は下記の記事が分かりやすい。

Figma + Lottielab + LottieFiles + STUDIO コンボ

いかがだったでしょう。自分用の手元資料ですが、誰かの役に立てば嬉しいです。

その他にもこんな記事を書いています。よろしければぜひ🙏