Web Design » Figma » How Do You Make a Figma Prototype GIF?

How Do You Make a Figma Prototype GIF?

Last updated on February 1, 2023 @ 7:59 am

Figma is a great tool for quickly creating high-fidelity prototypes. But what if you want to create a GIF to show off your work?

Here’s how to do it:

  1. First, create your prototype in Figma. Make sure all the states and interactions are how you want them.Once you created a prototype, click the play button to publish and preview your prototype
  2. Next, go to the “Publish” menu and click “Create GIF.” Or  go to Figma “Resources” tab, search for the “Gifmock” plugin, and click “Run.”Go to Figma resources, search for Gifmock plugin and click run
  3. A new window will open. Select the “Create GIF” tab and choose the frame rate, resolution, and looping options you want.In the Figma Gifmock plug-in, choose the frame rate resolution and looping options for your prototype gif
  4. Then click “Record.” Figma will start recording your prototype. Go through all the states and interactions you want to include in the GIF.Click the start button to go through your Figma prototype Gifmock interaction
  5. When you’re done, click “Stop Recording. “
  6. Figma will ask you where you want to save the GIF. Choose a location and click “Save.”Choose the location where you want to save your Figma prototype GIF mock

And that’s it! You’ve now created a Figma prototype GIF.

PRO TIP: Warning – The following article contains graphic images that may be disturbing to some viewers. Reader discretion is advised.
Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.