Videos in


prototypes
Add video to your Figma frames for
richer experiences when prototyping.

Start ->
Table of contents

01 Adding video
02 Example: Frame interactions
03 Example: Landing page
04 Example: Drag interaction
05 Example: Expand video
06 Example: Product gallery
Play as a prototype 

to preview the video
examples below. 

Use the N key to move
to the next frame.
(Shift + N to go backwards)

07 Example: Music and audio

08 Example: Audio message
09 Video prototyping resources
Adding video

to prototypes
It’s as easy as working with images 

in your design files.
Who can upload
videos?
Video in prototypes can be viewed
on any Figma plan. Only those on To add new video, move a
Professional, Organization,
Enterprise, and Education plans
file into a project on a paid
can upload new videos into files. or education team.
Select the canvas, go to the 

1 Starter teams can view: center top menu and choose
Those on free plans can use the option “Move to project...”
video prototyping with
existing video fills, like those
from community files.

2 Pro+ teams can upload:

Those on Pro, Org,
Enterprise, and Education
plans can upload and view Professional+ plans:
Starter plans:

videos in prototypes. Can

Can upload
upload and
and view
view videos
videos in
in Can
Can download
download community
community files
files
prototypes
prototypes onon files
files within
within teams
teams.
.
 containing
containing video
video and
and use
use them
them within
within
3 Move to a team: Move files Move
Move files
files from
from drafts
drafts into
into team
team their
their prototypes.
prototypes. Those
Those on
on Starter
Starter
from drafts and into a projects
projects to
to get
get started.
started. teams
teams cannot
cannot upload
upload new
new videos.
videos.
project inside of a team to
upload new videos.
Video
considerations
Add videos to your Figma file for
playback in prototype mode. Just
drag the file onto the canvas and
into a frame. Videos are fills on
shapes just like images.

Please note:

1 Mp4 format: Videos should

be encoded in mp4 format.

The above video will play in Videos behave like images in Figma,
2 30 MB Limit: Video file sizes prototypes. they are fills on shapes, even unions.
should be under 30MB.

3 Videos are shape fills: They

behave like images and can Quick Tip:

be applied to any shape, and

You
You can
can copy
copy and
and paste
paste video
video fills
fills from
from one
one shape
shape to
to another.
another.
layered with additional fills.
Either
Either copy
copy and
and paste
paste them
them from
from the
the properties
properties panel
panel or
or use
use
copy
copy +
+ paste
paste properties
properties from
from one
one to
to another.
another.
Autoplay,
looping, and
audio
To set video properties, select the
video on the canvas to access and
change its settings in the prototype
panel. Quickly toggle the design
and prototype panel with Shift + E.

1 Autoplay: Toggles the video

playback between play and
pause states.
This video will play and you will hear its audio
2 Loop: Toggles between when playing as a prototype.
video continuously looping or
ending upon completion.

3 Audio: Mutes / unmutes

audio for the video.
Interaction
panel options
When prototyping, there are some
basic video events that you can
trigger in the interactions panel
when you have a video selected.

1 Play video: Will trigger the

selected video to play.

2 Pause video: Will trigger the

selected video to pause.
When you click this video while playing as a prototype,
3 Play/pause video: Will it will toggle between pausing and playing.
toggle the video based on its
current state. If paused, the
video will play and vice versa.
Interactions
across frames
and continuity
Video interactions can take place
across frames. Set different states
to the video layer on each frame in
a protototype to set a new state.
Disabling autoplay on another
frame will cause the video to pause Play Play
when navigating that frame.
Pause Pause
When prototyping video playback
across frames, the video will
continue to progress so long as the
layer positioning and naming match
consistently.

Note: Video playback continuity

Video is playing Video is paused
will only work with “instant,”
“dissolve,” and “smart animate”
transitions.
Video state
management Video will play from last position

To start video from its beginning on

a new frame, choose “Reset video
position” on an interaction under
state management. This can be
found when editing an interaction
connector between frames within
the interaction details.

Continue playing Play Play

Play from beginning Pause Pause

Video will start from beginning

Note: It will only show up as an
option when you have a video on
the target frame.
Example: Frame
interactions
You can simulate this common
video control interaction by
drawing prototype links between a
paused and playing state of a video
on different frames.



Using frames or interactive

components to toggle video
playback and mute provides more
control with ui and feedback.

View example page

Note: View example page in design

editing mode to see interaction
breakdown.
Click the above video to toggle play / pause.
Example:

Landing page

Videos are commonly used in

landing page desings and can be

applied as a fill to any frame and

vector—even text and strokes!

View example page

Note: View example page in design

editing mode to see interaction

breakdown.

Scroll down and up on the mockup.

Example: Drag
Interaction
Video is great for prototyping social
media designs, as you can simulate
a drag to scroll effect and tap to
play/pause videos.

View example page

Note: View example page in design Drag up or down to

editing mode to see interaction browse videos. Click to
breakdown. play / pause the video.

01
The perfect espresso pull
Example: 

Product gallery
Videos are also great to feature in
product pages! This interaction is
using the “scroll to” interactions to
transition horizontally across the
product videos.

View example page

Note: View example page in design

editing mode to see interaction
breakdown.

Monstera Plant Gallery

Click on each thumbnail image to scroll to the product video.
Example:
Expand video
You can combine video prototypes
with Smart Animate to create a
resizing effect.

View example page

Note: View example page in design

editing mode to see interaction
breakdown.

Click on the screen size icons to change the video dimensions.

Example: 

Video thumbnail
Use videos in interactive
components to create a thumbnail
to play transition commonly used in
video streaming design.
01
View example page

Hover over each thumbnail

Note: View example page in design
to see its video preview.
editing mode to see interaction
breakdown.
02

03
Example:
Playing music
Video in Figma also adds the ability
to bring in audio in creative ways.

The three components on the right

are composed of a single
interactive component that swaps
a video fill for each instance.

View example page

Note: View example page in design

editing mode to see interaction
breakdown.
Paused Playing w/ sound Paused

Click on the play/pause and audio controls for each interaction above.
Example:

Audio message
If you only want audio with no video
visual, clip the frame with the video
from view, by placing it outside the
contents of the container frame.
This will hide the visuals while still
permitting audio to go through.

View example page Click the play button to

hear the audio message.

Note: View example page in design

editing mode to see interaction
breakdown.

Stopped
 Help
HelpCenter
Center
Everything
Everythingabout 

about 

Video video
videoprototyping
prototyping

prototyping Read
Readthe
thearticle
article

resources Livestream
Livestream
Additional resources to help you 
 Prototyping
prototype with video in Figma.
Prototypingoffice
officehours

hours

Wednesday,
Wednesday,Nov
Nov9th
9th9AM
9AMPTPT
Register
Registerfor
forthe
thelivestream
livestream
Royalty free stock videos sourced from

from the following authors on pexels.com:



https://www.pexels.com/@martin-portas-64345/

https://www.pexels.com/@ron-lach/

https://www.pexels.com/@ekaterina-bolovtsova/

https://www.pexels.com/@teona-swift/

https://www.pexels.com/@yaroslav-shuraev/

https://www.pexels.com/@cottonbro/

https://www.pexels.com/@tim-douglas/

https://www.pexels.com/@tunnel-motions-1398086/

https://www.pexels.com/@matthiasgroeneveld/

https://www.pexels.com/@souvenirpixels/

https://www.pexels.com/video/video-of-black-cat-855401/