Libre
Editor öffnen

Figma-Grafiken animieren

Zeichne in Figma und bringe deine Grafik in Libre in Bewegung. Kopiere die Vektoren, füge Keyframes hinzu und lade eine Lottie-Datei herunter. Für diesen Ablauf brauchst du kein Plugin.

Figma-Grafik animieren

Bearbeitung und Export sind kostenlos. Kein Konto nötig.

Editor und Dokumentation sind auf Englisch.

Kopieren, animieren, exportieren

  1. Grafik kopieren

    Wähle in Figma die Formen aus, die du animieren möchtest, und kopiere sie. Beginne am besten mit einer kleinen Auswahl.

  2. In Libre einfügen

    Öffne Studio, wähle New animation und füge die Grafik mit Command+V oder Strg+V ein. Funktioniert das nicht richtig, nutze Copy as SVG in Figma und füge diese Version ein.

  3. Bewegung erstellen

    Wähle eine Ebene und klicke auf die Raute neben einer Eigenschaft, etwa Position. Verschiebe den Abspielkopf und ändere den Wert für den nächsten Keyframe. Die Leertaste startet die Vorschau.

  4. Animation exportieren

    Wähle Export und prüfe die Lottie-Vorschau. Lade Lottie JSON oder dotLottie herunter und teste die Datei im vorgesehenen Player.

Was aus Figma übernommen wird

  • Unterstützte Vektorgrafiken werden importiert. Smart-Animate-Übergänge und Prototyp-Interaktionen werden nicht übertragen; die Bewegung erstellst du in Libre.
  • Bei Abweichungen hilft oft eine kleinere Auswahl. Du kannst die Elemente vor dem Kopieren auch in Vektorpfade umwandeln.

Erst einmal ausprobieren? Das bearbeitbare Beispiel Success öffnen.