Figma tutorial: Use video in prototypes

Figma is free to use. Sign up here: https://bit.ly/3msp0OV

To follow along, check out the Figma community resource file: https://www.figma.com/community/file/1165428770534888395

Video gives us the ability to enrich any user experience, making prototyping with real media crucial. In this tutorial, we’ll go over the basics of how video work in Figma, and use them in both simple and complex designs. For more information, check out our Help Center article here: https://help.figma.com/hc/en-us/articles/8878274530455-Add-video-to-prototypes

For more inspirations, check out the community playground file here: https://bit.ly/3gvSair

Learn more about:
- Interactive components: https://youtu.be/ReNbXhaL3Xk
- Smart animate: https://youtu.be/6Id4INKEwb8

00:00 Intro
00:48 Basic example
01:10 Import and resize video
02:00 Add video interactions
02:45 Advanced example
03:55 Use video with interactive component 1 (video thumbnail preview)
06:00 Use video with interactive component 2 (video player control)
07:48 Use video with smart animate
09:11 Outro

____________________________________________________

Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma

____________________________________________________

Music credit:
Floating by Smith The Mister https://smiththemister.bandcamp.com Smith The Mister https://bit.ly/Smith-The-Mister-YT
Free Download / Stream: https://bit.ly/floating-smith-the-mister Music promoted by Audio Library https://youtu.be/noTLm16pyRA

Video credit:
- Video by Nadezhda Moryak: https://www.pexels.com/video/panning-shot-of-seagulls-flying-in-the-sea-6187100/
- Video by Ruvim Miksanskiy: https://www.pexels.com/video/seal-on-the-beach-1526909/
- Video by Magda Ehlers: https://www.pexels.com/video/an-otter-swimming-2554576/

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #video