Figma UX tutorial for beginners - Mockup

Поделиться
HTML-код
  • Опубликовано: 20 сен 2024

Комментарии • 237

  • @ABSVabeautifulsunsetvlog
    @ABSVabeautifulsunsetvlog 2 года назад +129

    This channel is single handedly going to be the reason for my success as a UX designer. 😃

    • @AlienaCai
      @AlienaCai  2 года назад +11

      Thank you 🙏😃😃👍

    • @xcookie2
      @xcookie2 2 года назад +2

      @@AlienaCai For real! Your contents are GREAT and very useful, I just discovered your channel and I'm just super hyped to watch each of your video! Thank you so much Aliena for sharing your experience with us ❤️

    • @MrBabar06
      @MrBabar06 5 месяцев назад +1

      Totally agree. The videos are great. Are you a self learner or did you go to school to study UX UI?

  • @Mushba.
    @Mushba. 2 года назад +46

    Me: procrastinating on my UI/UX portfolio
    Aliena: uploads to motivate me
    Thank you for actually TEACHING instead of passively describing what u do. It's so helpful and appreciated 💚💚

    • @AlienaCai
      @AlienaCai  2 года назад +5

      You are so welcome! I've also procrastinated on updating my portfolio for months 😅 You are not alone. Let's do it together.

  • @The_Random_Tube
    @The_Random_Tube 5 месяцев назад +7

    You are a great teacher. God bless you. We need more of these tutorials 🙏🏾🙏🏾
    Love from Nigeria 🇳🇬

  • @mohammednettey5744
    @mohammednettey5744 8 месяцев назад +1

    I used to think too much about becoming a UX designer because I did not know where to start from. Thank you soo much Aliena for this amazing videos. Am watching this video all the way from West Africa in Ghana

  • @AlienaCai
    @AlienaCai  2 года назад +6

    Link to Figma: psxid.figma.com/mtvfdvfjvpps
    Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-cb44ct
    Previous episode on wireframe: ruclips.net/video/D4NyQ5iOMF0/видео.html

  • @chrisrowe6904
    @chrisrowe6904 2 года назад +15

    ✌I really like how you put this together. I recently started an online school for UI design. Your wireframe and this mockup video makes me feel better about what I am learning. 😊

    • @AlienaCai
      @AlienaCai  2 года назад

      I'm so glad to hear that. Keep going with your UI journey 🙌✌️

  • @user-pf8jj1uu1f
    @user-pf8jj1uu1f 5 месяцев назад +1

    You explained all the important points so simple and better than my UIUX instructor in college. No kidding !

  • @marcuscollins103
    @marcuscollins103 Год назад +5

    Excellent tutorial series for beginners! I'm a designer and have been looking to ad UX/UI to my portfolio. I'm also an Adobe junky and almost jumped right into Adobe XD however, Ive always wondered what the hype was around Figma, so I gave it a try first. I made my first wire frame watching your videos. It was so similar to illustrator that I picked it up very easily. I'm addicted to Figma and you've earned a like and subscribe. Thank you!

    • @AlienaCai
      @AlienaCai  Год назад

      Great to hear! Figma is so strong these days.

  • @varunchakravarthi9780
    @varunchakravarthi9780 Год назад +3

    Loved this video, thank you for sharing. Please keep posting more Figma Tutorials, it is so easy to follow and I love the length and pacing!

  • @vadivarasisuresh8786
    @vadivarasisuresh8786 2 года назад +4

    Started my first class today on Coursera.
    Probably i would reach figma after a couple of months. BTW got to learn a lot from this channel past a week on deciding whether to take up the course or not.
    Thanks.......

    • @AlienaCai
      @AlienaCai  2 года назад

      You are very welcome 🙏

  • @charliewinefield3644
    @charliewinefield3644 2 года назад +6

    Great tutorial! One of my favourite features on Figma is Auto-Layout as there is just so much you can do with it. Would be cool if you could do a tutorial on it and how to make mockups responsive, as that's something that I've found really useful in practice!

    • @AlienaCai
      @AlienaCai  2 года назад

      Thank you for the feedback. Noted 👍

  • @tihanav
    @tihanav 2 года назад +3

    This is so fun! You're a really great teacher. I did the wireframe tutorial yesterday and I'm planning on doing this mockup today :)

    • @AlienaCai
      @AlienaCai  2 года назад

      Yay! Thank you! and have fun 😄

  • @mervetemur8147
    @mervetemur8147 Год назад +3

    ✌ Thank you Aliena! I liked your way of teaching, you explained every detail in the process, so this video helped me out really much. Excited for the next one !

  • @tayyebbio
    @tayyebbio 17 дней назад

    Thank you Aliena for sharing these great toturials. I appreciate your efforts. Keep creating the great content.

    • @AlienaCai
      @AlienaCai  17 дней назад

      Thank you! Will do!

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

    ✌️ I like your style of teaching. Simple, (even for a novice like myself), less jargon, straight to the point and short. Thank you so much.

  • @mussanadirjan2779
    @mussanadirjan2779 2 года назад +2

    finally, I just learned how to place a shape to the desired location when it is not possible using a mouse dragging. thanks.

    • @AlienaCai
      @AlienaCai  2 года назад +2

      Yey! Totally feel you. I was also unable to make it pixel perfect for a long long time 😅

  • @rbynfnty
    @rbynfnty 2 года назад +1

    Thank you for this amazing tutorial. An easy way to copy and paste and object in the exact location as the previous is to copy or cut the object, click on the name of the frame (e.g. iPhone 11/X - 8) and then paste.

    • @AlienaCai
      @AlienaCai  Год назад

      Totally, thanks for sharing!

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

    you're an absolute queen! I've genuinely enjoyed this walk through and had so much fun with this!

  • @dravidianlabs5007
    @dravidianlabs5007 Год назад

    I been looking at few tools to make interactive prototypes from some paper sketches that I did and wasn't sure which one to use. Heard about Figma, but didn't have a clue on how it worked. RUclips to the rescue... but boy o boy--- You have awesome tutorial and very neatly explained on how to use this tool. Thanks a lot for sharing and helping others.

  • @larrytadafe398
    @larrytadafe398 Год назад +1

    your tutorials are pretty easy to understand. Thanks for this.. Looking forward to learning more

  • @juls2334
    @juls2334 2 года назад +8

    Great overview of using Figma! Thanks Aliena! Can you please show us how to add the app interactivity and making an animated prototype for our portfolios?

    • @AlienaCai
      @AlienaCai  2 года назад

      Thank you so much! On it!

  • @zarasohi
    @zarasohi Год назад +1

    Thank yo so much for all your videos, I do whatever you teach step by step and finish them.

    • @AlienaCai
      @AlienaCai  Год назад

      Glad you like them! And thanks for following along!

  • @christinadiaz2947
    @christinadiaz2947 8 месяцев назад +1

    Hi Aliena, your tutorials are great! My 2024 goal is to become a UX designer and your videos are full of genuinely good advice and skill 😃 I have experience with Adobe Illustrator as well, so I've been able to pick up some of these tricks quickly.

  • @Saransh_rway
    @Saransh_rway 2 месяца назад +1

    Hi, love the way you explain everything, i think i found my tutor, see you in next video.☺

    • @AlienaCai
      @AlienaCai  2 месяца назад

      Glad it was helpful!

  • @wpwebsiteshop
    @wpwebsiteshop Год назад +1

    What an excellent tutorial! So was the previous tutorial. Thanks!

  • @omarmessam
    @omarmessam Год назад +1

    I am still waiting for this series to continue. I am waiting for the interactive prototype tutorial, please Aliena ♥

  • @dannika46
    @dannika46 Год назад +1

    This was amazing! I am so glad I found your channel!

  • @echolu3349
    @echolu3349 Год назад +1

    Love this video! Please make more Figma tutorial videos! I saved this playlist.

  • @fsaforosaforo6338
    @fsaforosaforo6338 2 месяца назад

    ✌Great video...super fast but still enough to get the main purpose of a Mockup. Thanks. Flo✌

  • @taniaghosh3319
    @taniaghosh3319 2 года назад +1

    Please upload more tutorials of figma. I love your teaching style. You are doing great ❤️ ✌️

  • @rajaramadurai2448
    @rajaramadurai2448 Год назад

    Thank you Alieana Cai for the crisp, bite-sized lessons 😊 Looking forward to the prototype session 🎉

  • @stenkelly7089
    @stenkelly7089 Год назад +1

    This is so amazing and simple to understand. You should do a tutorial on exporting the project to android studio.

  • @prophetessmarie9742
    @prophetessmarie9742 9 месяцев назад +1

    Oh wow! This was intense but great!!!!!!

  • @tifah_zw
    @tifah_zw Год назад +1

    ✌🏾 you’re really good at explaining!

  • @anamafaldarochaferreira3316
    @anamafaldarochaferreira3316 2 года назад +1

    ✌️ Love your step by step tutorial. They're very helpful. Thank you!

  • @milee.26
    @milee.26 Год назад

    You are so inspirational. I love how you explain the things so clearly. A good guider is who can make difficult things easy to approach and I believe you are. Today is actually my second day of learning from the very very begin of UI UX things, and I am so grateful that I found you. Hope you will keep going with whatever you want to do. I can't wait to see more of your content especially about Figma, UI, UX and your experience in life.
    Sending hugs and love to you

    • @AlienaCai
      @AlienaCai  Год назад

      thank you so so so so much. Your comment means a lot to me ❤️ Will keep going 🙏❤️

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

    Mannn..you explained everything except the part I needed 😢

  • @bonjovi1745
    @bonjovi1745 2 года назад +1

    practice practice, learn from other product, thq aliena 🇮🇩

  • @AjithKumar-dt3td
    @AjithKumar-dt3td 2 года назад +1

    Coming from Visio and other tools, your vidoes are super helpful!

  • @hauuxxxxelle7083
    @hauuxxxxelle7083 Год назад

    wooow thank you that I came across your tutorial video it's very easy to understand, and I'm trying to finish my wire frames in HIFI Big help!

  • @waterstrider
    @waterstrider Год назад

    you gained yourself a new follower! such a great teacher!

  • @yolioms
    @yolioms Год назад

    ✌🏼✌🏼Yes, please and thank you so much--you are a rock star!! 🥰🥰

  • @tnl21
    @tnl21 Год назад

    ✌🏽Wow! You are an amazing teacher. Thank you so much for these tutorials, I’m learning so much.

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

    You are a great teacher! Keep it up. Thank you

  • @simoy
    @simoy Год назад +1

    Great tutorials Aliena! I would definitely like to see you do the interactive prototype ✌🏽

  • @KoerangPaham
    @KoerangPaham Год назад +1

    Thanks a lot, keep going to teach us

  • @kdcp243
    @kdcp243 Год назад +1

    great video !!! excited for part 3

  • @VigneshAvn
    @VigneshAvn Год назад +1

    This is so helpful! Thank you Aliena 😇✌

  • @kunalsoni7681
    @kunalsoni7681 Год назад

    ✌☺ such a fantastic video about UI design

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

    How do you conduct usability testing with the prototype while designing a mockup with high fidelity... I hope you'll see this 😢
    I just started learning this about some months ago and I've learnt a whole lot from you ❤. Thank you so much

  • @ErollJayCela
    @ErollJayCela Год назад

    This is such a very helpful video. I understand and learn a lot from your video. I hope you'll be creating more interesting and helpful content❤ thank you and keep up the good work! God bless 🙏

  • @muhammedpurathayil7041
    @muhammedpurathayil7041 Год назад +2

    Soooo Helpful Aliena!!!

  • @knuckleheadmcspazatron4939
    @knuckleheadmcspazatron4939 Год назад

    Very well done✌! I think you're short and to the point videos are better than the Figma content from LinkedIn Learning.

  • @deborahyork6811
    @deborahyork6811 Год назад

    Thank you for sharing your knowledge. I’m on my journey to become an UX designer 👩🏼‍💻. Your channel is super helpful and easy to follow 🤍

  • @forces4free
    @forces4free Год назад

    Amazing videos and knowledge share. Yes please✌️

  • @devg12
    @devg12 Год назад

    As a formal geospatial analyst we learn these skills in ArcMap without even realizing it.

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

    Just one watch and I already subscribed
    U are the best
    Auto layout design please 🙏

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

      Here you go: ruclips.net/video/HwiHqfax7Uk/видео.htmlsi=Mdiv_5iu04eeHWNs

  • @Fillup82
    @Fillup82 2 года назад +1

    Aliena does it again 🙌🏻

    • @AlienaCai
      @AlienaCai  2 года назад +1

      Thank you again Phil 😃😃😁

  • @thanhquachable
    @thanhquachable 2 года назад +1

    thank you a lot for such a useful and easy-to-understand video, I am a developer and I have been through many tutorials that last hours without really being able to get down to the most important part: wireframe and mockup within like 20 mins in total. And yes, interactive mockup please! thank you.
    I just wonder if we can export our mockup into a kind of technical sheet with all the fonts, colors...etc so that developers can have all the input they need when it comes to styling?

    • @AlienaCai
      @AlienaCai  2 года назад

      Oh you are asking a GREAT question. The best way would be creating a style sheet for the design system to specify font/colors for Heading 1/2/3... For now, check out the "Inspect" tab on the right side in your figma screen. There's some useful thing too.

  • @faizyandbro
    @faizyandbro Год назад

    very nice video series, i also watched your previous video. thank you

  • @TheRunner3D
    @TheRunner3D Год назад +1

    great video, thank you ma am

  • @kierapb21
    @kierapb21 Год назад

    Would love to see the interactive prototype!

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

    you teach really well dear sis..🥰

  • @zen-zen191
    @zen-zen191 Год назад +1

    ✌️a great video, ready to prototype ✌️

  • @whooohaa
    @whooohaa 3 месяца назад

    Hi Alieana... great videos and great lessons!! Thank you so much! Which camera do you use for your videos?

  • @beautyinsideout6422
    @beautyinsideout6422 Год назад +1

    Victory ✌️

  • @naturalsounds3160
    @naturalsounds3160 Год назад

    you are brilliant thank you so much

  • @kannapperumal_sa2684
    @kannapperumal_sa2684 2 года назад +1

    ✌🏻need next part as well

    • @AlienaCai
      @AlienaCai  2 года назад +1

      Gotcha~ thank you!

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

    Thanks for another great video! I'm working on my firs real-world project and have to design all of the system elements myself. Do you have any recommendations for how to do this or where to get inspiration?

  • @myusrn
    @myusrn 22 дня назад

    Thanks for the great walkthrough video. What would you say is the difference between a UI and a UX designer?

    • @AlienaCai
      @AlienaCai  17 дней назад +1

      Oh I actually have a video on it, you will love it: ruclips.net/video/RN9LwG36lSE/видео.html

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

    You're a good teacher ❤

  • @lyle4596
    @lyle4596 2 года назад +2

    ありがとうございます。

    • @AlienaCai
      @AlienaCai  2 года назад +2

      どういたしまして。

  • @hudaarshad3355
    @hudaarshad3355 Год назад +1

    Very well explained.

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

    Thanks for the great tutorial. May I know how u fit the photo to the profile. How you adjust to fit in the small circle?

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

    Thank you! I am learning.

  • @MuhammadYusufMakhsudov
    @MuhammadYusufMakhsudov Год назад

    it was incredible thanks Aliena

  • @pragatimath2252
    @pragatimath2252 Год назад +1

    thanks for the tutorial😍

  • @claireszeto1798
    @claireszeto1798 Год назад

    ✌would love to see how you prototype navigation beginning mobile first and moving the same into desktop!! Your explanations are very clear and you put in little nuggets of wht it means to work alone and in teams. very halpful.

  • @ZeeZee0023
    @ZeeZee0023 2 года назад +1

    Thank you so much for this!

    • @AlienaCai
      @AlienaCai  2 года назад

      Thank you Zee ❤️👍

  • @ligiahinkelmann4333
    @ligiahinkelmann4333 Год назад

    Thank you Aliena :)

  • @daveso3836
    @daveso3836 Год назад

    why put a rectangle first then put text inside on the rectangle , when you can use auto layout and then fill the container?

  • @Itsbilal522
    @Itsbilal522 2 года назад +1

    Just copy and paste the image, attach it to the frame and you’re fine

  • @ЛераПарфенова-о2щ
    @ЛераПарфенова-о2щ 5 месяцев назад

    Thank you for tutorial

  • @jahicrawford-young7196
    @jahicrawford-young7196 2 года назад +1

    👍👍👍. Can we please get the interactive video !!!

  • @aexorsystem
    @aexorsystem Год назад +1

    ✌Thanks sister.

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

    your videos are awesome !

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

      Glad you like them!

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

      @@AlienaCai so sweet of you to answer. I just started learning UI UX. hoping to get into school for 2 year program.
      How did you do it?
      Did you have any design background?
      How much time did you spend on learning when you started?
      How/where do you get your design inspiration/ideas from?
      Would be generous of you to answer my questions and will be helpful. Thanks again for your videos and commenting back 😊

  • @Almacky
    @Almacky Год назад

    Thanks for the tutorial.

  • @tejaltari
    @tejaltari 2 года назад +1

    You are doing such a great job inspiring people to pursue their dreams. I was just wondering if I need to create my own design system in Figma or should I download some free version for a startup company? I'll be working as a UX Design intern for which I have to design games for kids. I would like to know your thoughts on that. Also, this channel is amazing! Please keep sharing your experiences with everyone. Thanks!

    • @AlienaCai
      @AlienaCai  2 года назад +2

      Thanks for the support! You are asking such a great question. My suggestion is to go to figma community and see whether there are design systems that's close to your company's style. Collect them, it's like creating a mood board. And create your own based on the inspiration. If there's one that's super close, you can duplicate it and edit upon it. Hope this helps 😄

    • @tejaltari
      @tejaltari 2 года назад

      @@AlienaCai Thanks for helping me out. I really appreciate it! ;)

  • @callmezizi
    @callmezizi Год назад

    thank you so much ✌

  • @clintcaramat2927
    @clintcaramat2927 2 года назад +1

    Great aliena :)

  • @ysufibrahim3176
    @ysufibrahim3176 2 месяца назад

    i luv it🥰✌

  • @ChuNodeDigital
    @ChuNodeDigital 2 года назад +1

    Love the tutorial🌹

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

    Hi Aliena, can I ask where can i find the "community" button for the elements? cause my file doesn't have TT

  • @myusrn
    @myusrn 22 дня назад

    Would you say that all product release work efforts should start with UI wireframes followed by UI mockups before a backlog and code development begins?

    • @AlienaCai
      @AlienaCai  17 дней назад

      I would say all product release work should start from justifying the problem before even touching figma or code - e.g., testing if the problem actually exist and if the target users are willing to pay for it (for new product / feature)
      I'm not a developer myself so I can't say much about the engineering part. But at Big Tech, usually we host a kickoff meeting for both business, engineering, and design stakeholder so everyone come to alignment and all constraints are clarified before anyone starts to draw/code anything.

  • @gmmkeshav
    @gmmkeshav Год назад

    never seen so great video
    do you offer entire course on design

    • @AlienaCai
      @AlienaCai  Год назад

      Thank you! Please check out my tutorial series in my channel 👍👍

    • @gmmkeshav
      @gmmkeshav Год назад

      @@AlienaCai there were only 4 please make some more
      like some more famous app clones apart from insta

  • @jayantmalviya03
    @jayantmalviya03 Год назад

    Hi, I want help please tell me that when me create mockup so we have to take new frame or Re-edit that wireframes me make?

  • @MaxwellNaradd
    @MaxwellNaradd Год назад +2

    “Good designs are often invisible”

  • @paoperz4157
    @paoperz4157 Год назад

    Super helpful!

  • @echolu3349
    @echolu3349 Год назад

    The copied icons from coolicons all have a light-yellow-colored frame. Does anyone know how to get rid of it?

  • @OctoberSammara
    @OctoberSammara Месяц назад

    Thankyou