LottieFiles

Figma

フィグマからロッティーへ:
フィグマに動きをもたらす

Figma to Lottie機能を使用して、デザインやプロトタイプを簡単に製品向けのLottieアニメーションに変換できます。 Figma DevモードでLottieFiles for Figmaを使用して、埋め込みコードとアセットリンクを手間をかけずに取得し、手間をかけずにファイルを引き渡すことができます。

FigmaのデザインをLottieアニメーションとしてエクスポートし、ウェブサイトやアプリで利用してください。Figma内で世界最大のLottieアニメーションライブラリにすぐアクセスできます。

Figma上での本番用アニメーション

製品に適したLottieアニメーションを作成する

Figma to Lottieの機能を使用すると、簡単にFigma内で魅力的なアニメーションを作成し、それをLottie形式でエクスポートすることができます。アニメーションプリセットを使用するか、複数のフレームを接続してアニメーションを作成するかを選択してください。

AI Prompt to Vector
AI Prompt to Vector

AIプロンプトをベクトルに変換

テキストプロンプトをカスタムSVGイラストに変換して、完璧なアセットを探す手間を省きます。AIパワーのレイヤーグループ化と命名を活用して、デザインをきれいに整理します。

🎉 新しい

Raster to Vector
Raster to Vector

ラスターからベクターへ

PNGやJPGなどのラスター画像を完全に編集可能なベクターに変換して、手作業でトレースする手間を省きましょう。FigmaでLottieにアニメーションを付けたりして、デザインにすぐに活用したりしましょう。

🎉 新しい

Download animations directly to your device
Download animations directly to your device

デバイスにアニメーションを直接ダウンロードする

デバイスに直接オプティマイズされたdotLottie/Lottie JSON、dotLottieまたはLottie JSONとしてアニメーションをダウンロードすることができます。また、複数のサイズでGIF、MP4、WebMまたはMOVとしてエクスポートすることもできます。

🎉 新しい

Premium animations
Premium animations

プレミアムアニメーション

Figma内で400,000以上のエクスクルーシブで完全にカスタマイズ可能なプレミアムアニメーションにアクセスして、ユーザーが愛する見事な製品を作成します。

Search Lottie animations
Search Lottie animations

ありとあらゆる業界や使用事例に対応したアニメーション

当社のFigmaプラグインから、100,000以上の無料で利用可能なLottieアニメーションを検索してください。 すべてのアニメーションは個人および商用に使用できます。

最終製品と同じようにデザインプロトタイプを作成します

FigmaプロトタイプにLottieアニメーションを追加し、デザインの最もリアルで魅力的なバージョンをステークホルダーに効果的に伝えます。モーションで効果的にコミュニケーションし、推測作業を排除します。

Lottie Stickers for FigJam
Lottie Stickers for FigJam

FigJam用のLottieステッカー

100,000以上の無料、400,000以上のプレミアムロティステッカーに直接アクセスし、FigJamのブレストーミング、アイデア出し、共同作業セッションをもっと楽しく、ワクワクするものにしましょう。

Private animations
Private animations

個人ファイルとチームのアニメーションライブラリにアクセスしてください

プライベートファイルを挿入して、チームの共有ライブラリを Figma デザインに組み込んで、より効率的で協力的なワークフローを実現できます。

Export animation
Export animation

ブランドに合わせたアニメーションをカスタマイズ

人気のあるカラーパレットを適用するか、ブランドスタイルと美学に合わせて色を選んでください。

Figma Devモード用のLottieFiles

新しい

船のアニメーションを迅速かつ便利に

Figma内でアニメーションのアセットリンクと自動生成された埋め込みコードに簡単にアクセスし、それらを瞬時に送信します。

Ship animations quickly and conveniently
Ship animations quickly and conveniently
VS Code Support
VS Code Support

VSコードのサポート

開発者は今、VS Code 内でアニメーションのリンクとコードに直接アクセスできます。もうFigmaとVS Codeを行き来する必要はありません!

Player Controls
Player Controls

プレイヤーコントロール

再生モード、方向、速度などのようなアニメーション設定をカスタマイズし、わずか数回のクリックで埋め込みコードを生成します。

Automatic enabling of asset links
Automatic enabling of asset links

アセットリンクの自動有効化

ワークスペースとFigmaデザインの切り替えの手間を忘れましょう。ワークスペースのアニメーションアセットリンクは、LottieFiles for Figmaを介して挿入されると自動的に有効になります。

Full preview of animations
Full preview of animations

アニメーションの完全なプレビュー

選択したアニメーションをフルモーションでプレビューできるので、出荷された後の見た目や挙動をかなり良くイメージできます。

Optimized dotLottieまたはLottie JSONとしてシップアニメーション
Optimized dotLottieまたはLottie JSONとしてシップアニメーション

最適化されたdotLottieまたはLottie JSONとしてシップアニメーション

Optimized dotLottieやLottie JSONフォーマットでアニメーションを配信することができます。ファイルサイズを最小限に抑え、すばやくロードできるようになります。

3つの簡単なステップで始めましょう

Step 1

プラグインをインストールして実行します

Step 2

検索または独自のものを作成

アニメーションを検索するには、「Discover」の「Workspaces」タブを使用するか、「Figma to Lottie」タブを使用して独自のアニメーションを作成してください。


Dev Modeプラグインの場合、ワークスペースから挿入されたアニメーションを選択して開始してください。

Step 3

アニメーションを挿入または確認します

フィグマキャンバスにGIFとしてアニメーションを挿入してパーソナライズしましょう。


Dev Modeプラグインでは、希望のファイル形式を選択し、アニメーションのアセットリンクまたは自動生成された埋め込みコードをコピーして配信します。

Figmaでアニメーションの作成方法をすべて学び、そして認定も取得しましょう!

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim
Lead Motion Designer at Airbnb

Salih Abdul-Karim, Lead Motion Designer at Airbnb
Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson
Product Marketing at Webflow

Barrett Johnson, Product Marketing at Webflow
Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash
Product Design Manager at Swiggy

Saptarshi Prakash, Product Design Manager at Swiggy

Design teams love LottieFiles

Airbnb

"Instead of spending dozens of hours learning Xcode or Android studio, I use LottieFiles to test and share. Now I use those hours to make my animations as dope as I can."

Salih Abdul-Karim
Lead Motion Designer at Airbnb

Salih Abdul-Karim, Lead Motion Designer at Airbnb
Webflow

"Our customers can add Lottie animations to their site in seconds, without even thinking about code. The creative control this unlocks is huge."

Barrett Johnson
Product Marketing at Webflow

Barrett Johnson, Product Marketing at Webflow
Swiggy

"LottieFiles is a one-stop destination for all your Lottie needs ever."

Saptarshi Prakash
Product Design Manager at Swiggy

Saptarshi Prakash, Product Design Manager at Swiggy

FAQs

ロッティとは何ですか?

ロッティ(Lottie)は、テキストベースの記述形式を使用してアニメーション要素と移動の記述を行い、ファイルサイズを小さくし、プラットフォームの独立性、解像度の独立性、アニメーション再生中の可変フレームレートを実現するJSONベースのアニメーションファイル形式です。Web、iOS、Android、Windows、その他のプラットフォームには、オープンソースで無料のLottieプレーヤーが存在します。

ロッティとは何ですか?

ロッティ(Lottie)は、テキストベースの記述形式を使用してアニメーション要素と移動の記述を行い、ファイルサイズを小さくし、プラットフォームの独立性、解像度の独立性、アニメーション再生中の可変フレームレートを実現するJSONベースのアニメーションファイル形式です。Web、iOS、Android、Windows、その他のプラットフォームには、オープンソースで無料のLottieプレーヤーが存在します。

LottieFiles for Figmaプラグインをどこからダウンロードできますか?

LottieFiles for Figmaプラグインをどこからダウンロードできますか?

プラグインはどのような形式のインポートをサポートしていますか?

プラグインはどのような形式のインポートをサポートしていますか?

プラグインはどのような形式でエクスポートをサポートしていますか?

プラグインはどのような形式でエクスポートをサポートしていますか?

プラグインを使用するためにログインする必要がありますか?

プラグインを使用するためにログインする必要がありますか?

プラグインを使用するにはインターネット接続が必要ですか?

プラグインを使用するにはインターネット接続が必要ですか?

FigmaプラグインのLottieFilesはdotLottie形式をサポートしていますか?

FigmaプラグインのLottieFilesはdotLottie形式をサポートしていますか?

FigmaプラグインのLottieFilesはGIF形式をサポートしていますか?

FigmaプラグインのLottieFilesはGIF形式をサポートしていますか?

FigmaでのLottieFilesはSVG形式をサポートしていますか?

FigmaでのLottieFilesはSVG形式をサポートしていますか?

プラグインからプライベートアニメーションにアクセスできますか?

プラグインからプライベートアニメーションにアクセスできますか?

LottieFiles for Figma Dev Modeとは何ですか?

LottieFiles for Figma Dev Modeとは何ですか?

ファイグマDevモードでLottieFilesにアクセスする方法は?

ファイグマDevモードでLottieFilesにアクセスする方法は?

Figma Dev ModeでLottieFilesをどのように使用しますか?

Figma Dev ModeでLottieFilesをどのように使用しますか?

私は私のFigmaデザインからコード環境に追加する前にアニメーションをプレビューできますか?

私は私のFigmaデザインからコード環境に追加する前にアニメーションをプレビューできますか?

ファイル内のアニメーションをLottieFiles for Figma Dev Modeを使用して配信するとき、どのアニメーション形式を使用できますか?

ファイル内のアニメーションをLottieFiles for Figma Dev Modeを使用して配信するとき、どのアニメーション形式を使用できますか?

なぜ私が挿入した公開アニメーションがFigma Dev ModeのLottieFilesで動作しないのか?

なぜ私が挿入した公開アニメーションがFigma Dev ModeのLottieFilesで動作しないのか?

LottieFiles for Figma Dev Modeを使用する際に料金が発生しますか?

LottieFiles for Figma Dev Modeを使用する際に料金が発生しますか?

LottieFiles for Figma Dev Modeを使用して他の人と協力することはできますか?

LottieFiles for Figma Dev Modeを使用して他の人と協力することはできますか?

LottieFiles for Figma Dev Modeに関する問題や質問がある場合、サポートは利用可能ですか?

LottieFiles for Figma Dev Modeに関する問題や質問がある場合、サポートは利用可能ですか?

LottieFiles for Figma Dev Modeの新機能や変更点をどのようにして最新情報を入手できますか?

LottieFiles for Figma Dev Modeの新機能や変更点をどのようにして最新情報を入手できますか?

Figma 用の LottieFiles をインストールする

プラグインを無料で利用して、そのすべての機能を活用し始めましょう