![見出し画像](https://assets.st-note.com/production/uploads/images/96929549/rectangle_large_type_2_093b19988a67ba40f5e60a178724630f.png?width=1200)
Figma plugins.3[LottieFiles]のご紹介
こんにちは、株式会社フォーク WEBデザイナー在住の4009_danです。
Figma pluginのご紹介です!
![](https://assets.st-note.com/img/1675171345292-VVzaaPnHUX.png?width=1200)
Lottieとは?
Lottieアニメーションをご存じでしょうか?
Lottie(ロッティー)は民泊サービスなどを展開している会社・Airbnbが作ったアニメーションライブラリです。
高い解像度を保ったまま、サイズの拡大・縮小ができ、GIFやMP4よりもファイルが軽いため使いやすさが特徴です。
使い方はLottieアニメーションを検索し、「Insert as SVG」か「Convert to GIF」をクリックするとFigmaに挿入できます。挿入後、Figmaでは動作しませんが、「Convert to GIF」でGifアニメーション形式で書き出すとプロトタイプで動作を確認可能です。
サイト制作で動きを付けたいときは便利ですね♪
できること、できないこと
ぽよよんっと跳ねるような動きなど表現できる反面、できないこともあるようです。アップデートがあると嬉しいですね♪
◎できること
パスのトリミングや不透明度、スケール、回転など、基本的なアニメーション、背景透過 など
×できないこと
グラデーション、マスク、3D表現、BGMをつけること など
シンプルでキレイめなオブジェクトのアニメーションを使用したい時はオススメです!
最後までお付き合いいただきありがとうございました^^