Figma UX tutorial for beginners - Prototype

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ม.ค. 2025

ความคิดเห็น • 383

  • @AlienaCai
    @AlienaCai  ปีที่แล้ว +96

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

    • @ELBEKISMOILOV-o1k
      @ELBEKISMOILOV-o1k ปีที่แล้ว

      Thanks a lot I have learned many things

    • @EpicentroDigital
      @EpicentroDigital ปีที่แล้ว

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

    • @yashikant5819
      @yashikant5819 10 หลายเดือนก่อน

      😆

    • @mahiadhikari5161
      @mahiadhikari5161 8 หลายเดือนก่อน +1

      you save me thanks

    • @yusurkc368
      @yusurkc368 7 หลายเดือนก่อน

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

  • @dondiwauripo
    @dondiwauripo ปีที่แล้ว +152

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

    • @AlienaCai
      @AlienaCai  ปีที่แล้ว +9

      Great to hear!

  • @phillipbere2866
    @phillipbere2866 ปีที่แล้ว +17

    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

  • @jeraldgarner1636
    @jeraldgarner1636 ปีที่แล้ว +44

    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!

  • @omarmessam
    @omarmessam 2 ปีที่แล้ว +42

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

    • @AlienaCai
      @AlienaCai  2 ปีที่แล้ว +1

      Haha thank you Omar!

    • @timtulloch3314
      @timtulloch3314 ปีที่แล้ว

      Very helpful - thank you!

  • @RahmaDiab
    @RahmaDiab ปีที่แล้ว +13

    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!

    • @talonxavier9675
      @talonxavier9675 4 หลายเดือนก่อน

      Bro teach me ux research please

  • @EmpoweredLady
    @EmpoweredLady 2 ปีที่แล้ว +44

    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.

  • @AlienaCai
    @AlienaCai  2 ปีที่แล้ว +8

    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: th-cam.com/video/D4NyQ5iOMF0/w-d-xo.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.

  • @jasoncabreros
    @jasoncabreros 3 หลายเดือนก่อน +2

    Just started learning Figma. Great video, easy to follow, I appreciate no background music and the use of wireframes so no distracting images as well.

  • @Author_SoftwareDesigner
    @Author_SoftwareDesigner 2 หลายเดือนก่อน +3

    Wow, this was incredible. I have watched over 50 videos over the past 3 years. This is by far the clearest and most effient video on the subject I've seen to date. Excellent instruction with clear examples. You explain every step, and how what to click on every step of the way. Well-done!

    • @AlienaCai
      @AlienaCai  2 หลายเดือนก่อน

      You're welcome! 🙏🏼

  • @positivehandnegativehand
    @positivehandnegativehand 11 หลายเดือนก่อน +1

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

  • @TheRunner3D
    @TheRunner3D 2 ปีที่แล้ว +4

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

    • @AlienaCai
      @AlienaCai  ปีที่แล้ว +1

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

    • @ahmadmujahid-zk5rd
      @ahmadmujahid-zk5rd 3 หลายเดือนก่อน

      I know right. this is mind blowing

  • @shameika120
    @shameika120 9 หลายเดือนก่อน +1

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

  • @wesedmiston6824
    @wesedmiston6824 หลายเดือนก่อน +1

    This is exactly how all TH-cam tutorials should be conducted.
    Great job

  • @NotNykoh
    @NotNykoh 9 หลายเดือนก่อน +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
      @AlienaCai  9 หลายเดือนก่อน

      You are so welcome!

  • @victorcaique4554
    @victorcaique4554 6 หลายเดือนก่อน +2

    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 ☺️

    • @AlienaCai
      @AlienaCai  6 หลายเดือนก่อน

      Happy to help!

  • @ArtIndeed
    @ArtIndeed 4 หลายเดือนก่อน +2

    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 !

  • @azhou410
    @azhou410 3 หลายเดือนก่อน

    Hi Aliena, thank you so much for making these videos!! I just want you to know that they are very high quality and super helpful! They are dense in information but also presented in a very clear and straightforward way. Can't imagine how many hours you took to put these together, really, hats off to you!! I hope to see more of these coming.

  • @TilSkywalker
    @TilSkywalker ปีที่แล้ว +8

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

  • @reflectmagazin6375
    @reflectmagazin6375 ปีที่แล้ว +2

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

  • @p-de-pera
    @p-de-pera 7 หลายเดือนก่อน +1

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

    • @AlienaCai
      @AlienaCai  7 หลายเดือนก่อน

      I'm so glad!

  • @KuyaJQ
    @KuyaJQ 8 หลายเดือนก่อน

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

  • @melisa3837
    @melisa3837 2 ปีที่แล้ว +12

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

  • @ishmaelnaga8628
    @ishmaelnaga8628 ปีที่แล้ว

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

  • @PatFlynn-p8q
    @PatFlynn-p8q 2 หลายเดือนก่อน

    Thank you so much for this. I was completely lost this morning but now I have my first three pages of my prototype done.

  • @prateekverma6751
    @prateekverma6751 ปีที่แล้ว +2

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

    • @AlienaCai
      @AlienaCai  ปีที่แล้ว +1

      My pleasure 😊

  • @amadeusburgeois9950
    @amadeusburgeois9950 7 หลายเดือนก่อน +1

    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!

  • @AbdussalamPopoola
    @AbdussalamPopoola 2 ปีที่แล้ว +4

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

  • @AigoshaN-zh6sv
    @AigoshaN-zh6sv 9 หลายเดือนก่อน +3

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

    • @AlienaCai
      @AlienaCai  9 หลายเดือนก่อน +1

      Right?! Glad you found my video 😃

  • @Sand-coffee
    @Sand-coffee 2 หลายเดือนก่อน

    I have no words for how good this is. Thank you so much Aliena!!

  • @NodenSherpa-d5x
    @NodenSherpa-d5x 4 หลายเดือนก่อน

    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

  • @rgmazon
    @rgmazon 3 หลายเดือนก่อน

    the easiest figma tutorial i've seen... now i'm ready to apply on ux/ui position! thanks a lot!

  • @reallogick5011
    @reallogick5011 4 หลายเดือนก่อน +1

    i'm so short of words, you deserve the all the best life could offer....thank you so much for this tutorial 🙏🙏🙏

  • @SaebMsarwa
    @SaebMsarwa 3 หลายเดือนก่อน

    Love it, simple enough for me to prototype before dev phase.
    Thank you so much, direct and precise and full of information.

  • @FKGraphix1
    @FKGraphix1 7 หลายเดือนก่อน

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

  • @juniorvalenciaoficial
    @juniorvalenciaoficial 5 หลายเดือนก่อน

    I usually never comment but your video was just off the chain. It was super great and I loved the recaps. You got a new sub!

  • @vishnuramesh350
    @vishnuramesh350 ปีที่แล้ว +4

    You've really simplified the concepts. Great work.

    • @AlienaCai
      @AlienaCai  ปีที่แล้ว +1

      Thanks a ton

    • @vishnuramesh350
      @vishnuramesh350 ปีที่แล้ว

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

  • @cinamoon_lol
    @cinamoon_lol หลายเดือนก่อน

    all of these tutorials.... are BLESSINGS
    THANK U SO MUCHHHHHH

  • @ahmadmujahid-zk5rd
    @ahmadmujahid-zk5rd 3 หลายเดือนก่อน

    This is simply mind blowing, to think I could learn this much in ten minutes. thank you

  • @nikkyisrael260
    @nikkyisrael260 ปีที่แล้ว +2

    This is explained so explicitly. Thank you.

  • @samratpatel8060
    @samratpatel8060 2 หลายเดือนก่อน

    best video on figma prototyping , short and concise

  • @musengechilumbu
    @musengechilumbu 10 หลายเดือนก่อน +1

    this is more helpful than paid tutorials. well done.

  • @rabahalishah5124
    @rabahalishah5124 ปีที่แล้ว

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

  • @hillcipher
    @hillcipher ปีที่แล้ว +2

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

  • @scrappy2082
    @scrappy2082 หลายเดือนก่อน

    in the span of 11 minutes you taught me more how to use this thing then my college professor did in weeks! 😅 thank you!!!

  • @vpagar
    @vpagar 4 หลายเดือนก่อน

    Just loved the way you taught. Whenever my platform launches, credits are to you also.

  • @blackandwhite681
    @blackandwhite681 3 หลายเดือนก่อน

    Your video deserve many more views, comments, and engagement.

  • @cesarghful
    @cesarghful ปีที่แล้ว +1

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

  • @SubrataChandraRoy-k5c
    @SubrataChandraRoy-k5c 6 หลายเดือนก่อน

    Thanks for sharing this video. I was struggling to learn prototyping. You made my journey easy! So many thanks. Keep uploading this type of videos.

  • @eemmooonn
    @eemmooonn ปีที่แล้ว

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

  • @IbrahimSowunmi
    @IbrahimSowunmi ปีที่แล้ว +3

    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.

    • @Grace.Idiare
      @Grace.Idiare 5 หลายเดือนก่อน

      Thanks!

    • @oneeritrea
      @oneeritrea 16 ชั่วโมงที่ผ่านมา

      Thanks Ibrahim, you saved me alot of frustration and time. ❤🎉

  • @santhuruskml
    @santhuruskml หลายเดือนก่อน

    unbelievable i made it without getting bored...thank you and i like you way of teaching...

    • @AlienaCai
      @AlienaCai  28 วันที่ผ่านมา

      You’re welcome! 😁

  • @luannacamino5969
    @luannacamino5969 2 หลายเดือนก่อน

    Girl, you are INSANE
    THANK YOU THANK YOU SO MUUUUCH

  • @austinwhitbeck3362
    @austinwhitbeck3362 5 หลายเดือนก่อน

    Great tutorial! Teaching a front-end dev some design cross training. Appreciate your examples, and style!

  • @sumyathnin3413
    @sumyathnin3413 2 ปีที่แล้ว +7

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

    • @AlienaCai
      @AlienaCai  2 ปีที่แล้ว +2

      Thank you!

  • @abrahambrown7230
    @abrahambrown7230 16 วันที่ผ่านมา

    This teaching is incredible
    I've learned a lot.
    Thank you

  • @alexsensei_hi
    @alexsensei_hi ปีที่แล้ว +4

    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.

    • @mangoslices29
      @mangoslices29 ปีที่แล้ว +1

      Thank you so much, I was so confused.

    • @idesiignit698
      @idesiignit698 ปีที่แล้ว

      @@mangoslices29 Me too thank you!

    • @MeherunNisat
      @MeherunNisat 4 หลายเดือนก่อน

      Thank you

  • @cherrysone39
    @cherrysone39 4 หลายเดือนก่อน

    SUPER CLEAR AND EASY TO BE FOLLOWED, OMG AMAZING! THANK YOU!

  • @rhondasuhrie1703
    @rhondasuhrie1703 ปีที่แล้ว

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

  • @tyeishapinnock4181
    @tyeishapinnock4181 7 หลายเดือนก่อน +1

    You just gained a new subscriber, this was extremely helpful! Thanks so much :)

    • @AlienaCai
      @AlienaCai  7 หลายเดือนก่อน

      Thanks for the sub!

  • @JustinDangerpants
    @JustinDangerpants 5 หลายเดือนก่อน

    Thanks for this! Quick, clear, and covered the stuff I needed to start out

  • @hernanhidalgo8246
    @hernanhidalgo8246 ปีที่แล้ว +1

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

  • @aaronahado2389
    @aaronahado2389 3 หลายเดือนก่อน

    Your teaching is really the best 👌

  • @BattousaiTheeban
    @BattousaiTheeban 6 หลายเดือนก่อน

    What a solid video in just 10 minutes! Thank you so much!

  • @maticsmentor
    @maticsmentor 2 ปีที่แล้ว +1

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

  • @vladislavla1612
    @vladislavla1612 ปีที่แล้ว

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

  • @scottlei3563
    @scottlei3563 2 ปีที่แล้ว +1

    Thanks for the tutorial! Keen to see ppls prototypes 🙂

  • @soujanyac8922
    @soujanyac8922 7 หลายเดือนก่อน

    Unbelievably helpful!! U have no idea! Thank u so much! Keep up your great work ❤

  • @poncardas
    @poncardas ปีที่แล้ว +3

    Really good tutorial! Straight to the point!

  • @Muhammad_Nizzal_Malik
    @Muhammad_Nizzal_Malik 9 หลายเดือนก่อน

    Dear may Allah blesses you
    You are the best instructor on TH-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

  • @Joe-pv9ti
    @Joe-pv9ti ปีที่แล้ว +1

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

    • @AlienaCai
      @AlienaCai  ปีที่แล้ว

      I appreciate that!

  • @elisabettadonato8413
    @elisabettadonato8413 ปีที่แล้ว +1

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

  • @dc33333
    @dc33333 ปีที่แล้ว

    Incredible!!! This is better than the Figma content. I am 100% sure your company will be successful. Excellent communicator.

  • @shivanibadola5643
    @shivanibadola5643 ปีที่แล้ว +1

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

  • @dguy-xk4fc
    @dguy-xk4fc ปีที่แล้ว

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

  • @steffengroenandersen
    @steffengroenandersen ปีที่แล้ว +1

    Top notch material for an aspiring developer such as myself!
    One note: this video has not been added to your playlist.

    • @AlienaCai
      @AlienaCai  ปีที่แล้ว +2

      Oh my god thanks for letting me know that! I’m adding that right now.

  • @KyleNacci
    @KyleNacci ปีที่แล้ว +3

    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: th-cam.com/video/_4eGjA3Uh9o/w-d-xo.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.

  • @janoo85
    @janoo85 หลายเดือนก่อน

    The best tutorial i ever see :) I just get it now what i didint get on the one mont kurs :)

  • @EstherEdemumoh
    @EstherEdemumoh หลายเดือนก่อน

    I'm so happy I cane across this video 🥺🥺

  • @heyitsgee
    @heyitsgee ปีที่แล้ว +1

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

    • @AlienaCai
      @AlienaCai  ปีที่แล้ว

      Glad it was helpful!

  • @neeenaaaa
    @neeenaaaa ปีที่แล้ว

    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?

  • @bobdaawid2218
    @bobdaawid2218 2 ปีที่แล้ว

    Really needed to learn the horizontal scroll
    Thanks alot Aliena

  • @cutyraw
    @cutyraw 2 หลายเดือนก่อน

    I am impressed by the learning was very simple, thanks alot.

  • @pragyaparakh4377
    @pragyaparakh4377 9 หลายเดือนก่อน

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

  • @VeronicaIfeomaOkeke1
    @VeronicaIfeomaOkeke1 ปีที่แล้ว

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

  • @sarahbark_teccomaudiovisua3389
    @sarahbark_teccomaudiovisua3389 6 หลายเดือนก่อน

    Thank you so much for this video it's saving my life. So well explained and in a quick way. Thanks a lot !

  • @knsk232
    @knsk232 ปีที่แล้ว

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

  • @aabidfaiyaz
    @aabidfaiyaz 8 หลายเดือนก่อน

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

  • @nakawesijuliet2363
    @nakawesijuliet2363 ปีที่แล้ว

    Aliena ,am really appreciative and learning everyday,good job

  • @garimamartolia1714
    @garimamartolia1714 8 หลายเดือนก่อน

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

  • @RichieBoahin
    @RichieBoahin ปีที่แล้ว +1

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

    • @AlienaCai
      @AlienaCai  ปีที่แล้ว

      I appreciate that!

  • @lele_77lele75
    @lele_77lele75 ปีที่แล้ว +1

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

  • @akinremiakinbola866
    @akinremiakinbola866 6 หลายเดือนก่อน

    I love the way you teach…….thank you 🙏🙏

  • @xiaohanzhang4907
    @xiaohanzhang4907 ปีที่แล้ว +1

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

  • @AlfianAnjar
    @AlfianAnjar 6 หลายเดือนก่อน

    OMG This is the best explanation i ever learn
    Thanks Alien. Regards from indonesia

  • @thisgurlgotrizz
    @thisgurlgotrizz 5 หลายเดือนก่อน

    this is my first day on figma and i am already an expert yay

  • @weIene
    @weIene 4 หลายเดือนก่อน

    This was an extremely good tutorial!

  • @sachinyr3892
    @sachinyr3892 6 หลายเดือนก่อน

    Best teacher ever 🙇

  • @kinetic_kane9033
    @kinetic_kane9033 ปีที่แล้ว +1

    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.

  • @our_abbott
    @our_abbott 5 หลายเดือนก่อน

    Thankyou so much Aliena, you save my time😍