Figma×Lottieで簡単WEBアニメーション作成！

# はじめに
突然ですが
🤔＜WEBアニメーションを探しているけど理想のものがない…
🤔＜かといって自分で作るのはハードルが高い…
🤔＜でもGIFやMP4ファイルだとデータが重くなるし…
という経験はありませんか？私はまあまああります。
そこで今回は無料のツールを使用してサクッとWEBアニメーションを作成する方法をご紹介します！


# 使用するツール
* [Figma](https://www.figma.com/ja/)
* [Lottie（LottieFiles）](https://lottiefiles.com/jp/)

# Lottieとは？

Lottie（ロッティー）は、Airbnbが開発した **アニメーションライブラリ** です。
JSONベースのアニメーションファイル形式で、After Effects等で作成したアニメーションを
Lottie専用の拡張機能で出力することで、ウェブサイトやアプリ上でアニメーションを表示できます。

### 〈Lottieの特徴〉
* SVGアニメーションのため拡大縮小しても画像が荒れない
* GIFやMP4よりもファイルが軽い
* JavaScriptで再生のタイミングや逆再生などの制御ができる
* マルチプラットフォームに対応しており、iOS、Android、Web、React Nativeで利用できる

とっても便利そうですね！👏

※Figmaについてはご存知の方も多いと思うので割愛します。


# 作り方
[1. アニメーションを作成する](#1-アニメーションを作成する)
[2. プラグインをインストールする](#2-プラグインをインストールする)
[3. アニメーションの書き出し](#3-アニメーションの書き出し)

※各ツールの会員登録等は事前に済ませている想定です。

## 1. アニメーションを作成する
Figmaのプロトタイプの「スマートアニメート」機能を使用してアニメーションを作成していきます！

:::note warn
アニメーションの動きについて
Lottieアニメーションで使える項目には制限があります。
詳しくは以下のページをご確認ください。
[Supported features](https://lottiefiles.notion.site/Supported-features-fd9655b3289443518b352f45e0913e83)
:::

### 「スマートアニメート」とは
>スマートアニメートは、プロトタイプのフレーム間でマッチングレイヤーを検知して、違いを認識し、レイヤーにアニメーションを付けます。
><img width="" alt="スマートアニメートイメージ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/6655711a-c1c6-b816-f788-b5dc74f9b51e.gif">

[フレーム間のスマートアニメートレイヤー](https://help.figma.com/hc/ja/articles/360039818874-%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E9%96%93%E3%81%AE%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%83%88%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC)より引用

### （1）アニメーション素材をベクターデータで用意
FigmaやIllustratorなどのツールで作成したアニメーションのパーツを用意しておきます。
この時つなげるアニメーションのレイヤーやフレームの階層構造も同じになるように設定しましょう！
（グループでまとめているパーツがあるときは、他のレイヤーやフレームでも同様にグループでまとめておきます）
<img width="" alt="アニメーションパーツ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/3cb476de-f848-d278-e298-19624ea69619.png">


:::note warn
注意
画像データで作成すると、Lottieのアニメーションデータに変換する際に
エラーが起きてしまうため必ずベクターデータで用意してください
:::

### （2）スマートアニメートを適用
<img width="" alt="スマートアニメート適用" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/92e5c800-52f7-e406-ef21-ea0f743600db.gif">

①右側パネルの「プロトタイプ」を選択し、適用させたいレイヤーをクリック
レイヤーの端にカーソルを合わせ、右側の丸に触れると＋マークのボタンが出てくるので
＋マークをクリック＆ドラックし矢印を次のレイヤーに繋げる
 <img width="" alt="スマートアニメートを適用①" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/4855282a-0ff4-3413-fd50-7ea0990f5d2d.jpeg">

②右側のパネルの「インタラクション」もしくはレイヤーを繋いだ矢印をクリックし添付の通りに調整
<img width="" alt="スマートアニメートを適用②" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/dd7a0d03-6a53-4ceb-17d5-480d22642e45.jpeg">

:::note info
補足
「イーズアウト」の部分は様々な種類があるので
下記のページを参考に理想のアニメーションになるように調整してみてください！
[Figmaでイージングを理解しよう！プロトタイプの基礎から実装方法の紹介](https://ics.media/entry/231019/)
:::

③これらの工程を各レイヤーに繰り返し設定していく
＊最初と最後のレイヤーを繋ぐことでループアニメーションが作成可能
 
 
## 2. プラグインをインストールする

Figmaコミュニティより「[LittieFiles](https://www.figma.com/community/plugin/809860933081065308/LottieFiles)」のプラグインをDLする
<img width="" alt="Lottie_Figmaプラグイン" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/920f8490-2b6a-e058-9b74-e88d1bfc54e2.jpeg">

### 〈プラグインは以下の方法でも検索可能〉
リソース＞プラグイン＞プラグインを検索＞保存
<img width="" alt="プラグイン検索方法" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/691e0471-ad6d-bc77-d259-3d551163b08e.jpeg">


## 3. アニメーションの書き出し
①リソース＞プラグイン＞保存済みのプラグイン＞Lottiefiles＞Login via Browserをクリック
＊LottieFilesのログインページに遷移
<img width="" alt="アニメーションの書き出し①" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/450d50d9-71ff-427c-936c-12fb4084eebb.jpeg">

②書き出したいフローを選択し、「Export to Lottie」ボタンをクリック
または「Select prototype flow」から書き出したいフローを選択
<img width="
400" alt="アニメーションの書き出し②" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/d2db90d1-f809-ea20-276b-a6659b70199e.png">

③ 「Save to workspace」をクリック
<img width="400" alt="アニメーションの書き出し③" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/85e1b64c-2212-71ef-2a38-614053f922fe.jpeg">

④ アップロード先のフォルダーを選択し、「Save」ボタンをクリック
（非公開ファイルとしてアップロードされます）
<img width="400" alt="アニメーションの書き出し④" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/717360db-23f4-1327-490a-5a8117b1bd41.jpeg">

⑤「Open in browser」をクリックしブラウザで確認
<img width="400" alt="アニメーションの書き出し⑤" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/99555e75-5b52-9a78-cb87-fceb562b5e33.jpeg">!

⑥ Enble Asset LinkのスイッチをONにし、埋め込みコードをコピー

あとはサイト上のアニメーションを表示したい箇所に記述するだけで簡単にWEBアニメーションが実装可能です！
JSONファイルをDLしたい場合はダウンロードボタンをクリックし、形式を選んでダウンロードしてください。
そのほかサイズや再生スピード、配色の変更など簡単なカスタマイズもLottieFiles上で編集が可能です。
<img width="" alt="アニメーションの書き出し⑥" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2917654/d72e7d00-0d4c-173b-7071-118e092a5a28.jpeg">


### 実際に作成したアニメーション
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="jOdeMom" data-user="ippaimori" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ippaimori/pen/jOdeMom">
  Figma_Lottie</a> by ippaimori (<a href="https://codepen.io/ippaimori">@ippaimori</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# さいごに
いかがでしたでしょうか？
Figmaでのデータ作成に慣れれば今までよりも簡単にWEBアニメを作成できそうな気がしてきましたね！？
今回作成してみて、Figma上での動きがLottieの使用できるアニメーション項目の制限により
書き出した際に少し上手くいかない部分もあったので、こまめにLottieFilesプラグインで表示を確認しながら進めると作業がスムーズかもしれません!


また、LottieはFigma以外にもAfter Effectsのアニメーション等も簡単に書き出すことができるので
気になった方はぜひチェックしてみてください！

# 参考
[最新版！ Lottieアニメーションの作り方 Figma編](https://ics.media/entry/230913/)
[FigmaのSmart Animateを活用したプロトタイプ入門](https://ics.media/entry/210526/)