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.
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: ua-cam.com/video/D4NyQ5iOMF0/v-deo.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.
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!
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.
Awesome tutorial! Thank you for the challenge, too! For the fixed-position part, I think figma changed the site, so the tool is no longer below the position part, and instead, I found it in the Prototype tab under Scroll Behavior.
Thankyou so much! I have just gotten back into the UI UX field after I dont know... maybe 10 years. There has been a lot of changes. I have recently been asked to help out with this company in UI design... They need FIGMA, And now I know it because of you sister... Thankyou
Hi, im a final year student majoring in international relations but i came across your vids because im interested in learning new skills while waiting for my thesis defence date. As mentioned on the video, here is my prototype for a trading app. Please spare me because I am a newb in this field=))
Well, not sure what I´m doing wrong here since I am following the instructions step by step, but the last content of the row is cut in half when viewing on prototype mode. Help, anyone? Ps.: I am designing a desktop version.
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!
Heyy...can anyone please explain that why at 5:19 for horizontal scrolling of cards there is a exclamation mark which says content of frame needs to be bigger than the frame. Thanks alot!
Super helpful! A few tips that may be helpful to others while they follow along: 1) I recommend slowing the video down to 0.5X speed. I found this made it much easier to follow along without getting lost. 2) It looks like Figma has changed the way to fix a component since you recorded this. It's now in the prototype tab rather than the Design tab, as explained in this video: ua-cam.com/video/_4eGjA3Uh9o/v-deo.html 3) When you copy and paste the component at the end, make sure to check the icon of the component you're editing to confirm it's the one with four dots (the master component) and not one of the ones with the diamond icons (the sub-components). I was stuck for a while, confused about why changing the color of the component wasn't applying to the others, until I realized that I had accidentally moved the master component into the page and was editing a sub-component.
Mam i have to make a fully functional prototype demo ready for a hackathon my idea has got selected but for next round i don't know how to make a fully functional prototype can you please help because i also need to code for that but I don't a lot about it please help
back button is not working on figma even though I have made the connections. Rest all the buttons are working. Can somebody tell me what might have gone wrong?
I feel so luckly had found your channel, thank you so much! I have seen a lot of videos of figma but with you I really understood how works and I feel so motivated right now, big hug from Chile! 💛
@4:02 in the prototype section i'm unable to see the bottom bar. i have done everything in the video but still it's not showing in the prototype section. Please help me.
To anyone facing a problem where the fixed scrolling checkbox in constraints isn't coming, there was an update where they moved the feature to the Prototype tab.
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
Dear may Allah blesses you You are the best instructor on UA-cam as for as I'm finding learning again and again i have to come on your channel so stay close to us and teach us more about UI & UX
I might have accidentally removed one of your comment when I wanted to pin it. "Fixed Position" has been moved to the prototype tab.
Thanks a lot I have learned many things
Just select the header and click on prototype tab. Repeat the same process for footer.
😆
you save me thanks
i was wondering about it, then I used my brain and found it by myself 😅
Wireframe, Design, and Prototype in less than an hour and just three tutorials, I am officially a Figma Professional. Thank you😁😁
Great to hear!
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.
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: ua-cam.com/video/D4NyQ5iOMF0/v-deo.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.
This is the most valuable 10 mins video I've seen in my life 😍😍
Haha thank you Omar!
Very helpful - thank you!
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!
Totally agree
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
I love your Figma Tutorials they are very simple and easy to undestand. Thank you so much for you dedication! 🥰
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!
Bro teach me ux research please
This function seems to have changed in Figma. I got the sticky under prototype. Scroll behavior 'fixed.'
Literally you deserve subscribe like I'm very lucky for I'm click this video
Thank youuu
I really missed out on all these topics while I was doing a course on figma . Thank you so much for easily explaining all these . Respect from India !
Great video! Straight to the point, no unnecessary filler stuff. Keep up the amazing work :)
Thank you!
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.
Thanks!
What a fantastic video for newbies. Please make videos for advanced figma users. I'm looking forward to it.🥰🤩
Thank you!
Awesome tutorial! Thank you for the challenge, too!
For the fixed-position part, I think figma changed the site, so the tool is no longer below the position part, and instead, I found it in the Prototype tab under Scroll Behavior.
Thank you so much, I was so confused.
@@lclerjuste3478 Me too thank you!
Thank you
Thankyou so much! I have just gotten back into the UI UX field after I dont know... maybe 10 years. There has been a lot of changes. I have recently been asked to help out with this company in UI design... They need FIGMA, And now I know it because of you sister... Thankyou
omg, I really didn`t know how much effort designers do. they are so attentive🔥
Right?! Glad you found my video 😃
I have a question you keep saying right clique but my mac doesnt allow it what should i do??
Amazing and helpful. Thank you!
How would I modify this for creating a prototype primarily used ion a desktop in an enterprise environment?
U are the best ❤❤
thankkkk youuu very muchhh❤❤❤❤❤❤❤❤❤❤❤
Hi, im a final year student majoring in international relations but i came across your vids because im interested in learning new skills while waiting for my thesis defence date. As mentioned on the video, here is my prototype for a trading app. Please spare me because I am a newb in this field=))
Welcome to my channel! Thanks so much for sharing 🙌 (I can't see the link for some reason, did you include a link in this comment?)
Well, not sure what I´m doing wrong here since I am following the instructions step by step, but the last content of the row is cut in half when viewing on prototype mode. Help, anyone? Ps.: I am designing a desktop version.
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!
ive learned a lot thanks
Really good tutorial! Straight to the point!
This is explained so explicitly. Thank you.
Really helpful, just started to learn prototyping and it really helped, Thankyou
i'm so short of words, you deserve the all the best life could offer....thank you so much for this tutorial 🙏🙏🙏
Thank you so much, this video is really very helpful for me.
You've really simplified the concepts. Great work.
Thanks a ton
@@AlienaCai I haven’t finished my Ux course, yet you’ve simplified it way too much.
Heyy...can anyone please explain that why at 5:19 for horizontal scrolling of cards there is a exclamation mark which says content of frame needs to be bigger than the frame. Thanks alot!
For soo many days I was searching for a good and easy way to understand prototyping the in figma..thx for it😁💪🏻
My pleasure 😊
Super helpful! A few tips that may be helpful to others while they follow along:
1) I recommend slowing the video down to 0.5X speed. I found this made it much easier to follow along without getting lost.
2) It looks like Figma has changed the way to fix a component since you recorded this. It's now in the prototype tab rather than the Design tab, as explained in this video: ua-cam.com/video/_4eGjA3Uh9o/v-deo.html
3) When you copy and paste the component at the end, make sure to check the icon of the component you're editing to confirm it's the one with four dots (the master component) and not one of the ones with the diamond icons (the sub-components). I was stuck for a while, confused about why changing the color of the component wasn't applying to the others, until I realized that I had accidentally moved the master component into the page and was editing a sub-component.
I should have watched this before spending over 3 days on 7 Screens😭
Tho I haven't practiced it but I believe this video is very very explanatory and infact its straight forward
I love how you gave a brief of what to expect in the intro 🔥. Great tutorial too!
SUPER CLEAR AND EASY TO BE FOLLOWED, OMG AMAZING! THANK YOU!
Thank you very much. You are truly amazing. Well-planned and helpful video.
Woow I watched many of the courses about prototyping in Figma, but I only understood prototyping on your channel. Thank you very much!
its criminal how unpopular these are, best guides ive found so far
Thank you 🥹 your comments mean a lot to me. Would appreciate any comment/ sharing as support.
OMG This is the best explanation i ever learn
Thanks Alien. Regards from indonesia
Mam i have to make a fully functional prototype demo ready for a hackathon my idea has got selected but for next round i don't know how to make a fully functional prototype can you please help because i also need to code for that but I don't a lot about it please help
I am beginner, It's Riley help me a lot ❤❤❤ thankyou thankyou thankyou so much
this is awesome. Thank you @aliena. BTW, I did send you an email and hope you will find time to send a quick reply.
This was an extremely good tutorial!
This is mind blowing....
Please how can my website mockup is not fitting on the device screen. what should i do
Thanks for this! Quick, clear, and covered the stuff I needed to start out
back button is not working on figma even though I have made the connections. Rest all the buttons are working. Can somebody tell me what might have gone wrong?
I have a database structure in Excel format. Can I transfer the data into Figma?
great walkthrough video, thank you.
My figma does not have "fix position while scrolling bar" 😢 what can I do?
so as a component level layout. i can use this and then add photos etc as needed ? could i then sell this on etsy in templates?
I feel so luckly had found your channel, thank you so much! I have seen a lot of videos of figma but with you I really understood how works and I feel so motivated right now, big hug from Chile! 💛
I'm so glad!
@4:02 in the prototype section i'm unable to see the bottom bar. i have done everything in the video but still it's not showing in the prototype section. Please help me.
hi aliena, my figma not showing fix position when scrolling, do u know how to fix this?
Thank you so much
This video is really helpful
Hello ! This can be done with the free version?
I love how well you explain!
Thankyou so much Aliena, you save my time😍
Im Trying your process but the on the constraints, its not showing fix position and im Following you step by step. is there any one other way
this is the video i was looking for!
Do i have to use the iphone or selected frame or does it all work with making my own rectangle shape page
I Don't find a fixed position when scrolling please help me out
Why don't I have fixed position when scrolling option?
Amazing video , and easily able to understand
Thank you for saving hours off my assignment
You just gained a new subscriber, this was extremely helpful! Thanks so much :)
Thanks for the sub!
i love the way you explain it make it very simple please keep going ❤❤❤❤❤❤
I don't have fix position option does it come with paid version ?
Thanks for the tutorial! Keen to see ppls prototypes 🙂
Where is the fix position button now?! I can't see it anymore!
Can you show some interesting mockup?
Thanks for sharing valuable content
Thanks a lot, please make more videos on figma and adobe xd
Sure thing!
Thank you for these vids. :)))
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 ☺️
Happy to help!
thank you so much for this amazing video, it helped me a lot
I love the way you teach…….thank you 🙏🙏
madam i coudn,t see fixed position when scrolling option
Very helpful, Thank you so much.
Thank you so much
This helped a lot
To anyone facing a problem where the fixed scrolling checkbox in constraints isn't coming, there was an update where they moved the feature to the Prototype tab.
thankyou
If i prototype in figma, can i export it to use it in my website?
Actually learned a lot today, in just 10 minutes. Very well curated. Thank you, Aliena!
Very helpful video thank you
Super sister. You are my save time massively
Deeply in love with your videos! Thank You!!!
amazing video thankyou!
This is soooo helpful! Thank you!
can you make a video on figma plugins
I can’t find fixed position option on my Figma😭
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
You are so welcome!
Who are U ? Let me answer an angel 😇 tq Sista 😃
thanks for this very succinct tutorial on prototype! very easy to follow and apply directly
Glad it was helpful!
Dear may Allah blesses you
You are the best instructor on UA-cam as for as I'm finding learning again and again i have to come on your channel so stay close to us and teach us more about UI & UX
Very helpful tutorial 👍🏼👍🏼
Top notch material for an aspiring developer such as myself!
One note: this video has not been added to your playlist.
Oh my god thanks for letting me know that! I’m adding that right now.
amazing thanks, so clear
Hats off, Aliena. Keep up the good work for sharing informative videos.