LottieFilesを使ってみよう！ローディングアニメーション編

2024/06/28(金)に開催された「LottieFiles Meeting Osaka 01」のアーカイブ動画です。
https://tsukiakari.connpass.com/event...

Figmaのスマートアニメート機能で作成したアニメーションを、
プラグイン「LottieFiles for Figma」で書き出し、実装するワークフローについて解説します。

▼目次
0:00:00 - オープニング
0:00:15 - Lottieとは？LottieFilesとは？
0:03:01 - デザイン編
0:06:40 - スマートアニメート
0:09:19 - 「RotatingCircle」
0:15:10 - 「PulsingCircle」
0:20:41 - 「ShoppingBag」
0:31:08 - FigmaからLottieFilesに書き出し
0:35:25 - 実装編
0:36:57 - Lottieの実装方法
0:54:10 - ローディング画面の実装方法
1:03:53 - まとめ

出演：
松下 絵梨（https://x.com/matsu_eri）
長谷川 喜洋（https://x.com/hiro_ghap1）

作例01:「RotatingCircle」
https://lottiefiles.com/animations/ro...

作例02:「PulsingCircle」
https://lottiefiles.com/animations/pu...

作例03:「ShoppingBag」
https://lottiefiles.com/animations/sh...

HTMLでLottieのアニメーションをウェブサイトに追加する方法
https://lottiefiles.com/blog/working-...