Lottie×FigmaでSVGアニメーションをつくってみた

「Lottie」はAirbnbが開発し⁨⁩たAndroid、iOS、Web、Windows用アニメーションライブラリです。

拡張プラグインを仕様することで、Adobe After EffectsやFigmaで作成したアニメーションを簡単にWeb上でレンダリングすることができます。
Webサイトにアニメーションを実装する場合は、できるだけファイルサイズが軽量で拡大縮小に耐えられる解像度のアニメーションを用意する必要があります。
LottieではFigmaでつくったベクター形式のアニメーションをレンダリングし、HTMLに貼るだけでアニメーションが完成するコードを生成してくれます。

今回はLottieとFigmaを使って動くアイコンを作ってみました！

1. 1コマずつアニメーションを作る

Figmaで1コマ1フレームのアニメを作ります。
「ピン」のアイコンがくるくる回転するイメージで3コマ作りました。

2. プロトタイプで繋げる

下記の設定で、すべてのコマを順番に繋げます。

• アフターディレイ（2ms）
• 次に移動
• スマートアニメート
• イーズイン（800ms）

3. 1コマ目をフローの開始点に設定

1つ目のフレームを選択し、プロトタイプモードでフローを発生させます。
名前は「map pin」にしました。

4. プラグイン「LottieFiles」を開く

Figmaで「LottieFiles」と検索し、「実行」を押します。
ブラウザ上でアカウントを作成し、Figmaに戻ったら「Export Lottie」を押します。
「Select prototype flow」のボタンを押して、(3)で作成したフロー「map pin」を選択します。

動きが問題なければ「Save to workspace」ボタンを押して、任意のフォルダへ保存します。

5. ブラウザで保存したファイルを開く

右上の地球アイコン（Open in browser）を押して、ブラウザで開きます。

「アセットリンクを有効」にすると、埋め込み用のHTMLタグがコピーできるようになります。

6. HTMLにペーストして完成！

レンダリングやGIFに変換する手間もなく、軽量で解像度を気にせず拡大縮小できるSVGアニメーションができました！
Figmaのプロトタイプを理解してアニメーションを作ることができれば、コーダーへの指示をより詳細におこなうことができそうです。

もっと凝った動きも作れるように、いろいろ試していこうと思います！