最新版！ Lottieアニメーションの作り方 - Figma編

最新版！ Lottieアニメーションの作り方
- Figma編

「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。

画質の劣化を伴わないLottieによるアニメーションの導入は、UI改善・コンテンツの没入感の形成・リッチな体験を提供する効果が期待できます。

本記事ではLottieの概要から、まずはデザインツール「Figma」を使ってお手軽にLottieを作る方法を紹介します。

▼Lottieの作例

Lottieとは

ベクターとラスター

まず、画像形式について少し整理しておきましょう。画像形式はベクターとラスターの2種類に分けられます。ベクターとラスターの違いについては記事『SVGで始めるマイクロインタラクション入門』で解説していますが、簡単にいうと拡大しても高い解像度を保ちボケないのがベクター画像、ボケるのがラスター画像です。

そして、Lottieはベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。

ラスター画像のアニメーション（動画形式・アニメーション画像形式）については、『ウェブサイトに透過動画を埋め込む方法』にて解説していますのでぜひご覧ください。

Lottieのファイルフォーマット

Lottieはベクター画像をアニメーションさせる技術といいましたが、実態はオブジェクトとアニメーションのデータを保持したテキストファイルです。とくに、After Effectsのプラグイン「Bodymovin」から出力されるJSON形式のファイル（.json拡張子）を指します。

中身はテキストファイルなので、ラスター形式の動画やアニメーション画像と比較すると容量が軽量であることが特長です。レンダリング時にSVGとして描画ができ、アニメーションしている結果が見られます。

※レンダリングの設定でcanvas要素を指定すれば、ラスター形式で表示させることも可能です。

開発が進む`.lottie`拡張子のLottie

また、後発で.lottie拡張子のLottieである「dotLottie」の開発が進んでいます。.json拡張子のLottieよりも容量の圧縮率が高く軽量で、拡張子名からどのようなデータなのか一目瞭然であることが特長です。

.json拡張子のLottieと同じくベクター画像のアニメーションを再生させることができるファイルですが、中身は圧縮データファイルのためJSON形式のように、テキストエディターから中身を確認したり編集できない点は注意しておきましょう。

作り方

元々はAfter Effectsの拡張機能「Bodymovin」を使って作ることで開発されたLottieですが、「LottieFiles」プラグインの登場により、Figmaなどのそのほかのクリエイティブ系ツールでもアニメーションをLottieとして書き出すことができるようになりました。

参考：Lottieの書き出しを行えるツール一覧

今回は、Figmaのプロトタイプ機能を使ってアニメーションを作成し、LottieFilesから書き出す方法を紹介します。

▼Lottieの作成・書き出し・実装までの一連の流れ After EffectsやFigmaなどで作成、BodymovinやLottiFilesから書き出し・プラットフォームやプロジェクトに応じて様々な方法で実装

Figmaのプロトタイプ機能は、いくつかのフレームを繋げてアニメーションさせるものですが、トランジションの種類を「スマートアニメート」に指定すれば自動的にフレーム間のアニメーションを補完してくれるので、キーフレームアニメーションのようなシームレスなアニメーションが作れます。スマートアニメートの概要や使い方は『FigmaのSmart Animateを活用したプロトタイプ入門』にて解説していますので、FigmaでLottieを作ってみたい方はご確認ください。

1：アニメーションを作成

以下のポイントを押さえてアニメーションを作成します。アニメーションの内容については説明すると長くなるので省略いたします。

「トランジション」は「スマートアニメート」を指定します。
「インタラクション」はすべて「アフターディレイ」にし、終了フレームと開始フレームを繋げることでループアニメーションが作れます。
アニメーションで使える項目はサポート表をご確認ください。

2：Figmaの「コミュニティ」から「LottieFiles」を検索し、プラグインを入れる

「LottieFiles」プラグイン
プラグインの入れ方は記事『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』にて解説していますので、わからない場合はご確認ください。
［使ってみる］ボタンの下に「サードパーティ決済」と書かれていますが、無料で使うことができます。参考：Figma to Lottie – Help Center

▼Figma |「LottieFiles」プラグイン FigmaのLottieFilesプラグイン

3：LottieFilesにログイン、またはサインアップします。

［プラグイン］から［LottieFiles］を選択すると、ログインかサインアップを求められるので、アカウントを作成していない場合はLottieFilesのアカウントを登録します（Figmaアプリで作業していた場合ブラウザに飛びます）。

▼LottieFiles | アカウント登録画面（登録は無料で行えます） LottieFiles登録画面

4：書き出し

① ［プラグイン］から［LottieFiles］を選択し、［Export to Lottie］タブをクリックします。

② 書き出したいフローを選択し、［Export to Lottie］ボタンをクリック、または［Select prototype flow］から書き出したいフローを選択します。

Figmaの手順①②

③ ［Save to workspace］をクリックします。

④ アップロード先のフォルダーを選択します。

⑤ ［Save］ボタンを押します（非公開ファイルとしてアップロードされます）。

Figmaの手順③④⑤

⑥ ［Open in browser］をクリックしブラウザで確認しましょう。

⑦ LottieFilesからファイル形式を選んでダウンロードすれば書き出し完了です。そのほか配色の変更など簡単なカスタマイズもできます。

Figmaの手順⑥⑦

LottieFilesとは

Lottieの作例をアップロードできる・アップロードされている作品を利用できるコミュニティのようなものであり、Lottieの簡単な編集から書き出し機能やプラグイン、実装時に必要なライブラリを提供しているサービスです。

アップロードされている作品を使う

LottieFilesコミュニティにアップロードされている作例は、基本的には無料で編集やダウンロードして使用することが可能です。 ※ダウンロード数の部分に「Premium」と書いている場合は、IconScoutというサービスから公開されている作品でIconScoutのサイトに飛びます。IconScoutのプランに応じて利用に制限があるLottieもあります。