Full functional video player in Figma

Now we can add Video directly to our prototype in Figma, and that is not all, using new features in the prototyping tool, we can add functional video player controllers like the play and pause buttons.
In this video, I will show you how to use this feature and also show you how to create a component with an instance swap property. make sure to watch this video until the end.
Content:
0:00 - Intro
0:48 - Step 01: Importing the video
2:17 - Step 02: Creating the video controllers
2:36 - Icons
4:13 - Buttons
4:44 - Different variants for button
5:52 - Instance swap property
7:57 - Step 03: Creating the video player
8:40 - Step 04: add functionality to controllers
10:59 - Result
Don't forget to subscribe to my channel.
Let's Learn together #UX and #UI , #Design, #xd #prototype
Follow me on Instagram: / kimo.artcave
Photography: / kiagraphy.a. .
Twitter: / kiarashmoazzez

[@annam291]

You're a lifesaver! Thank you so much 🙏

[@Kimoartcave]

❤️❤️

[@dale_moore]

This is great but it doesn't seem to work when you create a video player component that you then add onto a frame in a page separate from where your original component is... the buttons aren't clickable and can't pause/play the video. The hover state works, though. :\ Only detaching the instance and then re-creating the interaction seems to work but then you lose the component-ness. If you try to create the on-click, play/pause it will show your video under the dropdown in the click interaction but it's grayed out/unclickable.

[@Kimoartcave]

In general, I have some issues with the trigger type of the interactions in Figma, some can't be used at the component level, and some can be used if we add the interaction before converting the layers to components. The same goes for animation types. So I usually do this in case I face a problem. Make my design, add the interactions, and then convert the design to the component.

[@dale_moore]

@@KimoartcaveThanks for the response! I ended up solving it yesterday. Using both the hover and the mouse up interactions seems to work when adding the component on a different Figma page. Using click alongside hover didn't. I'll try the tip though about adding the interaction before making a component in the future.

[@Kimoartcave]

@dale_moore ok, that is an interesting way. Thanks for sharing it. I will give it a try.

[@fariztechpr]

Bro which tool is best xd or figma..i am very confused about it

[@Kimoartcave]

It really depends on your own preferences! I really prefer the Figma's community, also its advance features. However, I recommend working with more than one tool.

[@fariztechpr]

@@Kimoartcave ok

[@chri82s]

Very nice. I'm just missing a timeline for the player.

[@Kimoartcave]

Nit sure if we can connect variables to attributes related to video. (It should be not possible) in that case we can define 10 sec skiper for example. But for timeline we might be able to just fake it. Looking forward to get more feature regarding videos in future.