We’re thrilled to announce that as of today Figma supports animated GIFs in prototypes! Simply add a GIF to your file and watch it come to life when you click “Present.”
Whether you’re prototyping a mobile app, designing a product user flow, or putting together a presentation, GIFs are a simple way to make your designs more dynamic—and perhaps bring smiles to a few faces. GIFs can stand in for motion designs, video elements, and subtle animations that can otherwise be hard to represent faithfully in prototypes.
Here’s how GIFs in Figma prototypes work:
- Add a GIF to your Figma file. Some of our favorite tools for GIF creation are ScreenFlow, LICEcap, Principle, and After Effects.
- Click “Present” and watch your prototype come to life.
Because GIFs only animate in prototypes, they will appear as a static image in your file. To help you differentiate between multiple similar GIFs, you can select the cover frame that’s displayed in the editor by opening the GIF modal from the properties panel and scrubbing to a different frame. This is incredibly helpful if your GIF has a blank first frame, or if you have multiple GIFs with the same starting frame.
Lastly, if you’re creating a mobile prototype, you will also notice improved OS-aware momentum scrolling and new touch cursors—a few details we introduced to make your design feel like the real thing.
For some inspiration as you try out these new features, here are some of our favorite animated moments around the Web. We can’t wait to see all the things you’ll do with GIFs in Figma prototypes! Make sure to tweet what you’re working on by tagging @Figma with #GIFma.
A few of our favorite animated moments
1. Uber’s animated splash screen
First impressions matter, and splash screens can certainly help with that. Here’s one you probably see rather often—Uber’s animated splash screen doubles as a loading state and welcomes riders.
2. Slack’s loading quotes
Every app tackles the loading state in various ways. Slack displays a collection of quotes, where some are useful product tips and others are just for fun. (It takes time to reticulate those splines!)
3. Material Design’s simple progress indicators
Sometimes, keeping it simple works best. Material Design modernizes the linear and circular progress indicators, each representing a distinct activity in an app.
4. Headspace’s illustrative onboarding:
Useful animations alongside “getting started” tips can keep users engaged during the onboarding experience. The Headspace app uses subtle animations to communicate all the different places where users can get some “headspace.”
5. Hyperlapse’s video onboarding:
Hyperlapse presents a quick product walk-through with its mobile onboarding. They showcase specific scenarios where taking videos with Hyperlapse works better than other standard video apps.
6. Mapbox’s website:
GIFs also work great on websites, like Mapbox’s use of a looping video for their website hero. It brings to life how companies can leverage their live location technology.
7. Mailchimp’s website illustrations:
Subtle GIFs can pack a punch. Throughout Mailchimp’s website, you can find subtle animations that add texture to their illustrations.
Need some help getting started? Try this Figma starter file with mobile UI GIFs that you can play with right away, or check out this support article for more setup details.
To duplicate the above file, click here.
Related Content
