DeuAq.com >> Leben >  >> Elektronik

So exportieren Sie ein GIF aus Figma

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 mit Audio-, Video- und Animationseffekten erstellen können. Um jedoch das Gefühl und die Funktionen des Prototyps richtig zu testen, sollten Sie ihn als GIF exportieren und in Aktion sehen können.

So exportieren Sie ein GIF aus Figma

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

So exportieren Sie GIF in Figma auf einem PC

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.
So exportieren Sie ein GIF aus Figma Suchen Sie im Abschnitt „Plugins“ nach dem Symbol „TinyImage Compressor“.
So exportieren Sie ein GIF aus Figma Klicken Sie neben dem Symbol auf die Schaltfläche "Installieren".
So exportieren Sie ein GIF aus Figma

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“.
So exportieren Sie ein GIF aus Figma Wählen Sie die Ebenen auf Ihrer Figma-Leinwand aus. Sie fungieren als Rahmen Ihres GIFs.
So exportieren Sie ein GIF aus Figma Tippen Sie unten im TinyImage-Fenster auf die Option „Ausgewählte Ebenen verwenden“. Sie sehen eine Diashow Ihrer Ebenen in der Mitte des Fensters in der Reihenfolge, in der Sie sie ausgewählt haben.
So exportieren Sie ein GIF aus Figma Klicken Sie unter der Vorschau auf die Ebenensymbole und ziehen Sie sie dann nach links oder rechts, um ihre Reihenfolge zu ändern.
So exportieren Sie ein GIF aus Figma Tippen Sie auf die kleine „Play“-Schaltfläche unter der Diashow, um die Wiedergabegeschwindigkeit anzupassen.
So exportieren Sie ein GIF aus Figma Wählen Sie neben den Steuerelementen für die Zeitverzögerung aus, wie oft das GIF wiederholt wird. 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.
So exportieren Sie ein GIF aus Figma Passen Sie die Größe des GIF in den Feldern unterhalb der Zeitverzögerungs- und Schleifenoptionen an.
So exportieren Sie ein GIF aus Figma 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.
So exportieren Sie ein GIF aus Figma Wählen Sie die Bildqualität des GIFs in der unteren linken Ecke aus. Es ist am besten, die Rate auf etwa 80 oder 90 einzustellen, um alle Funktionen Ihrer Ebenen beizubehalten.
So exportieren Sie ein GIF aus Figma Lassen Sie die „Dithering“-Steuerelemente auf „No Dithering“ eingestellt.
So exportieren Sie ein GIF aus Figma Tippen Sie oben im TinyImage-Fenster auf die Schaltfläche „GIF exportieren“.
So exportieren Sie ein GIF aus Figma The frames will merge and form a GIF and it will automatically downloaded and save in your download files.

A Note About Layering

The drop-down menu above the layer thumbnails also allows you to play the layers from left to right or from right to left. However, for more control over the final appearance of the GIF, it’s best to order the frames manually.

A Note About Playback

Set the default playback speed by moving the button on the time-measuring line. However, if you want specific frames to have different playback speeds, you can do so by clicking on a thumbnail and setting the speed in the box beneath it.

How to Export to GIF in Figma on a Mobile Device

Figma prototypes often come with advanced animations like sliding tabs, swiping options, and drop-down menus. Saving them as a GIF will make it easy for you to showcase the design in action. However, the mobile app only allows users to preview their prototypes. Although there’s no built-in export support, you can get around the issue by screen recording the app and turning the video into a GIF.

How to Export to GIF in Figma on an iPhone

In order to save your project as a GIF on an iPhone, you’ll first screen record the Figma app and make a GIF with the Shortcuts app.

To screen record Figma on an iPhone:

Launch the Figma mobile app and open the project you want to turn into a GIF. Enter “Settings” and select “Control Center.” Choose “Customize Controls” and tap the green button next to “Screen Recording” to enable the feature. Return to the “Control Center.” Press the “Screen Recording” button. Click the red button to finish the recording.

The recording is typically stored in your Photos app.

Check whether your iPhone has the Shortcuts tool pre-installed to turn your video into a GIF. You can also download the tool from the App Store.

Here’s how to change the video into a GIF file on an iPhone:

Open the app, go to the bottom of the interface, and select the “Gallery” card.
So exportieren Sie ein GIF aus Figma Tap the “Starter Shortcuts” tab underneath the search menu. Scroll to the bottom of the screen and click the “Make GIF” section.
So exportieren Sie ein GIF aus Figma Hit the “Add Shortcut” button to enable the GIF shortcut.
So exportieren Sie ein GIF aus Figma When the shortcut has been installed, return to “My Shortcuts.”
So exportieren Sie ein GIF aus Figma Tap “Make GIF” and choose “OK” to connect the app and your photo gallery.
So exportieren Sie ein GIF aus Figma Browse through your videos and select the video you’ll turn into a GIF.
So exportieren Sie ein GIF aus Figma Use the sliders to select which frames will be included in the GIF.
So exportieren Sie ein GIF aus Figma Tap “Save” to record the changes. Your new GIF file will be saved in the tablet’s photo app.
So exportieren Sie ein GIF aus Figma Click “Done” to exit the Shortcuts app.
So exportieren Sie ein GIF aus Figma

How to Export to GIF in Figma on an Android Device

As the Figma app lets users preview prototypes but not export them, you’ll record the preview on your Android device, transforming the video into a GIF later.

Here’s how to screen record Figma on an Android:

Launch the app and open a preview of your project. Double swipe from the top of the screen and select “Screen record.” If it’s not there, try swiping right. Sometimes you’ll have to tap the “Edit” icon at the top of the screen to reveal a hidden menu. The “Screen record” feature may be there as well. Tap on the prototype preview to indicate you want to record it. Click the “Start” button. Once the countdown is over, the screen will be recorded. Swipe down and tap the “Screen recorder” card to stop recording.

The video of the Figma preview will be saved in your Android photo app. You can turn it into a GIF with the GIPHY app.

To convert a video into a GIF on an Android device:

Install and launch the GIPHY app on your device.
So exportieren Sie ein GIF aus Figma Sign up and create a GIPHY account.
So exportieren Sie ein GIF aus Figma Press the “Create” button in the top-right of the interface.
So exportieren Sie ein GIF aus Figma Enable the app to access your camera.
So exportieren Sie ein GIF aus Figma Select a video from your Android Gallery.
So exportieren Sie ein GIF aus Figma Adjust the length of the video. The GIPHY app lets users insert elements like text and stickers into their files.
So exportieren Sie ein GIF aus Figma Click the “Arrow” icon at the bottom of the app.
So exportieren Sie ein GIF aus Figma Choose “Share GIF” and select “Save GIF.”
So exportieren Sie ein GIF aus Figma

Export GIFs With No Restrictions

Whether you’re an experienced developer or an amateur designer, you deserve to have a convenient way of showing your work to others in GIF form. You can preview your creations on the Figma app, but accessing your designs may become a challenging task once the internet connection goes down. Until Figma comes out with a user-friendly exporting solution, you can rely on the methods we laid out in the article.

We hope this guide has helped you understand better how to get a high-quality GIF from your Figma creations, no matter which device you’re using.

Do you use the web or mobile version of Figma? What is your preferred way of exporting GIFs? Lassen Sie es uns im Kommentarbereich unten wissen.