Zenn
🏄‍♀️

FigmaからLottieアニメーションをつくってみよう！

2024/12/17に公開
Figma
Lottie
tech

Lottieとは？

Lottieは、After Effectsなどで作成したアニメーションをJSON形式に変換し、軽量でなめらかなアニメーションをWebサイトやアプリで動かせるための技術（フォーマット）です。

Lottieの特徴

①軽量

アニメーションというとGIFやmp4動画などありますが、それよりも格段にデータが軽いということが特徴です。なぜ軽いかというとアニメーションを画像や動画ではなくJSONというコード（テキスト）ベースのデータ形式に変換するという仕組みなので、とても軽量です。

②拡大縮小に強いベクター素材

もう１つ大きな特徴としてはSVGのようにベクターデータでコードベースのため拡大縮小しても劣化せずなめらかなアニメーションが可能です。

③クロスプラットフォーム対応

LottieのアニメーションはWebはもちろん、iOSやAndroidなどのモバイルアプリにも対応しているため、同じアニメーションを複数の環境で再現できます。

④高いデザイン再現性

Lottieはコードベースで動きを記述するため、デザイン通りの精密なアニメーションを実現できます。たとえば、抜け感のない清晰な動きや、逆に自然な適当さを表現したい場合も、Lottieは最適です。

Lottieアニメーションをつくってみよう！

  1. ベクターイラストを配置
    AfterEffectsだけでなくFigmaでも手軽にアニメーションを作成することが可能です。
    今回はフリー素材サイトからベクターイラストをSVGでダウンロードして使用します。
    ベクターデータをフレームごとに配置し、ベクターイラストに変化をつけていきます。

  2. Figmaのプロトタイプ機能を使いアニメーションを設定する
    ・[スマートアニメート]→フレーム間の変化を自動でいい感じになめらかに
    ・[アフターディレイ]→自動的に再生されるように
    ・[次に移動]→次のフレームを指定
    ・最初のフレームと最後のフレームをつなげてループされるように

    修正とプレビューを繰り返し、アニメーションを完成させます。

    作成したアニメーションに［フローの開始点］を追加し、名前を設定しておく

  3. LottieFilesプラグインを使用したJSON形式への変換
    ・LottieFilesプラグインをFigmaにインストール
    https://www.figma.com/community/plugin/809860933081065308
    無料登録が必要です。無料版はアップロード数などに制限があるようですが、無料版でも十分使えると思います。
    フローを選択して「Export to Lottie」を押して「Save to workspace」、「Save」で保存。
    プレビューで問題ないことを確認できたら、LottieFilesのブラウザ版に移動する必要があるため右上の地球マークから移動します。

    先ほど保存したアニメーションが、自分のプロジェクト内に保存されているので、
    対象のアニメーションが選択された状態で右メニューの</>マークを選択。「Enable asset CDN」をONにすると下にコードが表示されるので、まるごとコピーする。

コピーしたコードをエディタのHTMLの任意の箇所に貼り付けます。

アニメーションはシンプルですが、、簡単にLottieアニメーションを実装することができました。
CDNでなくJSONファイルとしてダウンロードすることも可能です。

参考記事

・LottieFiles
https://lottiefiles.com/jp/what-is-lottie

・FigmaでLottieアニメーションを作ってみよう！作成方法やメリット、注意点を解説 - necco Note | necco inc.
https://necco.inc/note/31208

・最新版！ Lottieアニメーションの作り方 - Figma編 - ICS MEDIA
https://ics.media/entry/230913/

Discussion