Video gives us the ability to enrich any user experience,
making prototyping with real media crucial.
Similar to images, video can be added to any shape as a fill.
Video capabilities vary by plan. To learn more,
pause the video here or click the Help Center link in the description for up-to-date information.
In this tutorial, we’ll go over the basics of how video works in Figma,
and use them in both simple and complex designs.
To follow along, you can grab a copy of the resource file.
For additional resources and inspirations,
check out the playground file linked in the description below.
Let’s start by making a simple social media feed.
We want the video to autoplay when we open the feed,
and give users the ability to pause and play by tapping on the video.
We’ve already created a design, with a gray rectangle layer as a placeholder for the video.
You can grab the design in the playground file linked below.
To import a video, select the rectangle layer labeled “video”.
Then click on the fill swatch in the right sidebar to open the color picker.
Click on the fill mode dropdown and select "Video".
A black and white checkered placeholder image will be applied to the shape.
Click "Choose video", and select the video you wish to apply.
The video is added to your shape as a fill.
To re-position or re-size the video, click on the fill mode drop-down and select "Crop".
Click anywhere on the canvas to apply the change.
Now let’s preview our design in presentation view.
Looking great! But we want to be able to interact with the video.
Back in our design file, let’s switch to the Prototype tab and select the video layer.
By default, videos are set to autoplay, loop, and play with sound on.
For this tutorial, let’s turn the sound off.
Now let’s add a play/pause interaction. Click the
plus icon next to “Interactions” to add a new interaction to the video layer.
Open the interaction properties panel,
then set the interaction to “on tap”, and the action to “play/pause video”.
Let’s switch to presentation view again.
Now, the video autoplays and we’re able to play or pause the video by tapping on it.
Let’s try an example where we use video with interactive components and smart animate.
We’ll use this learning platform as an example.
In this prototype, we want to be able to hover over a video thumbnail, and play a preview of the video.
When clicking on the thumbnail, we want the thumbnail to expand into
a video player and to be able to play and pause the video.
We already created the design and the components for this example.
To follow along, you can grab them from our resource file linked in the description.
If you want to learn more about interactive
components and smart animate, check out our other tutorials.
Before we start, we’ve made sure our component sets are set up correctly to
work for smart animate. The layer names and hierarchy are matching,
and we’ve set some layers’ opacity to 0% to achieve a fading effect.
Let’s start by making the thumbnail interactive. We want the thumbnail to change to a video preview
when we hover over it, and change back to the default state when the cursor leaves the frame.
First, let’s connect the 2 thumbnail variants inside this component set,
which has a boolean property named “isHovering” containing two states: True and False.
Since we want this video thumbnail to autoplay when the cursor is hovering over it,
we’ve set it to Autoplay, and the isHovering state to True.
Autoplay is turned off for the other variant, so we’ve set the isHovering state to False.
Drag a noodle from the false to the true variant. Change the action to “while hovering”,
and set the animation to “smart animate”.
We want the video to play from the beginning on every hover, so we’ll check the box for “reset video position”.
The video will restart each time the interaction is triggered.
Back to our design, let’s drag the thumbnail instance and the video meta description instance
from the asset panel. Update the video information in the video meta instance,
and rename the thumbnail instance to “video”.
Select both instances and add auto layout. Rename them “videoContent”.
Then, duplicate the group a few times and update them with new thumbnails, videos, and meta data.
Once we are done,
let’s switch back to prototype tab,
set a prototype device, and play it in presentation view.
When we hover over the thumbnails, a preview of the video will display,
then reset to the default state when we mouse away.
Nice!
Now we want to click the thumbnail to expand to a video player with its own play and pause controls.
First, let’s make the video player interactive.
We have a component set of a video player that includes variants for a
video’s play and pause states, and a hover state for each.
We’ll keep autoplay checked for both play states, and uncheck autoplay for both pause states.
We’ll also mute the sound for all states.
Now let’s connect the variants to one another.
We’ll start with the play variants.
Drag a connection noodle from the false variant to the true variant.
Change the interaction to “mouse enter” and set the animation to “smart animate”.
Keep the “Reset video position” option unchecked,
since we want the video to play continuously when we hover over it.
Now connect the true variant back to the false variant,
and set the interaction to “mouse leave” and animation to “smart animate”.
We'll repeat these steps for the pause variants.
Now we want the video to pause when we click on the player, so let’s connect the play variant to the pause variant.
Set interaction to “on click” and “smart animate”.
We also want the video to resume when we click on the player again,
so let’s drag a connection noodle back to the play variant.
Now that we have everything connected,
let’s put an instance in our design and test it out in presentation view.
Our video is on autoplay, and when we hover over the player,
the control bar shows up.
Clicking on the video player will pause and play the video.
Great!
Next, let’s add prototype connections between the 2 screens.
Select the videoPlayer instance we just added, and rename it to “video.”
Note that this name matches the thumbnail instance we renamed from the homepage.
Then, select the instance and the video meta instance, and add auto layout.
Rename it “videoContent”,
so it also matches the thumbnail content on the homepage to make sure smart animate works.
Now switch to the prototype tab, and drag a connection noodle from the videoContent layer
to the video player page.
Set the interaction to “on click”, and change the animation to “smart animate”.
Check the “reset video position”, since we want the video to play from the beginning on the video player page.
We’ll also apply a custom bezier and update the animation duration.
Let’s also apply the same connection from the home button in the navigation bar back to the homepage.
With everything connected, let’s test it out in presentation view.
When we hover over the thumbnails, we’ll see previews of the videos.
Clicking on a thumbnail takes us to the video player page, where we can play and pause the video.
These are just a few ways to incorporate video into your prototypes.
Let us know in the comments if you have any other fun use cases.
For more inspiration and best practices, check out the resources linked in the description.
And be sure to like and subscribe to keep up to date on the latest product and community news.
Thanks for watching!