Figma UX tutorial for beginners - Prototype

This beginner friendly tutorial video covers how to create a prototype with Figma. A prototype is an interactive representation of a product design, which UX teams use for testing before launch. As a UIUX designer, I create prototypes for all of my designs, after wireframing and mockups. By the end of this Figma tutorial, you will learn the main interactions you need to know to create a prototype: page-level vertical scroll, component level horizontal scroll, cross-pages interactions, and modals. I will also give you three more tips as a bonus.

Intro: (0:00)
Create a Figma prototype link: (1:13)
Page-level vertical scroll: (2:39)
Component-level horizontal scroll: (4:13)
Cross-pages interaction: (5:42)
Overlay/modal: (7:40)
Bonus tips: (9:07)

[AlienaCai]

I might have accidentally removed one of your comment when I wanted to pin it. "Fixed Position" has been moved to the prototype tab.

[dondiwauripo]

Wireframe, Design, and Prototype in less than an hour and just three tutorials, I am officially a Figma Professional. Thank you😁😁

[jeraldgarner]

You are one of the BEST instructors I have viewed on the Internet! You are clear and concise. I have had such a hard time seeking to have a mobile services on demand app made. I have been a website designer for 20 years and could not see myself or afford to pay $20K for an app to be developed that was actually a common design. You are an angel!

[victorcaique]

Hi, I'm from Brazil, and there isn't much content in Portuguese about figma, I'm glad I found your channel, it helps me a lot with my studies ☺️

[RahmaDiab]

I am a ux researcher trying to level-up my Figma skills. The wireframe, mockup and prototype videos have been extremely helpful! Thanks a lot!

[melisa]

I love your Figma Tutorials they are very simple and easy to undestand. Thank you so much for you dedication! 🥰

[EmpoweredLady]

One of the most informative video, useful and something that we all really need! Please continue making such videos that are applicable to everyday designers.

[phillipbere]

As a newbie in UX design this is the kind of content one would expect. Simple, straightforward I am moving along with you as you explain

[AbdussalamPopoola]

I love how you gave a brief of what to expect in the intro 🔥. Great tutorial too!

[hillcipher]

Actually learned a lot today, in just 10 minutes. Very well curated. Thank you, Aliena!

[ishmaelnaga]

Daamn...UI designing has never been clearer.Your such a lifesaver

[nicolasturek]

“Simplicity is the ultimate sophistication” - Leonardo Da Vinci

Your videos are straight and to the point. Sometimes I forget how to use certain features as a designer and need to watch videos quickly at double speed to remind myself. The way you have edited and broken down everything for understanding is perfect. Thank you!

[KuyaJQ]

Not even 4mins in, and I already liked and subscribed. Straight to the point and effective. You're the best, Miss Aliena!

[amadeusburgeois]

hi, i just started learning figma this week and this has been a very good lesson for me. Hope you continue to keep doing more of these. Thank you so much for your hard work!

[cesarghful]

You make it look so simple, and it actually is but this is a great summary and explanation. Thanks!

[omarmessam]

This is the most valuable 10 mins video I've seen in my life 😍😍

[AigoshaN-zhsv]

omg, I really didn`t know how much effort designers do. they are so attentive🔥

[TilSkywalker]

Great video! Straight to the point, no unnecessary filler stuff. Keep up the amazing work :)

[elisabettadonato]

It's amazing how simple it is to learn with your videos. Thank you very much

[shameika]

Not the run down plus the recap!! Girl you are an amazing teacher!