Before you start
Who can use this feature
Supported for files in Education, Professional, Organization, and Enterprise teams.
Anyone part of a paid team can add video to files.
Anyone with can edit access can edit videos in files.
Not supported for files in your Drafts.
New to Prototyping? Check out our Guide to prototyping →
Add video to your prototypes to replicate the experience your users would have in a site or app with video playback or previews.
Video in prototypes:
- Should be in mp4 format
- Cannot exceed 30MB in size
- Are shape fills and behave as such
- Are not currently supported in the Figma mobile app
Note: Video can only be added to files in a paid Education, Professional, and Organization team. Collaborators on free Starter teams can edit existing video in a file but not upload video to it. Anyone on a Starter team can also add animated GIFs to prototypes →
Figma doesn't have a specific layer type for video, instead, videos are a type of fill. This allows you to add video to any shape or vector network.
View and update video fills in the Fill section of the right sidebar. Figma will show a thumbnail of the video in the swatch and a
You can also identify layers with video fills in the Layers panel in the left sidebar:
- If you add a video straight to the canvas, Figma creates a rectangle in the canvas with the dimensions of the original file with the video icon and
- If you add a video as a fill to an existing object, Figma uses the layer icon and description of the original layer.
Add video to files
As videos are fills, you can add them to any vector or shape.
This gives you greater flexibility and control. There are a number of ways you can add video to design files:
A Drag and drop video file from your computer onto the canvas. Figma creates a new rectangle the dimensions of the video and applies the video as a fill.
B Use the video importer from the color picker. Upload fills →
C Copy a video from another layer in the current file, or from another file.
D Paste any video from your clipboard into the canvas.
You can also add animated GIFs to your prototypes. GIFs only playback when viewing designs and prototypes in presentation view. Add animated GIFs to prototypes →
There are lots of ways to edit or adjust video:
- Scale, rotate and adjust the dimensions of any layers with video
- Crop and re-position video applied to layers
- Adjust the video options including the Fill mode, rotation and blend modes
- Apply masks to only show a part of the video
- Make adjustments to video like changing the hue, saturation, or contrast
Prototype with video
Once you add video to a frame, switch over to the Prototype of the right sidebar. From here, you can create interactions between frames with video.
The Video section of the Prototype tab lets you set a video’s behavior when navigating to its frame in a prototype:
- Check the box to autoplay video
- Click to loop video
- Click to turn the video’s sound off and on
The State management section of the Interaction details panel lets you Reset video position when an action is triggered. This would let you restart the video between frames.
Create interactions in your prototype to play and pause video in your design.
- Play video
- Pause video
- Play/pause video
Video and smart animate
You can use smart animate to preserve a video’s progress when navigating between frames. Let’s say you want to create a prototype where entering a frame begins playback, then clicking on the video navigates to a new frame with a larger view.
- Create a connection between the two frames with the same video name. Make sure the video layer names match as well.
- Set the animation setting to Smart animate.
- In the Interaction details panel, uncheck reset video position.
Video and interactive components
Use interactive components to prototype video interactions in a single frame, like previewing playback on hover.
- Create a component with variants for a default and hover state.
- The default state should have autoplay off, and the hover state should be set to autoplay.
- Create a connection from the default variant to change to the hover variant and uncheck reset video position.
- Create a frame with a couple instances of the component and replace video to reuse the component.