Suchen Sie nach einer Möglichkeit, Ihr Entwickler- und Designspiel auf die nächste Stufe zu heben? Figma ist ein erstaunliches 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 dem 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:
- 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 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:
- Klicken Sie oben im Plugin-Fenster auf die Schaltfläche „GIF erstellen“.
- Wählen Sie die Ebenen auf Ihrer Figma-Leinwand aus. Sie dienen 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 unterhalb der Vorschau auf die Ebenensymbole und ziehen Sie sie dann nach links oder rechts, um ihre Reihenfolge zu ändern.
- Tippen Sie auf die kleine „Play“-Schaltfläche unter der Diashow, um die Wiedergabegeschwindigkeit anzupassen.
- Wählen Sie neben den Steuerelementen für die Zeitverzögerung 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.
- Passen Sie die Größe des GIF in den Feldern unter den Optionen „Zeitverzögerung“ und „Schleife“ an.
- 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.
- Wählen Sie unten links die GIF-Bildqualität aus. Am besten stellen Sie die Rate auf etwa 80 oder 90 ein, um alle Eigenschaften Ihrer Ebenen beizubehalten.
- Lassen Sie die „Dithering“-Steuerung auf „Kein Dithering“ eingestellt.
- Tippen Sie oben im TinyImage-Fenster auf die Schaltfläche „GIF exportieren“.
- Die Frames werden zu einem GIF zusammengeführt und automatisch heruntergeladen und in Ihren Download-Dateien gespeichert.
Eine Anmerkung zu Ebenen
Über das Dropdown-Menü über den Miniaturansichten der Ebenen können Sie 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 sortieren.
Ein Hinweis zur Reproduktion
Stellen Sie die Standard-Wiedergabegeschwindigkeit ein, indem Sie die Schaltfläche auf der Zeitleiste 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 Bild darunter festlegen.
So exportieren Sie in Figma auf Mobilgeräten 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 einfacher in Aktion zeigen. 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 beheben, indem Sie den App-Bildschirm aufzeichnen und das Video in ein GIF konvertieren.
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 den Figma-Bildschirm auf einem iPhone auf:
- Starten Sie die mobile Figma-App und öffnen Sie das Projekt, das Sie in ein GIF konvertieren möchten.
- Geben Sie „Einstellungen“ ein 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 Fotos-App gespeichert.
Überprüfen Sie, ob auf Ihrem iPhone das Shortcuts-Tool vorinstalliert ist, um Ihr Video in ein GIF zu konvertieren. Sie können das Tool auch hier herunterladen den App-Store.
So konvertieren Sie das Video auf einem iPhone in eine GIF-Datei:
- Öffnen Sie die App, gehen Sie zum unteren Rand der Benutzeroberfläche und wählen Sie die Karte „Galerie“ aus.
- Tippen Sie auf die Registerkarte „Home-Verknüpfungen“ unterhalb des Suchmenüs.
- 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 konvertieren möchten.
- Verwenden Sie die Schieberegler, um auszuwählen, welche Frames in das GIF aufgenommen werden sollen.
- Tippen Sie auf „Speichern“, um Ihre Änderungen zu speichern. Ihre neue GIF-Datei wird in der Fotos-App des Tablets gespeichert.
- Klicken Sie auf „Fertig“, um die Shortcuts-Anwendung zu beenden.
So exportieren Sie in Figma auf einem Android-Gerät in GIF
Da die Figma-App es Benutzern ermöglicht, Prototypen in der Vorschau anzuzeigen, sie jedoch nicht zu exportieren, zeichnet sie die Vorschau auf Ihrem Android-Gerät auf und wandelt das Video später in ein GIF um.
So können Sie Figma auf einem Android-Gerät aufzeichnen:
- Starten Sie die App und öffnen Sie eine Vorschau Ihres Projekts.
- 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.
- Tippen Sie auf die Vorschau des Prototyps, um anzugeben, dass Sie ihn speichern 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 „Screen Recorder“, um die Aufnahme zu stoppen.
Das Figma-Vorschauvideo wird in Ihrer Android-Fotos-App gespeichert. Sie können es mit in ein GIF konvertieren GIPHY-App.
So konvertieren Sie ein Video auf einem Android-Gerät in ein GIF:
- Installieren und ausführen GIPHY-App auf Ihrem Gerät.
- Registrieren Sie sich und erstellen Sie ein GIPHY-Konto.
- Klicken Sie oben rechts auf 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 dann „GIF speichern“.
GIF ohne Einschränkungen exportieren
Egal, ob Sie ein erfahrener Entwickler oder ein Amateur-Designer sind, Sie verdienen eine bequeme Möglichkeit, Ihre Arbeit anderen in GIF-Form zu präsentieren. Sie können eine Vorschau Ihrer Kreationen in der Figma-App anzeigen, aber der Zugriff auf Ihre Designs kann zu einer anspruchsvollen Aufgabe werden, sobald Ihre Internetverbindung ausfällt. Bis Figma eine benutzerfreundliche Exportlösung herausbringt, können Sie sich auf die Methoden verlassen, die wir im Artikel vorstellen.
Wir hoffen, dass Ihnen dieser Leitfaden dabei geholfen hat, besser zu verstehen, wie Sie ein hochwertiges GIF Ihrer Figma-Kreationen erhalten, unabhängig davon, welches Gerät Sie verwenden.
Nutzen Sie die Web- oder Mobilversion von Figma? Was ist Ihre bevorzugte Methode zum Exportieren von GIFs? Lassen Sie es uns im Kommentarbereich unten wissen.
