Figma allows you to import different types of files, including animated GIFs, onto your mock-ups and web designs. This feature will allow you to animate your prototypes, making them more realistic.

Adding an animated GIF to a Figma model

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
• Using the Figmaimport tool
• Using the "Place Image" feature
• Import a Gif as a fill on an element
• Copy / Paste a Gif

Viewing GIFs in Figma

See the preview of the GIF

There are two ways to preview a GIF in Figma:

1. Double click on the GIF to open the settings. You can then preview the GIF by clicking on the "Play" icon.

‍

2. Open your frame with the presentation mode of the web template. The GIFs will automatically launch on all your frames.

Disassociate GIFs from other images

Gifs are present in a static way from the Figma editor. In order to dissociate them from the images, they are entitled "GIF":

1. in the Fill section of the property panel, on the right of the editor mode

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

3. to the right of the GIF dimensions when selected

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

Editing GIFs in Figma

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

• Enlarge, scale, rotate your Gifs
• Adjusting the opacity
• Create styles and components that use Gifs
• Applying masks

Our agency is specialized in Figma web design!