Suchen Sie nach einer Möglichkeit, Ihre Entwickler- und Designfähigkeiten auf die nächste Stufe zu bringen? Figma ist ein unglaubliches Tool, mit dem Benutzer umfangreiche Prototypen mit Audio-, Video- und Animationseffekten erstellen können. Um das Gefühl und die Funktionen des Prototyps jedoch 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 ins GIF
Der einfachste Weg, animierte GIFs aus Figma zu exportieren, ist das 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:
- Geben Sie „TinyImage“ in das Suchfeld ein.
- Suchen Sie im Abschnitt „Plugins“ nach dem Symbol „TinyImage Compressor“.
- 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 irgendwo auf den Bildschirm, um das Dropdown-Menü zu öffnen. Wählen Sie „Plugins“ und tippen Sie auf „TinyImage Compressor“, um es zu starten.
So erstellen Sie mit dem Plugin ein GIF:
- Klicken Sie oben im Plugin-Fenster auf die Schaltfläche „GIF erstellen“.
- Wählen Sie die Ebenen auf Ihrer Figma-Leinwand aus. Sie fungieren als Rahmen für Ihr GIF.
- 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.
- Klicken Sie unter der Vorschau auf die Ebenensymbole und ziehen Sie sie dann nach links oder rechts, um ihre Reihenfolge zu ändern.
- Tippen Sie auf die kleine „Wiedergabe“-Schaltfläche unter der Diashow, um die Wiedergabegeschwindigkeit anzupassen.
- Wählen Sie neben den Zeitverzögerungssteuerelementen 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 von Schleifen in das Feld daneben ein.
- Passen Sie die Größe des GIF in den Feldern unter den Optionen für Zeitverzögerung und Schleife an.
- Wenn Ihre Ebenen transparente Ränder haben, drücken Sie unten im Fenster die Schaltfläche „Transparenter Hintergrund“, um sie im GIF sichtbar zu machen.
- Wählen Sie unten links die Bildqualität des GIFs aus. Am besten stellen Sie die Rate auf etwa 80 oder 90 ein, um alle Merkmale Ihrer Ebenen beizubehalten.
- Belassen Sie die „Dithering“-Steuerung auf „Kein Dithering“.
- Tippen Sie oben im TinyImage-Fenster auf die Schaltfläche „GIF exportieren“.
- Die Frames werden zusammengeführt und bilden ein GIF. Dieses wird automatisch heruntergeladen und in Ihren Downloaddateien gespeichert.
Ein Hinweis zum Layering
Über das Dropdown-Menü über den Ebenenvorschaubildern 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 GIFs zu haben, sollten Sie die Frames am besten manuell anordnen.
Hinweis zur Wiedergabe
Stellen Sie die Standardwiedergabegeschwindigkeit ein, indem Sie den Knopf auf der Zeitmesslinie verschieben. Wenn Sie jedoch möchten, dass bestimmte Frames eine andere Wiedergabegeschwindigkeit haben, können Sie dies tun, indem Sie auf eine Miniaturansicht klicken und die Geschwindigkeit im Feld darunter einstellen.
So exportieren Sie in Figma auf einem Mobilgerät ins GIF-Format
Figma-Prototypen enthalten häufig erweiterte Animationen wie verschiebbare Registerkarten, Wischoptionen und Dropdown-Menüs. Wenn Sie sie als GIF speichern, können Sie das Design ganz einfach in Aktion präsentieren. Die mobile App ermöglicht Benutzern jedoch nur die Vorschau ihrer Prototypen. Obwohl keine integrierte Exportunterstützung vorhanden ist, 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 ins GIF
Um Ihr Projekt als GIF auf einem iPhone zu speichern, zeichnen Sie zuerst den Bildschirm der Figma-App auf und erstellen Sie mit der Shortcuts-App ein GIF.
So zeichnen Sie den Figma-Bildschirm auf einem iPhone auf:
- Starten Sie die mobile Figma-App und öffnen Sie das Projekt, das Sie in ein GIF umwandeln möchten.
- Rufen Sie „Einstellungen“ auf und wählen Sie „Kontrollzentrum“.
- Wählen Sie „Steuerelemente anpassen“ und tippen Sie auf die grüne Schaltfläche neben „Bildschirmaufzeichnung“, um die Funktion zu aktivieren.
- Kehren Sie zum „Kontrollzentrum“ zurück.
- Drücken Sie die Schaltfläche „Bildschirmaufnahme“.
- Klicken Sie auf die rote Schaltfläche, um die Aufnahme zu beenden.
Die Aufnahme wird normalerweise in Ihrer Foto-App gespeichert.
Überprüfen Sie, ob auf Ihrem iPhone das Shortcuts-Tool vorinstalliert ist, mit dem Sie Ihr Video in ein GIF umwandeln können. Sie können das Tool auch hier herunterladen: der App Store.
So ändern Sie das Video auf einem iPhone in eine GIF-Datei:
- Öffnen Sie die App, gehen Sie zum unteren Ende der Benutzeroberfläche und wählen Sie die Karte „Galerie“ aus.
- Tippen Sie unter dem Suchmenü auf die Registerkarte „Starter Shortcuts“.
- Scrollen Sie zum unteren Bildschirmrand und klicken Sie auf den Abschnitt „GIF erstellen“.
- Klicken Sie auf die Schaltfläche „Verknüpfung hinzufügen“, um die GIF-Verknüpfung zu aktivieren.
- Wenn die Verknüpfung installiert wurde, kehren Sie zu „Meine Verknüpfungen“ zurück.
- Tippen Sie auf „GIF erstellen“ und wählen Sie „OK“, um die App und Ihre Fotogalerie zu verbinden.
- Durchsuchen Sie Ihre Videos und wählen Sie das Video aus, das Sie in ein GIF umwandeln möchten.
- Verwenden Sie die Schieberegler, um auszuwählen, welche Frames in das GIF aufgenommen werden sollen.
- Tippen Sie auf „Speichern“, um die Änderungen zu speichern. Ihre neue GIF-Datei wird in der Foto-App des Tablets gespeichert.
- Klicken Sie auf „Fertig“, um die Shortcuts-App zu beenden.
So exportieren Sie in Figma auf einem Android-Gerät ins GIF
Da Benutzer mit der Figma-App Prototypen in der Vorschau anzeigen, aber 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 zeichnen Sie den Bildschirm von Figma auf einem Android auf:
- Starten Sie die App und öffnen Sie eine Vorschau Ihres Projekts.
- Wischen Sie vom oberen Bildschirmrand aus doppelt und wählen Sie „Bildschirmaufnahme“. Wenn die Funktion nicht vorhanden ist, versuchen Sie, nach rechts zu wischen. Manchmal müssen Sie oben auf dem Bildschirm auf das Symbol „Bearbeiten“ tippen, um ein verstecktes Menü anzuzeigen. Die Funktion „Bildschirmaufnahme“ kann dort ebenfalls vorhanden sein.
- Tippen Sie auf die Prototyp-Vorschau, um anzugeben, dass Sie sie aufzeichnen möchten.
- Klicken Sie auf die Schaltfläche „Start“. Sobald der Countdown abgelaufen ist, wird der Bildschirm aufgezeichnet.
- 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 dem in ein GIF umwandeln GIPHY-App.
So konvertieren Sie ein Video auf einem Android-Gerät in ein GIF:
- Installieren und starten Sie die GIPHY-App auf Ihrem Gerät.
- Registrieren Sie sich und erstellen Sie ein GIPHY-Konto.
- Klicken Sie oben rechts in der Benutzeroberfläche auf die Schaltfläche „Erstellen“.
- Aktivieren Sie die App, um auf Ihre Kamera zuzugreifen.
- Wählen Sie ein Video aus Ihrer Android-Galerie aus.
- 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.
- Klicken Sie unten in der App auf das „Pfeil“-Symbol.
- Wählen Sie „GIF teilen“ und wählen Sie „GIF speichern“.
GIFs ohne Einschränkungen exportieren
Egal, ob Sie ein erfahrener Entwickler oder ein Amateurdesigner sind, Sie verdienen eine bequeme Möglichkeit, Ihre Arbeit anderen im GIF-Format zu zeigen. Sie können Ihre Kreationen in der Figma-App in der Vorschau anzeigen, aber der Zugriff auf Ihre Designs kann zu einer schwierigen Aufgabe werden, wenn die Internetverbindung unterbrochen wird. Bis Figma eine benutzerfreundliche Exportlösung herausbringt, können Sie sich auf die Methoden verlassen, die wir in diesem Artikel beschrieben haben.
Wir hoffen, dass Ihnen diese Anleitung dabei geholfen hat, besser zu verstehen, wie Sie aus Ihren Figma-Kreationen ein qualitativ hochwertiges GIF erstellen, unabhängig davon, welches Gerät Sie verwenden.
Verwenden Sie die Web- oder Mobilversion von Figma? Wie exportieren Sie GIFs am liebsten? Lassen Sie es uns im Kommentarbereich unten wissen.
