How To Export A GIF From Figma

Device Links

• Android
• iPhone
• Mac
• Windows
• Device Missing?

Are you 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 audio, video, and animation effects. However, to properly test out the prototype’s feel and functions, you should be able to export it as a GIF and see it in action.

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 way to export animated 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 “Community” section.

To download the plugin:

1. Enter “TinyImage” into the search box.
   
2. Under the “Plugins” section, find the “TinyImage Compressor” icon.
   
3. Click on the install button next to the icon.
   

When you’ve installed the plugin, open the design project you want to save as a GIF. Click anywhere on the screen to open the drop-down menu. Choose “Plugins” and tap “TinyImage Compressor” to launch it.

Here’s how to create a GIF with the plugin:

1. At the top of the plugin window, press the “Create a GIF” button.
   
2. Select the layers on your Figma canvas. They’ll act as the frames of your GIF.
   
3. At the bottom of the TinyImage window, tap the “Use Selected Layers” option. You’ll see a slideshow of your layers in the center of the window in the order you selected them.
   
4. Beneath the preview, click on the layer icons, then drag them left or right to switch up their order.
   
5. Tap the small “Play” button under the slideshow to adjust the playback speed.
   
6. Next to the time delay controls, select how many times the GIF will 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.
   
7. Adjust the size of the GIF in the fields below the time delay and loop options.
   
8. If your layers have transparent borders, press the “Transparent Background” button at the bottom of the window to make them visible in the GIF.
   
9. Select the image quality of the GIF in the bottom-left corner. It’s best to set the rate at around 80 or 90 to preserve all the features of your layers.
   
10. Leave the “Dithering” controls set to “No Dithering.”
    
11. Tap the “Export GIF” button at the top of the TinyImage window.
    
12. 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:

1. Launch the Figma mobile app and open the project you want to turn into a GIF.
2. Enter “Settings” and select “Control Center.”
3. Choose “Customize Controls” and tap the green button next to “Screen Recording” to enable the feature.
4. Return to the “Control Center.”
5. Press the “Screen Recording” button.
6. 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:

1. Open the app, go to the bottom of the interface, and select the “Gallery” card.
   
2. Tap the “Starter Shortcuts” tab underneath the search menu.
3. Scroll to the bottom of the screen and click the “Make GIF” section.
   
4. Hit the “Add Shortcut” button to enable the GIF shortcut.
   
5. When the shortcut has been installed, return to “My Shortcuts.”
   
6. Tap “Make GIF” and choose “OK” to connect the app and your photo gallery.
   
7. Browse through your videos and select the video you’ll turn into a GIF.
   
8. Use the sliders to select which frames will be included in the GIF.
   
9. Tap “Save” to record the changes. Your new GIF file will be saved in the tablet’s photo app.
   
10. 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 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:

1. Launch the app and open a preview of your project.
2. 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.
3. Tap on the prototype preview to indicate you want to record it.
4. Click the “Start” button. Once the countdown is over, the screen will be recorded.
5. 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:

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

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? Let us know in the comment section below.