'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Use animated GIFs in prototypes
If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →
Who can use this feature
Supported on all paid plans
Anyone with can edit access can add GIFs to Figma design files
Add GIFs to your design files and view them in presentation view. This allows you to simulate videos or animations, and create more dynamic prototypes.
Due to browser limitations, the width or height of an image must not be larger than 4096 pixels. Figma will scale any larger images so they fit within these limitations.
Add animated GIFs
Like regular static images, you can apply animated GIFs to layers as fills. This means you to apply them to any vector shape, including text layers. There are a few ways to add GIFs to your designs:
- Drag and drop GIFs onto the canvas
- Import files via the file browser
- Add images to objects in bulk with place image
- Upload image as fills
- Copy and paste image fills between layers
Want to copy and paste an animated GIF from a website in the browser? Some browsers will only allow you to copy a static version of the GIF. We recommend saving a copy of the image locally and dragging the file into the file instead.
View animated GIFs
Animated GIFs only play in presentation view. When viewing the file in the editor, animated GIFs appear as static images.
Identify GIFs by their GIF label in:
- Fill section in the right sidebar
- Fill modal
- Layers panel
- Next to the image's dimensions in the canvas
Manipulate or edit GIFs
Like static images, you can also manipulate aspects of a GIF. You can:
- Scale, rotate and adjust the dimensions of GIFs
- Adjust the opacity, fill mode, and rotation of a GIF
- Apply or combine with blend modes
- Create styles and components with GIFs
- Apply masks to only show a part of the GIF
- Apply scrolling overflow settings to GIFs
- Create overlays in prototypes using GIFs
There are also a few extra options for GIFs:
- View images and animated GIFs in the Figma mobile app
- Keep and export metadata including Frame delay and # of Loops
- Choose which frame of the GIF you want to display in the canvas
There are some actions you can't take with animated GIFs. You can't:
- Apply image adjustments to GIFs. We recommend layering fills and using blend modes instead.
- View animated GIFs in the canvas (editor). Animated GIFs only play back in presentation view.
- Export animated GIFs from Figma. Figma can only export animated GIFs as static images.