その他

2024.02.19

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のプロトタイプを理解してアニメーションを作ることができれば、コーダーへの指示をより詳細におこなうことができそうです。

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

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.02.19

    【CSS】角丸線をつくるには?borderの端を丸くする方法

    その他

  • 2022.01.27

    【CSS1行で解決】iPhoneでフォントサイズが大きくなってしまう問題

    その他

  • 2021.11.02

    CSSのcursor:pointerが効かない時にまず確認したい3つのこと

    その他

TAG

×