How to Add a Video to Figma Designs

Static mockups only take you so far. The moment a stakeholder watches a video playing inside your prototype, the design stops being a sketch and starts feeling like the real product.

Figma now supports native video as a fill — no third-party plugins required for most use cases. With over 13 million monthly active users and adoption by 95% of Fortune 500 companies, Figma has become the go-to platform for product teams who need collaborative, high-fidelity design. And video is a big part of why those prototypes feel so convincing.

This guide walks you through every method to add video to Figma, how to configure prototype interactions around it, and the practical details you need to avoid common pitfalls.

What You Need Before You Start

Before you upload anything, there are two things to confirm.

Your file must be in a paid team. Figma supports video uploads on Education, Professional, Organization, and Enterprise plans. If your file is sitting in Drafts or on a free Starter team, you can edit existing video in a file, but you cannot upload new video to it. Move the file into a paid team workspace first.

Your video must meet Figma’s format and size requirements. Figma accepts .mp4 and .mov files using H.264 encoding, and .webm files using VP8 encoding. The maximum file size is 100 MB per video. If your file exceeds that, compress it using a tool like HandBrake before importing.

Once those two boxes are checked, you’re ready.

How Video Works in Figma

Here’s the first thing that surprises most people: Figma doesn’t have a dedicated video layer type. Instead, videos are treated as fills — the same way images and gradients work.

That’s actually a feature, not a limitation. Because video is a fill, you can apply it to any shape, frame, vector network, or text layer. You’re not locked into a rectangular video box. You can put a video inside a circle, a phone mockup cutout, or any custom vector shape you’ve drawn.

This distinction matters because it changes how you interact with video in the layers panel. Look for the video icon next to the layer name — that’s your indicator that the fill contains a video asset.

Four Ways to Add Video to Figma

Drag and Drop from Your Computer

The fastest method. Open your file, open your desktop file browser, and drag the video directly onto the Figma canvas.

When you drop it, Figma creates a rectangle layer at the canvas position, with the video set as the fill. The dimensions of the rectangle match the original video file dimensions. From there, you can resize, reposition, and fit the layer into your design as needed.

This works best when you’re adding a single video quickly and don’t need to target a specific existing frame or shape.

Use the Fill Color Picker

This method gives you more control over placement. Select an existing shape or frame on the canvas, then open the Fill section in the right sidebar. Click the fill type dropdown, and select the video importer option.

A file picker opens. Navigate to your video file, select it, and Figma applies it as a fill to the layer you had selected. The video now lives inside the exact shape or frame you targeted.

This is the preferred method when you have a phone frame, a screen mockup, or any specific layer you want the video to occupy precisely.

Place Image/Video Tool for Bulk Import

Need to add multiple videos at once? Use the Place Image/Video tool from the toolbar (or via the main menu).

This opens a file picker where you can select multiple video files simultaneously. Once you confirm your selection, Figma arms your cursor with all of them in a queue. Click once on the canvas or on an existing layer to place each video in sequence.

This is ideal for product demos where you have several screens showing different video states, or for design systems where multiple components need video fills populated at once.

Copy and Paste

If you’ve already set up a video fill in one layer — or in a completely different Figma file — you can copy that layer and paste it anywhere. The video fill travels with it.

You can also copy just the fill style from the right sidebar and paste it onto another layer. This saves significant time when you’re building a prototype that reuses the same video across multiple frames.

Editing Video Fills After Upload

Once a video is in your file, you’re not stuck with how it looks at upload. Figma gives you several ways to adjust the fill in the right sidebar.

Playback preview. Click the play button in the Fill section to preview your video directly on the canvas. No need to enter prototype mode just to check how it looks.

Jump to a timestamp. If you’re working with a longer clip and only want to show a specific moment as the resting frame, you can scrub to a timestamp and use that as your preview state.

Fill mode. Like images, video fills support fill, fit, crop, and tile modes. This controls how the video scales inside its containing shape. For screen mockups, “Fill” is usually what you want. For video thumbnails where aspect ratio matters, “Fit” gives you more precision.

Rotation and dimensions. You can rotate and resize the containing layer freely without affecting the underlying video source file.

<div style=”float: right; width: 260px; margin: 0 0 24px 32px; padding: 28px 24px; background: #ECECFE; color: #1F2124; border-radius: 12px; position: sticky; top: 80px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); font-family: sans-serif;”> <h2 style=”font-size: 1.15rem; font-weight: 800; margin: 0 0 10px; color: #1F2124; line-height: 1.3;”>🚀 Turn Design Traffic Into Pipeline</h2> <p style=”font-size: 0.9rem; margin: 0 0 18px; line-height: 1.5; color: #1F2124;”>Your Figma audience is a buyer signal. We build cold outbound systems that target, engage, and convert them into meetings — at scale.</p> <a href=”https://salesso.com/strategy-meeting” style=”display: block; text-align: center; background: #2A5AF8; color: #fff; font-weight: 700; padding: 12px 16px; border-radius: 8px; text-decoration: none; font-size: 0.95rem;”>Book Strategy Meeting</a> </div>

Prototyping With Video in Figma

Adding video to a design file is useful for visual fidelity. But the real power comes when you wire that video into prototype interactions — because that’s when your design starts replicating the actual behavior of the product.

Once you’ve added video to a frame, navigate to the Prototype tab in the right sidebar. This is where you configure how the video behaves during a prototype session and how it connects to the rest of your flows.

Setting Video Behavior on Frame Entry

When a user navigates to a frame containing a video, you control what happens at the moment of arrival. Options include autoplay, loop, and mute. These settings live in the Video section of the Prototype tab when your video layer is selected.

For a product demo that opens mid-video on a background hero clip, set autoplay on and loop on. For a media player mockup, set autoplay off and let the user trigger playback manually.

Interaction Triggers for Video

Figma supports two video-specific interaction triggers.

When video hits — This trigger fires an action at a specific timestamp in the video. Use this to navigate to the next frame exactly when the video reaches a key moment. It’s particularly effective for onboarding flows where a video explanation should hand off to an interactive UI element at the right beat.

When video ends — This trigger fires when the video reaches its natural endpoint. Pair it with a “Navigate to” action to create seamless auto-advance behavior, like moving a user from a loading screen to a content screen after an intro animation completes.

Interaction Actions for Video

You can also trigger video-specific actions from user interactions on other elements in the same frame.

• Play/Pause video — Wire a play button component to toggle playback. This lets you prototype a fully functional video player without writing a line of code.
• Mute/Unmute video — Add a mute button and connect it to this action. Demonstrates speaker-sensitive UI to stakeholders accurately.
• Set to specific time — Jump the video to a defined timestamp on demand. Useful for chapter navigation or jump-to-highlight functionality.
• Jump forward/backward — Define a number of seconds to skip forward or rewind. Classic for media player controls.

Video and Smart Animate

If you navigate between two frames that contain the same video, Figma’s Smart Animate feature can preserve the video’s playback state. The video continues playing at the same position rather than restarting. This is critical when building a transition where the video stays in the background and the UI layer changes around it.

To activate this, use Smart Animate as the animation type on the interaction between frames.

Reset Video State

When prototyping multiple paths through a flow, you sometimes need the video to restart from the beginning when the user returns to a frame. The Reset video state toggle in the Interaction details panel handles exactly this. Enable it when you want every navigation to that frame to feel like a fresh start.

Adding YouTube and Vimeo Videos via Plugin

The native video fill only supports locally uploaded files. If you want to reference a YouTube or Vimeo URL without downloading and re-uploading the file, you need a community plugin.

The most straightforward option is the YouTube and Vimeo Video widget, available in the Figma Community. Install it, then copy and paste a YouTube or Vimeo URL directly into the widget interface. The video embeds into your file as an interactive element in FigJam and design files, letting you keep context without leaving your design workspace.

This approach works well for design critiques, stakeholder walkthroughs, and documentation where you want to reference an existing video asset without managing local file exports.

For more advanced embed workflows — including Google Drive and other platforms — plugins like Blossom offer broader source support, though they function as preview tools within Figma rather than fully integrated prototype interactions.

Keeping Files Performant: The 100 MB Limit

Figma imposes a 100 MB cap on individual video uploads. For short UI clips and screen recordings, this is usually generous. For longer product demos or marketing videos, it becomes a constraint.

The practical fix: compress before you upload. Tools like HandBrake (free) let you reduce file size significantly while preserving visual quality at H.264 encoding. For most design demo purposes, a 720p clip at medium quality is more than sufficient, and file sizes drop dramatically compared to uncompressed exports.

If you’re dealing with truly large clips, consider trimming the video to only the segment your prototype actually needs. A five-second interaction demo doesn’t need to carry three minutes of context that never plays during the prototype presentation.

Common Mistakes and How to Avoid Them

Video not uploading. The most common cause is that your file is in Drafts rather than inside a paid team workspace. Move the file to a team folder first.

Video only visible in presentation mode, not on canvas. This is expected behavior. Videos only play during prototype/presentation mode to preserve canvas performance. They display as a static frame on the design canvas.

Wrong fill mode stretching the video. If your video looks distorted inside a frame, check the fill mode setting. Switch from “Fill” to “Fit” or adjust the crop to fix aspect ratio issues.

Smart Animate not preserving playback position. Make sure the layer names match exactly between frames, and that you’ve selected Smart Animate as the animation type — not Instant or any other transition.

Video interactions not firing. Confirm that the video is added to a frame (not just placed loose on the canvas), and that you’re building the interaction from the Prototype tab with the correct trigger selected.

What This Unlocks for Your Team

Video in Figma isn’t just a visual upgrade. It changes what you can actually test with stakeholders before a single line of code is written.

You can prototype a streaming interface that auto-advances to the next screen when the clip ends. You can build a media player with working play, pause, and scrub controls that stakeholders can use hands-on. You can embed a product walkthrough video in an onboarding flow and time the UI transition to sync with the voiceover.

The Forrester Total Economic Impact study on Figma found that customers achieved an average 328% ROI with an 11-month payback period. Much of that return comes from reducing back-and-forth between design and development — and high-fidelity prototypes with real video are a big part of that.

When your prototype behaves like the actual product, feedback gets sharper. Decisions get faster. And the gap between the design phase and launch shrinks.

Conclusion

Adding video to Figma is one of those capabilities that sounds like a small upgrade and then completely changes how you design and present interactive work. Once stakeholders can interact with a prototype that plays, pauses, and transitions on real video triggers, the conversation shifts from “what might this feel like” to “here’s exactly how it works.”

The workflow is straightforward: get your file into a paid team, prepare your video in a supported format under 100 MB, and choose your import method — drag and drop for speed, fill picker for precision, bulk import for scale. Then layer prototype interactions on top to make the design behavior feel genuinely live.

The teams that use Figma most effectively are the same teams that obsess over every touchpoint in their user’s journey — including the touchpoints that happen before the product ever ships. That same mindset applies to how you reach new customers.

If your team is building products and you want outbound lead generation that reflects the same level of precision you put into your design work, SalesSo builds cold email, LinkedIn, and calling systems that target your exact audience, from campaign design through to scaled execution. Book a strategy meeting to see what that looks like for your pipeline.