How To Properly Download And Save A Gif

Are y'all looking for a way to bring your developer and design game to the next level? Figma is an incredible tool that allows users to create rich prototypes filled with sound, video, and animation effects. Nevertheless, to properly test out the prototype's feel and functions, you should be able to export it as a GIF and see it in activeness.

How to Export a GIF From Figma

This guide will explain how you can export your Figma prototypes as GIFs using your PC or mobile device.

How to Export to GIF in Figma on a PC

The simplest manner to consign blithe GIFs from Figma is with the TinyImage plugin. Before you can launch and use the plugin, you'll need to log into your Figma account and go over to the "Customs" section.

To download the plugin:

Enter "TinyImage" into the search box.
Under the "Plugins" section, find the "TinyImage Compressor" icon.
Click on the install button next to the icon.

When you've installed the plugin, open up the design project you desire to save equally a GIF. Click anywhere on the screen to open the drib-down menu. Cull "Plugins" and tap "TinyImage Compressor" to launch it.

Hither's how to create a GIF with the plugin:

At the top of the plugin window, press the "Create a GIF" push button.
Select the layers on your Figma canvas. They'll act as the frames of your GIF.
At the bottom of the TinyImage window, tap the "Utilize Selected Layers" option. Yous'll see a slideshow of your layers in the center of the window in the social club you selected them.
Beneath the preview, click on the layer icons, then drag them left or right to switch up their club.
Tap the small "Play" push nether the slideshow to adapt the playback speed.
Next to the fourth dimension filibuster controls, select how many times the GIF volition loop. The default setting is "Infinite." Click on the "Infinite" option to disable it and enter the desired number of loops in the box beside it.
Adjust the size of the GIF in the fields below the time filibuster and loop options.
If your layers have transparent borders, printing the "Transparent Background" push button at the bottom of the window to make them visible in the GIF.
Select the epitome quality of the GIF in the bottom-left corner. It'south all-time to set the rate at around 80 or 90 to preserve all the features of your layers.
Leave the "Dithering" controls set to "No Dithering."
Tap the "Export GIF" push at the top of the TinyImage window.
The frames will merge and form a GIF and it volition automatically downloaded and save in your download files.

A Note About Layering

The drop-down carte higher up the layer thumbnails as well allows you to play the layers from left to right or from right to left. However, for more control over the concluding advent of the GIF, it's best to club the frames manually.

A Note About Playback

Gear up the default playback speed by moving the button on the fourth dimension-measuring line. However, if you want specific frames to take different playback speeds, yous can practice and so by clicking on a thumbnail and setting the speed in the box below it.

How to Consign to GIF in Figma on a Mobile Device

Figma prototypes often come up with advanced animations like sliding tabs, swiping options, and drop-downwardly menus. Saving them every bit a GIF will make it easy for you to showcase the design in action. However, the mobile app but allows users to preview their prototypes. Although there'due south no built-in export support, y'all tin can get around the issue by screen recording the app and turning the video into a GIF.

How to Consign to GIF in Figma on an iPhone

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

To screen tape Figma on an iPhone:

Launch the Figma mobile app and open the projection you want to turn into a GIF.
Enter "Settings" and select "Control Center."
Choose "Customize Controls" and tap the green button side by side to "Screen Recording" to enable the feature.
Return to the "Control Middle."
Press the "Screen Recording" button.
Click the red button to cease 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 besides download the tool from the App Shop.

Here'south how to change the video into a GIF file on an iPhone:

Open the app, get to the bottom of the interface, and select the "Gallery" carte.
Tap the "Starter Shortcuts" tab underneath the search menu.
Scroll to the bottom of the screen and click the "Brand GIF" section.
Hit the "Add Shortcut" button to enable the GIF shortcut.
When the shortcut has been installed, return to "My Shortcuts."
Tap "Make GIF" and cull "OK" to connect the app and your photograph gallery.
Browse through your videos and select the video yous'll plough into a GIF.
Use the sliders to select which frames volition be included in the GIF.
Tap "Save" to record the changes. Your new GIF file will be saved in the tablet's photo app.
Click "Done" to exit the Shortcuts app.

How to Export to GIF in Figma on an Android Device

As the Figma app lets users preview prototypes simply non 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 tape." If it's non there, effort swiping right. Sometimes you lot'll have to tap the "Edit" icon at the tiptop of the screen to reveal a subconscious card. The "Screen record" feature may be there also.
Tap on the epitome preview to bespeak you want to record it.
Click the "Start" push. 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 exist saved in your Android photo app. Yous can plough it into a GIF with the GIPHY app.

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

Install and launch the GIPHY app on your device.
Sign up and create a GIPHY account.
Press the "Create" push in the top-right of the interface.
Enable the app to access your camera.
Select a video from your Android Gallery.
Adjust the length of the video. The GIPHY app lets users insert elements similar text and stickers into their files.
Click the "Arrow" icon at the bottom of the app.
Cull "Share GIF" and select "Salvage GIF."

Export GIFs With No Restrictions

Whether you're an experienced developer or an apprentice designer, you deserve to have a convenient way of showing your work to others in GIF form. You tin preview your creations on the Figma app, but accessing your designs may get a challenging job once the net connectedness goes down. Until Figma comes out with a user-friendly exporting solution, you can rely on the methods we laid out in the commodity.

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

Do you lot use the web or mobile version of Figma? What is your preferred style of exporting GIFs? Permit u.s.a. know in the comment department beneath.