So exportieren Sie ein GIF aus Figma

Gerätelinks

• Android
• iPhone
• Mac
• Windows
• Gerät fehlt?

Suchen Sie nach einer Möglichkeit, Ihr Entwickler- und Designspiel auf die nächste Stufe zu bringen? Figma ist ein unglaubliches Tool, mit dem Benutzer umfangreiche Prototypen voller Audio-, Video- und Animationseffekte erstellen können. Um jedoch die Haptik und Funktionen des Prototyps richtig zu testen, sollten Sie ihn als GIF exportieren und in Aktion sehen können.

In dieser Anleitung wird erklärt, wie Sie Ihre Figma-Prototypen mit Ihrem PC oder Mobilgerät als GIFs exportieren können.

So exportieren Sie in Figma auf einem PC in GIF

Der einfachste Weg, animierte GIFs aus Figma zu exportieren, ist mit dem TinyImage-Plugin. Bevor Sie das Plugin starten und verwenden können, müssen Sie sich bei Ihrem Figma-Konto anmelden und zum Abschnitt „Community“ gehen.

So laden Sie das Plugin herunter:

1. Geben Sie „TinyImage“ in das Suchfeld ein.
   
2. Suchen Sie im Abschnitt „Plugins“ nach dem Symbol „TinyImage Compressor“.
   
3. Klicken Sie auf die Schaltfläche „Installieren“ neben dem Symbol.
   

Wenn Sie das Plugin installiert haben, öffnen Sie das Designprojekt, das Sie als GIF speichern möchten. Klicken Sie auf eine beliebige Stelle auf dem Bildschirm, um das Dropdown-Menü zu öffnen. Wählen Sie „Plugins“ und tippen Sie auf „TinyImage Compressor“, um es zu starten.

So erstellen Sie ein GIF mit dem Plugin:

1. Klicken Sie oben im Plugin-Fenster auf die Schaltfläche „GIF erstellen“.
   
2. Wählen Sie die Ebenen auf Ihrer Figma-Leinwand aus. Sie fungieren als Rahmen Ihres GIF.
   
3. Tippen Sie unten im TinyImage-Fenster auf die Option „Ausgewählte Ebenen verwenden“. In der Mitte des Fensters wird eine Diashow Ihrer Ebenen in der Reihenfolge angezeigt, in der Sie sie ausgewählt haben.
   
4. Klicken Sie unter der Vorschau auf die Ebenensymbole und ziehen Sie sie dann nach links oder rechts, um ihre Reihenfolge zu ändern.
   
5. Tippen Sie auf die kleine „Play“-Schaltfläche unter der Diashow, um die Wiedergabegeschwindigkeit anzupassen.
   
6. Wählen Sie neben den Zeitverzögerungssteuerungen aus, wie oft das GIF wiederholt werden soll. Die Standardeinstellung ist „Unendlich“. Klicken Sie auf die Option „Unendlich“, um sie zu deaktivieren, und geben Sie die gewünschte Anzahl an Schleifen in das Feld daneben ein.
   
7. Passen Sie die Größe des GIF in den Feldern unter den Optionen für Zeitverzögerung und Schleife an.
   
8. Wenn Ihre Ebenen transparente Ränder haben, klicken Sie unten im Fenster auf die Schaltfläche „Transparenter Hintergrund“, um sie im GIF sichtbar zu machen.
   
9. Wählen Sie unten links die Bildqualität des GIF aus. Am besten stellen Sie die Rate auf etwa 80 oder 90 ein, um alle Funktionen Ihrer Ebenen beizubehalten.
   
10. Lassen Sie die „Dithering“-Steuerung auf „Kein Dithering“ eingestellt.
    
11. Tippen Sie oben im TinyImage-Fenster auf die Schaltfläche „GIF exportieren“.
    
12. Die Frames werden zusammengeführt und bilden ein GIF, das automatisch heruntergeladen und in Ihren Download-Dateien gespeichert wird.

Ein Hinweis zur Schichtung

Über das Dropdown-Menü über den Miniaturansichten der Ebenen können Sie die Ebenen auch von links nach rechts oder von rechts nach links abspielen. Um jedoch mehr Kontrolle über das endgültige Erscheinungsbild des GIF zu haben, ist es am besten, die Frames manuell zu bestellen.

Ein Hinweis zur Wiedergabe

Stellen Sie die Standard-Wiedergabegeschwindigkeit ein, indem Sie die Schaltfläche auf der Zeitmesslinie bewegen. Wenn Sie jedoch möchten, dass bestimmte Bilder unterschiedliche Wiedergabegeschwindigkeiten haben, können Sie dies tun, indem Sie auf ein Miniaturbild klicken und die Geschwindigkeit im Feld darunter festlegen.

So exportieren Sie in Figma auf einem mobilen Gerät in GIF

Figma-Prototypen verfügen häufig über erweiterte Animationen wie Schieberegisterkarten, Wischoptionen und Dropdown-Menüs. Wenn Sie sie als GIF speichern, können Sie das Design ganz einfach in Aktion präsentieren. Mit der mobilen App können Benutzer jedoch nur eine Vorschau ihrer Prototypen anzeigen. Obwohl es keine integrierte Exportunterstützung gibt, können Sie das Problem umgehen, indem Sie den Bildschirm der App aufzeichnen und das Video in ein GIF umwandeln.

So exportieren Sie in Figma auf einem iPhone in GIF

Um Ihr Projekt als GIF auf einem iPhone zu speichern, zeichnen Sie zunächst den Bildschirm der Figma-App auf und erstellen ein GIF mit der Shortcuts-App.

So zeichnen Sie Figma auf einem iPhone auf:

1. Starten Sie die mobile Figma-App und öffnen Sie das Projekt, das Sie in ein GIF umwandeln möchten.
2. Geben Sie „Einstellungen“ ein und wählen Sie „Kontrollzentrum“.
3. Wählen Sie „Steuerelemente anpassen“ und tippen Sie auf die grüne Schaltfläche neben „Bildschirmaufzeichnung“, um die Funktion zu aktivieren.
4. Kehren Sie zum „Kontrollzentrum“ zurück.
5. Drücken Sie die Schaltfläche „Bildschirmaufnahme“.
6. Klicken Sie auf die rote Schaltfläche, um die Aufnahme zu beenden.

Die Aufnahme wird normalerweise in Ihrer Fotos-App gespeichert.

Überprüfen Sie, ob auf Ihrem iPhone das Shortcuts-Tool vorinstalliert ist, um Ihr Video in ein GIF umzuwandeln. Sie können das Tool auch im App Store herunterladen .

So wandeln Sie das Video auf einem iPhone in eine GIF-Datei um:

1. Öffnen Sie die App, gehen Sie zum unteren Rand der Benutzeroberfläche und wählen Sie die Karte „Galerie“ aus.
   
2. Tippen Sie auf die Registerkarte „Starter-Verknüpfungen“ unterhalb des Suchmenüs.
3. Scrollen Sie zum unteren Bildschirmrand und klicken Sie auf den Abschnitt „GIF erstellen“.
   
4. Klicken Sie auf die Schaltfläche „Verknüpfung hinzufügen“, um die GIF-Verknüpfung zu aktivieren.
   
5. Wenn die Verknüpfung installiert wurde, kehren Sie zu „Meine Verknüpfungen“ zurück.
   
6. Tippen Sie auf „GIF erstellen“ und wählen Sie „OK“, um die App und Ihre Fotogalerie zu verbinden.
   
7. Durchsuchen Sie Ihre Videos und wählen Sie das Video aus, das Sie in ein GIF umwandeln möchten.
   
8. Verwenden Sie die Schieberegler, um auszuwählen, welche Frames in das GIF aufgenommen werden sollen.
   
9. Tippen Sie auf „Speichern“, um die Änderungen zu speichern. Ihre neue GIF-Datei wird in der Foto-App des Tablets gespeichert.
   
10. Klicken Sie auf „Fertig“, um die Shortcuts-App zu verlassen.
    

So exportieren Sie in Figma auf einem Android-Gerät in GIF

Da Benutzer mit der Figma-App eine Vorschau der Prototypen anzeigen, diese jedoch nicht exportieren können, zeichnen Sie die Vorschau auf Ihrem Android-Gerät auf und wandeln das Video später in ein GIF um.

So können Sie Figma auf einem Android-Gerät aufzeichnen:

1. Starten Sie die App und öffnen Sie eine Vorschau Ihres Projekts.
2. Wischen Sie zweimal vom oberen Bildschirmrand und wählen Sie „Bildschirmaufzeichnung“. Wenn es nicht da ist, versuchen Sie, nach rechts zu wischen. Manchmal müssen Sie oben auf dem Bildschirm auf das Symbol „Bearbeiten“ tippen, um ein ausgeblendetes Menü anzuzeigen. Möglicherweise ist auch die Funktion „Bildschirmaufzeichnung“ vorhanden.
3. Tippen Sie auf die Vorschau des Prototyps, um anzugeben, dass Sie ihn aufzeichnen möchten.
4. Klicken Sie auf die Schaltfläche „Start“. Sobald der Countdown abgelaufen ist, wird der Bildschirm aufgezeichnet.
5. Wischen Sie nach unten und tippen Sie auf die Karte „Bildschirmrekorder“, um die Aufnahme zu stoppen.

Das Video der Figma-Vorschau wird in Ihrer Android-Foto-App gespeichert. Sie können es mit der GIPHY-App in ein GIF umwandeln .

So konvertieren Sie ein Video auf einem Android-Gerät in ein GIF:

1. Installieren und starten Sie die GIPHY-App auf Ihrem Gerät.
   
2. Registrieren Sie sich und erstellen Sie ein GIPHY-Konto.
   
3. Klicken Sie oben rechts in der Benutzeroberfläche auf die Schaltfläche „Erstellen“.
   
4. Aktivieren Sie die App, um auf Ihre Kamera zuzugreifen.
   
5. Wählen Sie ein Video aus Ihrer Android-Galerie aus.
   
6. Passen Sie die Länge des Videos an. Mit der GIPHY-App können Benutzer Elemente wie Text und Aufkleber in ihre Dateien einfügen.
   
7. Klicken Sie unten in der App auf das „Pfeil“-Symbol.
   
8. Wählen Sie „GIF teilen“ und dann „GIF speichern“.
   

Exportieren Sie GIFs ohne Einschränkungen

Egal, ob Sie ein erfahrener Entwickler oder ein Amateur-Designer sind, Sie verdienen eine bequeme Möglichkeit, Ihre Arbeit anderen im GIF-Format zu zeigen. Sie können eine Vorschau Ihrer Kreationen in der Figma-App anzeigen, aber der Zugriff auf Ihre Designs kann zu einer schwierigen Aufgabe werden, sobald die Internetverbindung ausfällt. Bis Figma eine benutzerfreundliche Exportlösung herausbringt, können Sie sich auf die Methoden verlassen, die wir im Artikel beschrieben haben.

Wir hoffen, dass dieser Leitfaden Ihnen dabei geholfen hat, besser zu verstehen, wie Sie aus Ihren Figma-Kreationen ein hochwertiges GIF erstellen, unabhängig davon, welches Gerät Sie verwenden.

Nutzen Sie die Web- oder Mobilversion von Figma? Was ist Ihre bevorzugte Art, GIFs zu exportieren? Lassen Sie es uns im Kommentarbereich unten wissen.