How to Add Animated GIFs in Figma?

Tutorial
March 20, 2023
3 min
Figma editor with GIF on white background, text, and Figma color bars.
Use AI to summarize this article
Key points

Figma allows you to import various file types, including animated GIFs, into your web mockups and designs. This feature will help you animate your prototypes, making them more realistic.

Adding an Animated GIF to a Figma Mockup

The methods for adding GIFs are the same as those for adding static images to your files:

  • Drag and Drop a GIF onto the canvas
  • Use the Figma Import tool
  • Utilize the “Place Image” feature
  • Import a GIF as a fill for an element
  • Copy and Paste a GIF

Previewing GIFs in Figma

Viewing a GIF Preview

There are two methods to preview a GIF in Figma:

  1. Double-click on the GIF to open the settings. You can then launch a preview of the GIF by clicking on the “Play” icon.
Figma GIF settings with a dog GIF and play button highlighted in blue

2. Open your Frame in presentation mode for the web mockup. The GIFs will automatically play on all your frames.

Figma GIF with a dog on an iPhone, against a black background

Separating GIFs from Other Images

GIFs are displayed statically in the Figma editor. To distinguish them from images, they are labeled "GIF":

  1. in the Fill section of the properties panel, located on the right side of the editor
Figma editor with the fill section highlighted in blue to emphasize a GIF

2. in the Layer panel, on the left side of the editor

Figma editor with the GIF title highlighted in blue

3. to the right of the dimensions of the GIF when it is selected

Figma editor with GIF dimension highlighted in blue

4. in the image settings when you double-click on it

Figma editor with GIF settings highlighted in blue

Editing a GIF in Figma

Figma GIFs are editable just like any other image in Figma. You can for example:

  • Resize, scale, and rotate your GIFs
  • Adjust the opacity
  • Create styles and components that utilize GIFs
  • Apply masks

Our agency specializes in Figma web mockup design!

Thomas Labonne
Thomas Labonne
Co-founder

Suggested articles

AI Tech Summit 2025 conference with a speaker on stage in front of a large audience, surrounded by big screens displaying “AI” and “Tech Summit 2025”. (Gen by AI)
Events

2025 Calendar of Must-Attend Web, Design & AI Events

2025 Calendar of Must-Attend Web, Design & AI Events
Screenshot of Google search homepage with search bar and Google logo.
Documentation
SEO

3 tools to track your SEO rankings in the SERP

3 tools to track your SEO rankings in the SERP
ChatGPT 5.0 OpenAI
News
AI

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1: The Ultimate AI Comparison 2025

Want to turn your website into your most valuable asset?

Contact us today