【超簡単】Figmaを使ってノーコードでWebアニメーション

## はじめに
今回作るのはこちら。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="oNOmZqb" data-user="dtweqbgd-the-vuer" 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/dtweqbgd-the-vuer/pen/oNOmZqb">
  Untitled</a> by 苅田ハユセ (<a href="https://codepen.io/dtweqbgd-the-vuer">@dtweqbgd-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 

ノーコードでwebのアニメーションを作れる[Lottie Files](https://lottiefiles.com/)というサービス。。。。
こちらなんと、**ベクタ形式のアニメーション**なんです！
しかも**背景透過！**　そして**hoverにも対応！!**

ではこちらをfigmaを使って作っていきましょう！

## 作り方
今回は無料で使える[Figma](https://www.figma.com)を使って作っていきます。

### アニメーションの下準備
フレームツールで枠を作っていきます。
**背景を透過したい人はここでフレームの背景色を透明にしてください。**
![スクリーンショット 2024-04-24 18.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/4672755e-b2f2-ca63-2710-bac997214109.png)

好きなSVGをペーストします。
自分で好きな SVGを持ってきても構いません。(ちなみに今回のイラストは[undraw](https://undraw.co/illustrations)というサイトです)
![スクリーンショット 2024-04-24 18.48.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/1a408f1a-2433-43c6-425e-f8d7461586de.png)

 SVGイラストをフレームの中に移動します。
 この時ペーストした SVGだとあらかじめフレームの中に入ってることがあるので、その中から出しておくと作業がしやすいです。
![スクリーンショット 2024-04-26 10.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/9bb46ca4-5a64-d8f1-7c51-2b5a19442d00.png)

続いて同じフレームを複製します。
![スクリーンショット 2024-04-26 10.45.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/b749463f-1330-1911-b549-34a6423b1366.png)

複製したフレームは、元のイラストのアニメーション後の状態に編集します。
![スクリーンショット 2024-04-26 10.48.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/80e0591f-1a1f-a1a0-e27c-57ecc9ec639c.png)

あとは元の状態のものを複製して隣に置きます。
これでアニメーションの下準備は完了です。
![スクリーンショット 2024-04-26 10.48.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/f095fb08-3e5c-090a-3322-e70359579498.png)

### アニメーションの実装

各状態のフレームを用意できたら実際にアニメーションにしていきます。
まず最初の状態のフレームをタップし、右の設定画面のプロトタイプ→フローの開始点のプラスマークを選択します。
![スクリーンショット 2024-04-26 10.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/9cdde7d4-803d-4624-0d36-2bbb67d5f257.png)

するとフレームの横に丸いボタンが表示されるのでそれを右にドラッグします。
出てくるプロパティ画面で、スマートアニメートを選択します。
イーズと秒数（何秒で移り変わるか）は任意で構いません。
このドラッグの作業を最後の真ん中のフレームから最後のフレームにも行います。
![スクリーンショット 2024-04-26 10.48.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/f596709c-7e48-9e2d-48f3-55a0ed875f30.png)

続いてプラグインボタンを押下し、検索欄で「lottie files」で検索します。
緑色のアイコンのやつをタップしてそのままインストールします。
![スクリーンショット 2024-04-26 10.49.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/cdc61049-9bb5-ae44-ec20-fad6efb38cf5.png)

するとプラグインのウィンドウが出てくると思うので、 Export to lottieタブをタップし、出てきたセレクトボックスから、フローの開始点を追加するときに出てきたflowを選択します。
![スクリーンショット 2024-04-26 10.49.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/2f87b3a5-95be-1d76-4b9f-d2f2f0b1177f.png)

そうすると、プレビューでもう動いてる！ おぉ...
ここで一度感動してから、右下のSave to workspaceを押します。
![スクリーンショット 2024-04-26 10.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/a60584b2-7929-8caf-af5e-20415082c26f.png)

もし、lottie filesでログインできていなかったら、ここでログインします（Googleでログインしても可）
そして、lottie filesの自分のworkspaceが出てきたらSaveを押します。
![スクリーンショット 2024-04-26 11.00.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/7cf27566-e28d-6d4e-e2b1-eca2bc991a22.png)

一つ前の画面に戻ると思うので、右上のアイコンからMydashboardを選択します。!
![スクリーンショット 2024-04-26 11.00.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/98d9025c-1218-7458-9924-4db32088e1a6.png)

するとLottie filesのブラウザが出てくると思うので、自分が作ってるサムネイルをタップします。
（※Figmaでログインしたアカウントと同じlottieアカウントでログインしてください）
![スクリーンショット 2024-04-26 11.01.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/25454703-61e1-7302-41fa-d3066a0ec225.png)

遷移先の詳細設定の画面で</>のようなアイコンがあるのでそれをタップします。
そして、出てきた設定画面のEnable asset linkのボタンをオンにします。
するとアニメーションのコードが出てくるので、それをそのままコピーします。
![スクリーンショット 2024-04-26 11.01.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/164b05a5-060d-8f2b-cae8-aadb65c91510.png)

あとはHPのソースコードなんかにはっつけちゃえば完成です。

### カスタマイズ
ソースコードをいじることでhoverしたときにアニメーションを開始したりもできます。
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 

```HTML
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 
<dotlottie-player src="https://lottie.host/dcb91a9f-9954-49f6-a2c2-92d967339e81/NHmbiTIvRr.json" 
    background="transparent" 
    speed="1" 
    style="width: 300px; height: 300px;" 
    loop autoplay>
</dotlottie-player>
```
loopを外すと、一回再生して、そのまま止まります。
```HTML
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 
<dotlottie-player src="https://lottie.host/dcb91a9f-9954-49f6-a2c2-92d967339e81/NHmbiTIvRr.json" 
    background="transparent" 
    speed="1" 
    style="width: 300px; height: 300px;" 
    autoplay>
</dotlottie-player>
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWmVKmL" data-user="dtweqbgd-the-vuer" 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/dtweqbgd-the-vuer/pen/NWmVKmL">
  Untitled</a> by 苅田ハユセ (<a href="https://codepen.io/dtweqbgd-the-vuer">@dtweqbgd-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

autoplayをhoverに変えるとマウスのhoverした時のみ再生されたり、色々カスタマイズできます。
```HTML
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 
<dotlottie-player src="https://lottie.host/dcb91a9f-9954-49f6-a2c2-92d967339e81/NHmbiTIvRr.json" 
    background="transparent" 
    speed="1" 
    style="width: 300px; height: 300px;" 
    hover>
</dotlottie-player>
```
※リーマンにマウスを重ねると動き出します。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjVqPqK" data-user="dtweqbgd-the-vuer" 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/dtweqbgd-the-vuer/pen/JjVqPqK">
  IRAIRA-re-man(hover)</a> by 苅田ハユセ (<a href="https://codepen.io/dtweqbgd-the-vuer">@dtweqbgd-the-vuer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### ファイル出力

webじゃなくてもgif,mp4などで出力させることもできます。
上のメニューバーのダウンロードマークをクリックし、任意の形式を選択します。
![スクリーンショット 2024-04-26 11.02.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/26ae7bc7-b06e-f1d4-8524-5b863c516484.png)

するとフォーマットと大きさを指定してダウンロードすることができます。（大きさとかは課金いるかも。。。）
![スクリーンショット 2024-04-26 11.02.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/0abfa066-edf1-ac68-08a7-41d45e8be930.png)


今回はGifで書き出してみました。
![Flow 5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/b5cabada-d0b2-0caf-586e-bec10096b08b.gif)

### 終わり
以上で作業は完了です。
ちなみに冒頭のアニメーションのFigmaはこんな感じです。
![スクリーンショット 2024-04-26 12.13.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3640746/08aed174-daee-986e-1171-072fbac7ac90.png)

無料の範囲で色々遊べると思うので皆さんもぜひやってみてください！