Figma UX tutorial for beginners - Wireframe

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 มิ.ย. 2024
  • Fast Track to UX: a 4-Week Figma Crash Course 👉 fasttrackux.com
    Link to Figma: psxid.figma.com/mtvfdvfjvpps
    Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-...
    This beginner friendly tutorial video covers how to create a wireframe for your UX app by with Figma. A wireframe is a basic outline of a digital experience. As a UIUX designer, I often create wireframes during zoom meetings where I need to visualize design solutions on the spot quickly. By the end of this Figma tutorial, you will be able to recreate the wireframe of any app.
    Video breakdown:
    What's a wireframe?: (0:00)
    Use rectangles to represent visual elements: (0:37)
    Use text boxes to represent text elements: (4:07)
    Use the pen tool to sketch icons: (5:43)
    🚀 Subscribe to learn more about UX design at th-cam.com/users/alienacai?sub_confirmati...
    How I made $10K a week as a Product Designer: • How I made $10K a week...
    Check out the following videos to learn more about entering the field of UX design:
    📱 How to get your first UX Design role: www.youtube.com/watch?v=On5zq...
    📱 Google UX Design Certificate Program: www.youtube.com/watch?v=6xFGp...
    📱 How to build your first UX Design Portfolio: www.youtube.com/watch?v=OK8Ap...
    📱 How to write a UX Case Study: www.youtube.com/watch?v=OK8Ap...
    📱 How to improve the visual of your UX Portfolio: • How to improve the VIS...
    📱How to write a UX Design Resume that gets you a job: • How to write a UX Desi...
    📱 UX Design Whiteboard Challenge: • Remote UX Design White...
    📱 a Day in the Life of a UX Designer working from home: • Remote UX Design White...
    Check out a sketch comedy I made for uiux designers: • If UX Designers Were H...
    Watch what I learned from one year of unemployment 👉 • Overcome Tech Layoffs ...
    Inside Config 2023 + Exclusive Tour of Figma HQ!: • Inside Config 2023 + E...
  • วิทยาศาสตร์และเทคโนโลยี

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

  • @peterfinn3326
    @peterfinn3326 ปีที่แล้ว +98

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

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

      😂😂 thank you!!

  • @ezzanaveed
    @ezzanaveed 7 หลายเดือนก่อน +6

    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

  • @mshibinz
    @mshibinz ปีที่แล้ว +182

    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  ปีที่แล้ว +3

      Thank you!

    • @laurenlim9276
      @laurenlim9276 10 หลายเดือนก่อน +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 8 หลายเดือนก่อน

      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

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

    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.

  • @Yuchelstheanalyst
    @Yuchelstheanalyst ปีที่แล้ว +18

    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.

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

      You're very welcome!

  • @MM-jr5sr
    @MM-jr5sr ปีที่แล้ว +3

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

  • @Malaveldt
    @Malaveldt 9 หลายเดือนก่อน +2

    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!

  • @itsjenisha
    @itsjenisha ปีที่แล้ว +48

    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  ปีที่แล้ว +1

      Glad you like them!

  • @GeraldOfori-pr3zt
    @GeraldOfori-pr3zt ปีที่แล้ว +10

    Precise yet packed with essential instructions.

  • @sakshiranjan6305
    @sakshiranjan6305 ปีที่แล้ว +5

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

  • @user-th6kq8ul4v
    @user-th6kq8ul4v 3 หลายเดือนก่อน

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

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

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

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

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

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

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

  • @hammadgill3517
    @hammadgill3517 11 หลายเดือนก่อน +7

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

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

    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 :)

  • @BakaGaij1n
    @BakaGaij1n 5 วันที่ผ่านมา

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

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

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

  • @dontlogin79
    @dontlogin79 ปีที่แล้ว +21

    One of the most underrated skills that UX designers need

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

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

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

    Grab a discount for my upcoming Figma course 👉 forms.gle/tucgzTQX6PTAwUuw5
    Link to Figma: psxid.figma.com/mtvfdvfjvpps
    Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-cb44ct
    Next episode on Mockup: th-cam.com/video/oZAKb_gs2Uo/w-d-xo.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

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

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

  • @ayogsynergy3828
    @ayogsynergy3828 19 วันที่ผ่านมา

    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!

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

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

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

    Great video, thanks for sharing! Will try it out

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

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

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

    Best video on wireframing that I have watched.

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

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

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

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

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

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

    This was SUPER helpful! Exactly what I needed!🙂

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

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

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

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

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

    Love the way she explains things! ❤

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

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

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

    This was super useful, thank you so much! ✨

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

    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!

  • @joyaroha6683
    @joyaroha6683 7 หลายเดือนก่อน +3

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

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

      Thank you!

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

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

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

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

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

    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  หลายเดือนก่อน

      You are so welcome!

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

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

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

    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.

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

      Glad it helped!

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

    so easy to understand, thank you ❤

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

    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!

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

    Thank you Aliena, its very helpful and detailed

  • @Miaccount4617
    @Miaccount4617 23 วันที่ผ่านมา

    Great tip about icons!

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

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

  • @user-rg1vi3pl6f
    @user-rg1vi3pl6f 5 หลายเดือนก่อน

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

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

    you dropped this 👑

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

    Really Loved it!

  • @Alisa-inspiration
    @Alisa-inspiration ปีที่แล้ว

    Thank you for sharing this tutorial, so helpful!

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

    grl u made this so easy tysm..

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

    It was so nice learning from u

  • @user-lx4qm3pv7d
    @user-lx4qm3pv7d 5 หลายเดือนก่อน +1

    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  5 หลายเดือนก่อน

      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 🤣🙈

  • @astrology-963
    @astrology-963 8 หลายเดือนก่อน

    Thanks For this great simple video.

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

    this was so helpful, thank you

  • @chelseaaybar9266
    @chelseaaybar9266 ปีที่แล้ว +15

    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  ปีที่แล้ว +1

      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 👍👍

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

    Great video, thanks!

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

    It's amazing 😍 thanks you so much 💓

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

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

  • @MM-jr5sr
    @MM-jr5sr ปีที่แล้ว

    Thank you SO MUCH for this! Great channel, you have a new subscriber.

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

    Thank u for the Wonderful Tutorial

  • @kzbee
    @kzbee ปีที่แล้ว +5

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

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

    Thank you that was clear!

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

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

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

      Thank you too!

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

    absolutely brilliant thank you

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

    thank you so much for your tutorial ! thanks to you i can finally start my journey ! thank you so much and god bless you !

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

    Cool. this helps me a lot

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

    Very useful!! thanks!

  • @sandovalromo7039
    @sandovalromo7039 8 หลายเดือนก่อน +2

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

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

      Glad to hear it!

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

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

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

      Thank you for the comment!

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

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

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

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

  • @michaelzorko4349
    @michaelzorko4349 11 หลายเดือนก่อน +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.

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

      Welcome aboard!

  • @user-cp9uh2wf2m
    @user-cp9uh2wf2m 3 หลายเดือนก่อน

    Thanks for the Info.

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

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

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

      Welcome aboard!

  • @bonjovi1745
    @bonjovi1745 ปีที่แล้ว +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  ปีที่แล้ว

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

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

    Excellent video, got all the information I needed. Thanks!

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

      Glad it was helpful!

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

    just loved it

  • @Ragnorok-yi8zd
    @Ragnorok-yi8zd ปีที่แล้ว

    Thanks for the Tutorial

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

    Wow, you are the magic i needed.

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

    very helpful! Thank you.

  • @sheluparihar520
    @sheluparihar520 8 หลายเดือนก่อน +2

    i wanna say a big thank you❤❤

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

    Thanks Aliena! This was really helpful!

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

      Thank you for the comment!

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

    Thank you so much , this was straight to the point

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

      You are so welcome!

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

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

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

      Glad I could help!

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

    Such a great tutorial! :)

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

      Thank you! Cheers!

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

    Hi, really enjoyed this video. simple and learned some other stuff. subscribed right away and looking forward to watching more.

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

      Thanks for the sub!

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

    Aliena, thanks so much for offering such great information to help newbies! I am a bit nervous because I don't have the graphics background 😅.

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

    I am obsessed with your channel ❤️

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

      Wow, thank you!

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

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

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

      Awesome, thank you!

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

    Thanks Aliena!

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

    thank you Aliena! This was a very helpful introduction.

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

      You're so welcome!

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

    Thanks, u r GREAT 🥰

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

    that was great :) thank you

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

    Thanks so much ❤

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

    That the best on point teaching I ever saw!

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

      Wow, thanks!

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

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

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

    Wow thank you❤️

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

    Thank you for a brief but very helpful tutorial

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

      Glad it was helpful!