
Figma plugins.3[LottieFiles]のご紹介
こんにちは、株式会社フォーク WEBデザイナー在住の4009_danです。
Figma pluginのご紹介です!

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