Figma UX tutorial for beginners - Prototype

Подписаться 95 тыс.

Просмотров 121 тыс.

50% 1

Link to Figma: psxid.figma.com/mtvfdvfjvpps
Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-...
This video is part of my Figma UX tutorial series: • Figma UX tutorial for ...
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)

Наука

Опубликовано:

8 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 253

@AlienaCai 10 месяцев назад

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

@user-gs8cp8eu9l 6 месяцев назад

Thanks a lot I have learned many things

@EpicentroDigital 4 месяца назад

Just select the header and click on prototype tab. Repeat the same process for footer.

@yashikant5819 3 месяца назад

😆

@mahiadhikari5161 7 дней назад

you save me thanks

@yusurkc368 20 часов назад

i was wondering about it, then I used my brain and found it by myself 😅

@dondiwauripo 11 месяцев назад

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

@AlienaCai 11 месяцев назад

Great to hear!

@FKGraphix1 День назад

I have never seen a teacher like you.We have learned alot of things in few minutes. Thank you so much❤

@jeraldgarner1636 7 месяцев назад

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!

@KuyaJQ 7 дней назад

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

@phillipbere2866 5 месяцев назад

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

@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.

@melisa3837 Год назад

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

@RahmaDiab 9 месяцев назад

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!

@hillcipher 11 месяцев назад

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

@AbdussalamPopoola Год назад

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

@nicolasturek2413 3 месяца назад

“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!

@ishmaelnaga8628 5 месяцев назад

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

@cesarghful 9 месяцев назад

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

@shameika120 2 месяца назад

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

@amadeusburgeois9950 День назад

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!

@elisabettadonato8413 Год назад

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

@TilSkywalker 11 месяцев назад

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

@AlienaCai 11 месяцев назад

Thank you!

@omarmessam Год назад

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

@AlienaCai Год назад

Haha thank you Omar!

@timtulloch3314 Год назад

Very helpful - thank you!

@rhondasuhrie1703 9 месяцев назад

You make a really great teacher. You are very easy to understand and follow.

@garimamartolia1714 17 дней назад

Just amazing, simple, quick and easy to understand. Chefs kiss :D

@nikkyisrael260 9 месяцев назад

This is explained so explicitly. Thank you.

@poncardas 8 месяцев назад

Really good tutorial! Straight to the point!

@dguy-xk4fc 4 месяца назад

What a great tutorial, quickly and to the point. Thanks for the msg on top as well!

@AigoshaN-zh6sv Месяц назад

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

@AlienaCai Месяц назад

Right?! Glad you found my video 😃

@JochumTed 11 месяцев назад

Clear and to the point. Love it! Great job and Thank you

@rabahalishah5124 8 месяцев назад

Thank you soo much Aliena I have made a complete prototype of my web app just by watching you 5 videos series.

@hernanhidalgo8246 Год назад

Deeply in love with your videos! Thank You!!!

@reflectmagazin6375 5 месяцев назад

Woow I watched many of the courses about prototyping in Figma, but I only understood prototyping on your channel. Thank you very much!

@vishnuramesh350 Год назад

You've really simplified the concepts. Great work.

@AlienaCai Год назад

Thanks a ton

@vishnuramesh350 Год назад

@@AlienaCai I haven’t finished my Ux course, yet you’ve simplified it way too much.

@euaggeliavountouraki1113 Год назад

Amazing and super easy to follow video! Thank you very much! ❤️

@maticsmentor Год назад

Hats off, Aliena. Keep up the good work for sharing informative videos.

@shivanibadola5643 8 месяцев назад

Really helpful, just started to learn prototyping and it really helped, Thankyou

@vladislavla1612 4 месяца назад

Thanks Aliena! I'm beginner at UI, your style of taching very cool!

@pragyaparakh4377 Месяц назад

I am glad i stumbled upon this page, if you teach I might master everything

@VeronicaIfeomaOkeke1 7 месяцев назад

You are good at it, you mad the teaching short yet loaded. Thanks

@knsk232 8 месяцев назад

Wow. Thank u so much for this easy to follow video on Figma prototyping. Really saved my time🥰🥰

@scottlei3563 Год назад

Thanks for the tutorial! Keen to see ppls prototypes 🙂

@bobdaawid2218 Год назад

Really needed to learn the horizontal scroll Thanks alot Aliena

@prateekverma6751 Год назад

For soo many days I was searching for a good and easy way to understand prototyping the in figma..thx for it😁💪🏻

@AlienaCai Год назад

My pleasure 😊

@ronitsagiv 11 месяцев назад

Thank you for this tutorial, it's very clear! you helped me a lot! love you.

@h4zmeister Год назад

Hey, your videos are really helpful! thanks a lot for these! Easy and simple!

@nuels-bukka252 9 месяцев назад

thank you so much for your simple and understandable videos, its very helpful.

@thnt123 14 дней назад

so easy to understand and practice thanks a lot

@aabidfaiyaz 21 день назад

This was what I just needed. This great for people getting started…

@eemmooonn 5 месяцев назад

Please Continue the Figma UX Tutorial Series. Your videos helped me a lot.

@fear_less_2020 Год назад

Simple and excellent tutorial! Thank you!

@mervetemur8147 Год назад

thank you so much for this amazing video, it helped me a lot

@RichieBoahin 11 месяцев назад

You're just on point. This is so useful. Thanks for your dedication

@AlienaCai 11 месяцев назад

I appreciate that!

@mollywalter7355 Год назад

Thank you so much for this clear and easy to follow instruction!

@AlienaCai Год назад

Glad it was helpful!

@lele_77lele75 Год назад

i love the way you explain it make it very simple please keep going ❤❤❤❤❤❤

@VIKIBRANDSKE Год назад

Very interesting and you simplify everything to make someone really follow what you teach.. 😁

@NotNykoh 2 месяца назад

My goodness thank you so much. I became sick early this semester and missed a bunch of class. I was so worried I wouldn’t be able to understand this but you made it so easy to comprehend. God bless you

@AlienaCai Месяц назад

You are so welcome!

@AdeMolajo Год назад

3/3 of an awesome collection of videos. Thanks alot.

@ronaldolamont 5 месяцев назад

Great video! Your an awesome teacher Aliena!! 😀

@nakawesijuliet2363 11 месяцев назад

Aliena ,am really appreciative and learning everyday,good job

@TheRunner3D Год назад

its criminal how unpopular these are, best guides ive found so far

@AlienaCai Год назад

Thank you 🥹 your comments mean a lot to me. Would appreciate any comment/ sharing as support.

@chrisshawn2787 3 месяца назад

Subscribed you taught it so well... please continue to make more content like this

@mgkltime6818 Год назад

Wow!!! This, you, presented a fabulous informational video. I learned so much 🤗👍

@Joe-pv9ti 11 месяцев назад

You're goated with the sauce! Thanks for such a great tutorial

@AlienaCai 11 месяцев назад

I appreciate that!

@cook2030 3 месяца назад

Hi Aliena, thank you so much for all your help!!!

@cook2030 Год назад

This was so awesome, thank you so much very helpful!!!

@rush2004 6 месяцев назад

Great! like this tut 🤩 - Thanks Aliena

@xiaohanzhang4907 7 месяцев назад

Great video, just what I needed! Thank you, Aliena

@AlienaCai 7 месяцев назад

So glad!

@beneton1121 6 месяцев назад

As beginner this is really help. Thank you!

@alexanderabenoja8177 Год назад

This is soooo helpful! Thank you!

@princepeniel8796 10 месяцев назад

It was very helpful Aliena. Thanks a lot!!

@heyitsgee 6 месяцев назад

thanks for this very succinct tutorial on prototype! very easy to follow and apply directly

@AlienaCai 6 месяцев назад

Glad it was helpful!

@sumyathnin3413 Год назад

What a fantastic video for newbies. Please make videos for advanced figma users. I'm looking forward to it.🥰🤩

@AlienaCai Год назад

Thank you!

@chrisshawn2787 3 месяца назад

Thank you that taught me a lot

@user-hu1lk9ej4z 5 месяцев назад

amazing! I did learn a lot today Thanks for sharing!!

@Jayboogy1041 6 месяцев назад

You are an amazing teacher keep up the good work and thanks

@msFiBi 2 месяца назад

Thank you very much. That was smooth and informative ♥

@javis9950 3 месяца назад

Very well documented and illustrated!! I just went from rank newb to private

@abhijeetgarud3034 2 месяца назад

Thanks ! This is a huge help. You earned one more subscriber !

@AlaHussen Год назад

This video is extremely helpful, thank you Aliena!!

@AlienaCai Год назад

So glad to hear that

@AlienaCai Год назад

As promised, the prototype tutorial is here ✌✌✌ Link to Figma: psxid.figma.com/mtvfdvfjvpps Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-cb44ct This video is part of my Figma UX tutorial series: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-D4NyQ5iOMF0.html 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.

@juls2334 Год назад

Thank you so much for this tutorial, Aliena!

@AlienaCai Год назад

Glad it was helpful!

@modelhive 11 дней назад

Great video! Thank you.

@frankytube100 6 месяцев назад

Thx for your helpful tutorial!

@user-dt1nc5yk9e 3 месяца назад

Very helpful, Thank you so much.

@rogermortimer111 2 дня назад

Great tutorial!

@kramdetorres9297 4 месяца назад

ive learned a lot thanks

@alviaariana5568 Год назад

thank you for making this video its help me to understand prototype✨👍🏼

@AlienaCai Год назад

So glad to hear that

@mayamoisherif2833 Год назад

Thank you so much!! You’re a life saver

@neeenaaaa 11 месяцев назад

I ve been wanting to start learning about UX design from scratch since a long time but I couldn't find any video that is clear to the point. But your videos are chefs kiss, exactly what I wanted. Thank you so much 😊 I wanted to know whether as a complete beginner is there anything else that I need to learn before hand or starting with your figma videos is enough?

@alakinamann2069 2 дня назад

amazing thanks, so clear

@komatsu5775 Месяц назад

thank you very much Aliena!!!!!!!

@igortlusty9189 26 дней назад

Nice video, thanks!

@musengechilumbu 3 месяца назад

this is more helpful than paid tutorials. well done.

@mattdetwiler6549 9 месяцев назад

Thank you so much Aliena!

@antran1322 Год назад

This video is really helpful!!! Thank you so much

@AlienaCai Год назад

You're so welcome!

@saradia9263 4 месяца назад

Very helpful tutorial 👍🏼👍🏼

@user-do3pj1uo1e 6 месяцев назад

thanks a lot it was so helpful

@muhammadhusniromdhoni3879 11 месяцев назад

VERRY HELPFULL, TYSM!

@AlienaCai 11 месяцев назад

Glad it helped!

@shrinidhinarayanan7425 Год назад

Amazingly helpful video! Thank you so much :)

@AlienaCai Год назад

You're so welcome!

@melodylouisegacho3484 9 месяцев назад

This tutorial is awesome❤

@aloksen1321 5 месяцев назад

Very helpful video thank you

@NVRREST 3 месяца назад

This was great thank you

@IbrahimSowunmi Год назад

At the @11:00 minute mark to make a header or a footer sticky go prototype tab and set the constraints to bottom right. The tutorial is a bit date but otherwise good tutorial.