Figma UX tutorial for beginners - Wireframe

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

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

  • @peterfinn3326
    @peterfinn3326 2 года назад +164

    You just covered in 8:40 what was covered in 2 hours in a General Assembly live tutorial. Glad that was free.

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

      😂😂 thank you!!

  • @heatherivy4748
    @heatherivy4748 8 месяцев назад +13

    Last year, I was put on a new project and had to learn Figma while onboarding. I was so grateful for your video on wireframing, as it was focused and quickly gave me the knowledge I needed to succeed under pressure. Thank you so much for your content and presence.

  • @mshibinz
    @mshibinz 2 года назад +217

    Wireframing is what people need to learn. And there's not much that teaches it..... Thank you. And hope we could learn alot from this session of yours

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

      Thank you!

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

      Hi Aliena, the text especially in this example the font they look similar to Instagram how do u pick the text exactly look a like? Please help us understand and also the text size??

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

      Yeah, but I don't quite get wireframing. I much rather have iterations of my mockups than just wireframes.
      They are good for collaborating though, but horrible for visualisation

  • @ezzanaveed
    @ezzanaveed Год назад +15

    was looking up wireframing for my class at school, and your video popped up. The smile on my face was tremendous. Love seeing your work, Aliena

  • @dontlogin79
    @dontlogin79 2 года назад +27

    One of the most underrated skills that UX designers need

  • @gsabeykoon9192
    @gsabeykoon9192 3 месяца назад +11

    This is the simplest and the most effective Figma tutorial on wireframe designing :) Im hooked.

  • @chelseaaybar9266
    @chelseaaybar9266 2 года назад +17

    I'm still new to Figma and UX Design and I'm currently working on my first project but seeing this video now is making me wish I did a wireframe beforehand instead of jumping straight into the app design 😅

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

      Hahaha it’s a good lesson then! I strongly recommend to do a wireframe before jumping into design for your next project. Will save lots of time after all 👍👍

  • @GeppinoGregorio
    @GeppinoGregorio Месяц назад +1

    Wow! I think that this is one of the best tutorials on YT: clear, simple and and it gets straight to the point

  • @iremhavvabagci8030
    @iremhavvabagci8030 21 день назад

    I love everything you share because what you do is not something that we can easily find about UX/UI design. I appreciate that you demonstrated a wireframe example for us. I hope you keep posting new videos and new demonstrations with other UX/UI topics! 💖

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

    Aliena, I never make these types of comments, but I had to… my gosh, what a great tutorial. In 8 minutes I feel like I know enough to get a decent wireframe for my app. You’re a friggin beast. Thank you! Subscribed.

  • @MM-jr5sr
    @MM-jr5sr Год назад +6

    Thank you so much for having your YT channel!🙏I don't think you know how much you do for a beginner like me!

  • @torontodough2755
    @torontodough2755 10 месяцев назад +5

    Awesome concise tutorial! 💪 Unlike other videos with unnecessary bs to lengthen their videos

  • @rosekopelowitz5069
    @rosekopelowitz5069 13 дней назад

    Hoping your channel will help me not fail my first UX class. Thanks for the simple, straight to the point tutorial!

  • @EnaictechSTPL
    @EnaictechSTPL 9 месяцев назад +2

    Hey lady, this is so cool. I have watched others but the way you explained in 8 mins changed my perspective of learning. I learnt a lot in 8 mins. I am doing my first app dupe today i meant wireframe basics today.

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

      I'm so glad to see this!! Wish you enjoy the learning journey ✨
      P.S. the first time I scan your comment I misread it as your first app is "due" today and I was like wow you must have to learn a lot in a day 🤣🙈

  • @AnalystYuchels
    @AnalystYuchels Год назад +23

    Thank you so much for this precise and accurate teaching. You were as explicit as possible and anyone would be able to get a hang of it immediately. Please do create more video tutorials in the future for us.

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

    Best video on wireframing that I have watched.

  • @RoanCorporation
    @RoanCorporation 7 месяцев назад +2

    You are my hero !!!! What a brilliant idea to show your Instagram as explainer , cannot be more clear and functional that ! You have gained a subscriber

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

      You are so welcome!

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

    Thank you so much for this! I've learned Figma wireframing, mock-up, & prototype in just one night.

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

      You are a speedy learner! I’m so glad that it was helpful!

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

      @@AlienaCai thanks this is so easy to learn but how did you get a screen shot or rather still load a picture file i am using my pc or are you using a phone

  • @itsjenisha
    @itsjenisha 2 года назад +51

    the best wireframe tutorial! i love that you explain the reasons behind what you do and make everything so simple and easy to understand!! :)

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

      Glad you like them!

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

    i watched a lot of videos explaining wireframes but this one is the simplest one

  • @baljindersinghrai640
    @baljindersinghrai640 Год назад +4

    Wow, this Figma UX Tutorial Wireframe is the best. I really like the way you explained how to use wireframe step by step through figma tutorial on RUclips channel. It's very useful to use wireframe from figma when making websites and also mobile apps. I would like to get started on wireframe in figma website. Very well done for precise and accurate teaching about wireframe in Figma Tutorial Aliena Cai. You explained really well and have shown good demonstration on how to make wireframe in figma. And I will look forward to seeing more tutorial videos on figma tutorials. You did really amazing.👍👍👍❤❤❤❤❤❤

  • @Princeoloto
    @Princeoloto 10 месяцев назад +1

    I randomly came across your channel. Girl, you are a good teacher and i hope to learn more from you 👍

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

      Thank you so much! Will try to do more tutorials 😁

  • @briannarenni
    @briannarenni Год назад +4

    I'm at work trying to find a simple tutorial for the backend guys on my project, thank you! Haha less than 10 min and all the basics covered.

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

    Excellent video, straightforward,informative, no unnecessary long talks 👏👏👏

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

    Just was I was looking for to get a refresher on wireframes!

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

    you have done justice to my doubts as an inquisitive designer. well done Aliena. We sometimes overlook the importance of wireframing

  • @GeraldOfori-pr3zt
    @GeraldOfori-pr3zt Год назад +14

    Precise yet packed with essential instructions.

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

    Finished this video and immediately subscribed. Such a good and precise tutorial, thanks

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

    Thank you for your time in putting these together - This is much appreciated.

  • @raymottaa
    @raymottaa 14 дней назад

    OMG! What an awesome tutorial! I feel so empowered to create my wireframe! Thank you so much!!

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

    You are a breath of fresh air! A perfect balance of practical knowledge and good practice principles. Thank you!

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

    Cool! I loved your little drawing tips at the end. Great Job! You did a perfect explanation of how quick a wireframe should be made.

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

    Thank you. Your video is straight to the point and easy to follow.

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

    I didn't have insta, so I used a different app instead. And after an hour or so, I completed my first tutorial on Figma! 😂 This was so much fun, Aliena! You're a great instructor. Looking forward to your other tutorials. I'm so inspired right now. Thank you so much for all the work that you do :)

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

    This was an excellent tutorial on wireframing. Your instructions were clear and easy to follow.

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

    Amazed.....starting my journey in this field...and loved what you taught. Keep guiding.

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

    I'm new to figma and this tutorial is the best, its so clear and i loved it!

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

    Thank you ,You just saved my school project been struggling to navigate Figma to create wireframe for website I’m developing .

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

    Im truly amazed that this video is very simple and easily understandable, i am just starting to use figma and know nothing about it.. thank you very much this tutorial is veryy good!

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

    i cant wait, more tutorial practice from you girl, thq for this tutorial, i want share this video, to all my friends (ui beginner). thanks

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

      Thank you so so much! More video in progress 👍👍

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

    Thank you for this awesome and quick guide on wireframing. I was able to create my own so easily after your tutorial!!❤

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

    Thank you Aliena, just can't wait for my new i5 laptop to arrive so I can start practicing what I learned straight away (been using a i3 with 4gb RAM -always crashes during Figma ) thanks again 🙂

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

      Thanks for sharing. Enjoy your new laptop and happy new year!

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

    Thank you! Very succinct, very clear. I like your greyscale and vector wireframe approach as opposed to the pure outlines I've seen elsewhere. It reads better. This helped me a lot!

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

    after 30+ video finally found yours one and damm you are too good all the things according to the point .......... thankyou

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

    This tutorial is outstanding. I'm new to Figma coming over from XD. I've watched a couple of videos and I have to say you've done a really good job. I liked it and I plan to be a subscriber. Thank you.

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

    Great tutorial - figma is such a fun tool to use!

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

    This tutorial was really good and to the point. Thank you so much for giving me a strong foundation for me to get up and running in figma!

  • @NchawakaKanyama-e7q
    @NchawakaKanyama-e7q 10 месяцев назад

    So helpful for us beginners. So glad I clicked this video

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

    So nice, easy and straight to the point! Thank you! 🙌🏼

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

    this is really good, thank you, I'm using this to guide me through my uni

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

    This is simply the best thing I’ve learned in a while ! Thank you much!

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

    My Figma / UX Design Course: fasttrackux.com
    Link to Figma: psxid.figma.com/mtvfdvfjvpps
    Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-cb44ct
    Next episode on Mockup: ruclips.net/video/oZAKb_gs2Uo/видео.html

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

      I'm facing a challenge while using the pen.

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

      you should have made a refrence to the icon depository where you can find over 400 free icons saves a shit ton of time

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

    Concise and simple. You narrate well! Thanks

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

    Really cool. I’m working on an app and needed a way to communicate my ideas to my designer. This was very helpful thanks

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

      Glad it was helpful!

  • @yashangvyas4379
    @yashangvyas4379 10 дней назад

    Thank you so much.
    I hope that you get what you truly need in your life in return for helping us.

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

    First time here, and now I'm a subscriber. Love the idea.

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

    Thanks for this concise tutorial @Aliena. Super cool stuff!

  • @hammadgill3517
    @hammadgill3517 Год назад +7

    Thank you, Aliena! Your video was short, precise, and absolutely wonderful! It was exactly what I was looking for. Great job!

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

    This is the best wireframe tutorial, easy and just the precise info! new follower.

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

    You explained this so clearly and so well. Thank you! New sub 🙋🏻‍♀️

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

    Love the way she explains things! ❤

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

    Great tutorial, only necessary things, no extra long pre-explanation straight to the topic
    Thank you so much!!

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

    Hello Aliena.. I would like to say your way of teaching in this video is awesome. It's very easy to understand for a beginner like me. Thank You so much for your efforts. 😇😇

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

    I wanted to see something that would make me glad to start wire-framing. Having struggled with at least three "also rans" - this one does truly stands out.
    Thanks for making it.

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

    This tutorial is so effective and easy to understand! Best figma tutorial for beginners!!!!!

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

    101/100!! Nice delivery!! Welldone🎉🎉

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

    Wow! I just learnt something fantastic ... Thank you. You deserve my subscription....

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

    This was SUPER helpful! Exactly what I needed!🙂

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

    Really helpful, great tutorial 11/10, exactly what I was looking for, thanks!

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

    Thanks for short and simple vid. Keep it coming. Subbed!

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

      Thank you for the comment!

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

    That the best on point teaching I ever saw!

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

    Thank you for a brief but very helpful tutorial

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

      Glad it was helpful!

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

    thank you very much for your great lessons. I Learnt a lot of things from you....best video for wireframing lesson

  • @Audio-Tales
    @Audio-Tales Год назад +1

    Thank you so much , this was straight to the point

  • @ibunnysaur1
    @ibunnysaur1 4 месяца назад

    This is a really good tutorial and practical, thank you!

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

    you dropped this 👑

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

    so easy to understand, thank you ❤

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

    Learn how to wireframe ✅ Thank you so much!

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

    Thanks Aliena! This was really helpful!

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

      Thank you for the comment!

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

    Fantastic. I had been doing wireframing in Google Drawings. Will be using Figma now. Subscribed!

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

    Thank you soooo much for making such a nice pedagogic content !

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

    yeah i kinda agree on some parts on using on real case scenario instead bunch of lorem ipsum for the text, or user input
    because that's how you'll really gonna get the feeling to make it near the real user experience would look like

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

    Simply, thank you. Really appreciated. Please keep up the good work. Subscribed

  • @umadethisuneccesarilydifficult
    @umadethisuneccesarilydifficult 4 месяца назад +1

    the last video i watched just drew random shapes for 8 minutes. ty for actually showing us lol

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

      🤣🤣🤣 Your comment is legendary.

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

    thank you Aliena! This was a very helpful introduction.

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

    Very informative video and I’ll definitely refer to this one often. Thank you!

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

    This was super useful, thank you so much! ✨

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

    Thanks. Please create videos about how to design in figma for product managers. About wireframes and mockups.

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

    Wow thank you❤️

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

    thanks for the tutorial, it's very detail and helpful.

  • @samanfatima1613
    @samanfatima1613 11 месяцев назад +1

    You earned a subscriber ❤

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

      Welcome aboard!

  • @doleo_metal
    @doleo_metal 8 дней назад

    Great intro! Thank you!

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

    Easy English, amazing work! I really liked. I will see all this videos and practice my English. Beijos (kissesss) ❤❤❤

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

    Thank you so much for this ! I'm on a CF bootcamp and they don't teach you these stuff.

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

      You are so welcome! CF is very theory and knowledge focused but that's also good for you in the long run 😍 Pair that training with my videos can get you further 😉

  • @Klaudia-q4l
    @Klaudia-q4l Месяц назад

    Hey, thanks for the video! I'm just starting my skills in Figma, I'm a full stack, but I want to learn Figma because I use a lot of UX designer. So I would like to start my own journey with Figma. You also mentioned that in Wireframe you don't have to have perfect space . Do you have videos of more detailed work in Figma where I can see how to add the correct space or to make more components?

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

    Great video, thanks for sharing! Will try it out

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

    i wanna say a big thank you❤❤

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

    Thanks for the excellent tutorial!

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

      You're very welcome!

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

    Great tip about icons!

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

    Hi, I have used wireframes previously in my work as website designer and also as a digital marketer, I know the concept of a/b testing and concepts of user persona, customer journey. I have a doubt on ui/ ux designer they should be good in drawings?? Like illustrator?? Also when it comes to branding are we supposed to know a lot about it like colours and font types? Is it a responsibility of the designer to create branding?? Please can you touch base on this topic in one of your videos. This is been my one point of confusion actually I enjoy the wireframe part. User research, I love interacting with people to get to know their requirements as it was my major part of web design project manager.
    I have used balsamic, mocking bird, Miro for wireframes, flow sequence. I enjoy this part of my creative mind. Please explain if the branding part is important and how can we tap on the knowledge of branding. Appreciate your help 😊 I have intermediate knowledge and work experience in Adobe illustrator and photoshop. But I cannot draw like artist to create icon or other from scratch design like vector image or clip image.