3 Ways to Export GIF in Figma

How to create animated GIF animations for prototypes in Figma is a problem I encountered with recently. Followings are three of the best ways I tried.

GIPHY Capture

GIPHY Capture is one of many tools you can capture GIFs. It works similar as taking screenshots.

Just frame a certain area and click on Record button, and then GIF file is good to download!

• Pros: Good for people without animation skills like me.
• Cons: Unable to capture GIFs without transparent background.

Figma Plugin GiffyCanvas

Another solution is to use a simple and easy Figma plugin called GiffyCanvas.

install here: https://www.figma.com/community/plugin/803633147991628761/GiffyCanvas

Simply select multiple layers and open the plugin... Boom! It's done. 

• Pros: It is a great tool if you'd like to quickly create GIF animations to demonstrate prototype.
• Cons: Not too flexible. Interval between frames is rigid, and background is white but not transparent.

Use Illustrator and Photoshop

The second solution takes more time but with more flexibility.

First, export individual layers as SVG files, and import them into Adobe Illustrator.

Second, copy and paste paths from Illustrator to Photoshop. When pasting, choose "paste as smart object".

Last, show/hide objects for each frame.

• Pros: More freedom to adjust animations.
• Cons: Tedious and painful if any changes to the animation.

Hope this helps, and look forward to a more convenient way to export GIF in Figma in the near future!

If you find this article helpful, feel free to buy me a coffee :)