LottieFiles

+

Figma

Figma zu Lottie:
Bewegung in Figma bringen

Konvertieren Sie Ihre Entwürfe oder Prototypen mühelos mit der Funktion 'Figma to Lottie' in produktionsbereite Lottie-Animationen. Verwenden Sie LottieFiles für Figma Dev Mode, um Einbettungscodes und Asset-Links direkt innerhalb des Tools zu erhalten und Dateien ohne Umstände zu übergeben.

Exportieren Sie Ihre Figma-Designs als Lottie-Animationen und verwenden Sie sie auf Ihren Websites oder Apps. Erhalten Sie sofortigen Zugriff auf die weltweit größte Lottie-Animationsbibliothek innerhalb von Figma.

Produktionsbereite Animationen auf Figma

Erstellen Sie produktionsfertige Lottie-Animationen

Die Figma-to-Lottie-Funktion ermöglicht es Ihnen, mit Leichtigkeit fesselnde Animationen innerhalb von Figma zu erstellen und sie als Lottie zu exportieren. Wählen Sie zwischen der Verwendung von animierten Voreinstellungen oder dem Verbinden mehrerer Frames, um Ihre Animationen zu erstellen.

AI Prompt to Vector
AI Prompt to Vector

AI Aufforderung zum Vektor

Verwandeln Sie Textvorgaben in benutzerdefinierte SVG-Illustrationen und umgehen Sie die Suche nach perfekten Ressourcen. Nutzen Sie die KI-gestützte Gruppierung und Benennung von Ebenen, um Ihr Design sauber und organisiert zu halten.

🎉 Neu

Raster zu Vektor
Raster zu Vektor

Raster zu Vektor

Konvertieren Sie Rasterbilder wie PNGs und JPGs in vollständig bearbeitbare Vektoren und sagen Sie Tschüss zum manuellen Nachzeichnen. Verwenden Sie sie sofort in Ihren Designs oder nachdem Sie sie mit Figma zu Lottie animiert haben.

🎉 Neu

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

Laden Sie Animationen direkt auf Ihr Gerät herunter

Laden Sie Animationen als optimierte dotLottie/Lottie JSON, dotLottie oder Lottie JSON direkt auf Ihr Gerät herunter. Sie können sie auch als GIF, MP4, WebM oder MOV in mehreren Größen exportieren.

🎉 Neu

Premium animations
Premium animations

Premium Animationen

Greifen Sie auf über 400.000 exklusive und vollständig anpassbare Premium-Animationen innerhalb von Figma zu, um atemberaubende Produkte zu erstellen, die Ihre Benutzer lieben werden.

Search Lottie animations
Search Lottie animations

Animationen für jede erdenkliche Branche und jeden denkbaren Anwendungsfall

Suchen Sie über 100.000 kostenlose, sofort einsatzbereite Lottie-Animationen in unserem Figma-Plugin. Alle Animationen können für den persönlichen und kommerziellen Gebrauch verwendet werden.

Entwerfen Sie Prototypen genauso wie endgültige Produkte

Fügen Sie Lottie-Animationen zu Ihren Figma-Prototypen hinzu und präsentieren Sie die realistischste und ansprechendste Version Ihrer Designs Ihren Interessengruppen. Kommunizieren Sie effektiv mit Bewegung und beseitigen Sie das Rätselraten.

Lottie Stickers for FigJam
Lottie Stickers for FigJam

Lottie-Sticker für FigJam

Machen Sie Ihre FigJam Brainstorming-, Ideenfindungs- und Zusammenarbeitssitzungen mit direktem Zugriff auf 100.000+ kostenlose und 400.000+ Premium-Lottie-Aufkleber noch lustiger und aufregender.

Private animations
Private animations

Greifen Sie auf Ihre privaten Dateien und die Animationsbibliothek Ihres Teams zu

Sie können jetzt Ihre privaten Dateien einfügen und die gemeinsame Bibliothek Ihres Teams in Ihre Figma-Designs integrieren, um einen effizienteren und kollaborativeren Arbeitsablauf zu ermöglichen.

Export animation
Export animation

Animationen für Ihre Marke anpassen

Wenden Sie beliebte Farbpaletten an oder passen Sie Ihre Farben an, um Ihrem Markenstil und Ihrer Ästhetik zu entsprechen.

LottieFiles für Figma Entwicklermodus

NEU

Schiffanimationen schnell und bequem

Greifen Sie problemlos auf die Asset-Links Ihrer Animationen zu und erhalten Sie die automatisch generierten Einbettungscodes direkt in Figma, um sie im Handumdrehen zu versenden.

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

VS Code Unterstützung

Entwickler können jetzt Animations-Links und Codes direkt in VS Code zugreifen. Kein ständiges Hin- und Herschalten mehr zwischen Figma und VS Code!

Player Controls
Player Controls

Player Steuerung

Passen Sie Animations-Einstellungen wie Wiedergabemodus, Richtung, Geschwindigkeit und mehr an und generieren Sie den Einbettungscode mit nur wenigen Klicks.

Automatic enabling of asset links
Automatic enabling of asset links

Automatisches Aktivieren von Asset-Links

Vergessen Sie das lästige Umschalten zwischen Ihrem Arbeitsbereich und den Figma-Designs. Die Asset-Links von Arbeitsbereichsanimationen werden automatisch aktiviert, wenn sie über LottieFiles für Figma eingefügt werden.

Full preview of animations
Full preview of animations

Vollständige Vorschau der Animationen

Sie können Ihre ausgewählten Animationen in voller Bewegung vorab anzeigen, um eine ziemlich genaue Vorstellung davon zu bekommen, wie sie aussehen und sich verhalten werden, sobald sie veröffentlicht sind.

Ship animations as Optimized dotLottie or Lottie JSON
Ship animations as Optimized dotLottie or Lottie JSON

Schiffsanimationen als optimiertes dotLottie oder Lottie JSON

Sie können wählen, Ihre Animationen im optimierten dotLottie- oder Lottie JSON-Format zu versenden, um sicherzustellen, dass Ihre Dateien super winzig sind und blitzschnell geladen werden.

Starten Sie in 3 einfachen Schritten

Step 1

Installieren und ausführen des Plugins

Step 2

Suchen oder erstellen Sie Ihre eigene

Suchen Sie nach Animationen über die Registerkarte „Entdecken“ der Arbeitsbereiche. Oder erstellen Sie Ihre eigene Animation mit der Registerkarte „Figma zu Lottie“.


Für das Plugin Dev Mode wählen Sie eine Animation aus einem Ihrer Arbeitsbereiche aus, um zu beginnen.

Step 3

Fügen Sie Ihre Animation ein oder inspizieren Sie diese

Öffnen, personalisieren und fügen Sie Ihre Animation als GIF auf der Figma-Leinwand ein.


Für das Dev Mode-Plugin wählen Sie Ihr gewünschtes Dateiformat und kopieren Sie den Asset-Link der Animation oder den automatisch generierten Einbettungscode, um ihn zu versenden.

Erfahren Sie alles über die Erstellung von Animationen in Figma und lassen Sie sich zertifizieren!

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

Was ist ein Lottie?

Ein Lottie ist ein auf JSON basierendes Animationsdateiformat, das eine textuelle, beschreibende Darstellung der Animationslemente und Bewegungen verwendet, um eine kleinere Dateigröße, Plattformunabhängigkeit, Auflösungsunabhängigkeit und eine variable Bildrate während der Animationswiedergabe zu erreichen. Open-Source- und kostenlose Lottie-Player existieren im Web, auf iOS, Android, Windows und anderen Plattformen.

Was ist ein Lottie?

Ein Lottie ist ein auf JSON basierendes Animationsdateiformat, das eine textuelle, beschreibende Darstellung der Animationslemente und Bewegungen verwendet, um eine kleinere Dateigröße, Plattformunabhängigkeit, Auflösungsunabhängigkeit und eine variable Bildrate während der Animationswiedergabe zu erreichen. Open-Source- und kostenlose Lottie-Player existieren im Web, auf iOS, Android, Windows und anderen Plattformen.

Wo kann ich das LottieFiles für Figma-Plugin herunterladen?

Wo kann ich das LottieFiles für Figma-Plugin herunterladen?

Welche Formate unterstützt das Plugin beim Importieren?

Welche Formate unterstützt das Plugin beim Importieren?

Welche Formate unterstützt das Plugin beim Exportieren?

Welche Formate unterstützt das Plugin beim Exportieren?

Muss ich mich anmelden, um das Plugin zu verwenden?

Muss ich mich anmelden, um das Plugin zu verwenden?

Benötige ich eine Internetverbindung, um das Plugin zu verwenden?

Benötige ich eine Internetverbindung, um das Plugin zu verwenden?

Unterstützt das LottieFiles for Figma-Plugin das dotLottie-Format?

Unterstützt das LottieFiles for Figma-Plugin das dotLottie-Format?

Unterstützt das LottieFiles für Figma-Plugin das GIF-Format?

Unterstützt das LottieFiles für Figma-Plugin das GIF-Format?

Unterstützt LottieFiles für Figma das SVG-Format?

Unterstützt LottieFiles für Figma das SVG-Format?

Kann ich auf meine privaten Animationen aus dem Plugin zugreifen?

Kann ich auf meine privaten Animationen aus dem Plugin zugreifen?

Was ist LottieFiles für den Figma Dev Mode?

Was ist LottieFiles für den Figma Dev Mode?

Wie kann ich auf LottieFiles für den Figma Entwicklermodus zugreifen?

Wie kann ich auf LottieFiles für den Figma Entwicklermodus zugreifen?

Wie benutze ich LottieFiles für den Figma Dev-Modus?

Wie benutze ich LottieFiles für den Figma Dev-Modus?

Kann ich Animationen vor dem Hinzufügen aus meinen Figma-Designs in eine Code-Umgebung betrachten?

Kann ich Animationen vor dem Hinzufügen aus meinen Figma-Designs in eine Code-Umgebung betrachten?

Welche Animationsformate kann ich verwenden, wenn ich Animationen über LottieFiles für den Figma Dev-Modus versende?

Welche Animationsformate kann ich verwenden, wenn ich Animationen über LottieFiles für den Figma Dev-Modus versende?

Warum funktionieren die öffentlichen Animationen, die ich eingefügt habe, nicht im LottieFiles für den Figma Dev-Modus?

Warum funktionieren die öffentlichen Animationen, die ich eingefügt habe, nicht im LottieFiles für den Figma Dev-Modus?

Werde ich für die Nutzung des LottieFiles für den Figma Dev-Modus in Rechnung gestellt?

Werde ich für die Nutzung des LottieFiles für den Figma Dev-Modus in Rechnung gestellt?

Kann ich mit anderen zusammenarbeiten, indem ich LottieFiles für den Figma Dev-Modus verwende?

Kann ich mit anderen zusammenarbeiten, indem ich LottieFiles für den Figma Dev-Modus verwende?

Gibt es Unterstützung, wenn ich auf Probleme stoße oder Fragen zu LottieFiles für den Figma Dev-Modus habe?

Gibt es Unterstützung, wenn ich auf Probleme stoße oder Fragen zu LottieFiles für den Figma Dev-Modus habe?

Wie kann ich auf dem neuesten Stand bleiben bezüglich neuer Funktionen oder Änderungen an LottieFiles für den Figma Dev-Modus?

Wie kann ich auf dem neuesten Stand bleiben bezüglich neuer Funktionen oder Änderungen an LottieFiles für den Figma Dev-Modus?

Installieren Sie LottieFiles für Figma

Starten Sie mit dem Plugin und allen seinen Funktionen kostenlos

7,9 Tausend Gefällt mir

600 Tausend Installationen