Figma UX tutorial for beginners

Figma UX tutorial for beginners - Wireframe

Рет қаралды 458,357

Күн бұрын

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 kzfaq.info?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...

Пікірлер: 329

@peterfinn3326 2 жыл бұрын

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

@AlienaCai 2 жыл бұрын

😂😂 thank you!!

@ezzanaveed 8 ай бұрын

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

@heatherivy4748 4 ай бұрын

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 2 жыл бұрын

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 2 жыл бұрын

Thank you!

@laurenlim9276 11 ай бұрын

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 9 ай бұрын

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

@Yuchelstheanalyst Жыл бұрын

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 Жыл бұрын

You're very welcome!

@itsjenisha Жыл бұрын

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 Жыл бұрын

Glad you like them!

@MM-jr5sr Жыл бұрын

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

@GeraldOfori-pr3zt Жыл бұрын

Precise yet packed with essential instructions.

@Malaveldt 10 ай бұрын

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!

@sakshiranjan6305 Жыл бұрын

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

@kingsleyanim6020 5 ай бұрын

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

@BakaGaij1n Ай бұрын

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

@hammadgill3517 Жыл бұрын

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

@ayobamiestherolanrewaju4910 9 ай бұрын

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

@stacy3781 5 ай бұрын

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

@chelseaaybar9266 2 жыл бұрын

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

@moody5882 16 сағат бұрын

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

@BlackSparrowTech Жыл бұрын

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

@yangxiyu5667 Жыл бұрын

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

@user-th6kq8ul4v 4 ай бұрын

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

@RoanCorporation 3 ай бұрын

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 3 ай бұрын

You are so welcome!

@railpressureflip 6 ай бұрын

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

@AlienaCai 2 жыл бұрын

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: kzfaq.info/get/bejne/pcBxfsWQzNmWhaM.html

@vishnuramesh350 Жыл бұрын

I'm facing a challenge while using the pen.

@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

@dontlogin79 Жыл бұрын

One of the most underrated skills that UX designers need

@AlienaCai Жыл бұрын

Thank you

@marcolealsaez1595 Жыл бұрын

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

@user-lx4qm3pv7d 6 ай бұрын

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 6 ай бұрын

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

@torontodough2755 6 ай бұрын

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

@pearl3727 6 ай бұрын

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

@joyaroha6683 8 ай бұрын

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

@AlienaCai 8 ай бұрын

Thank you!

@nihalshah4113 5 ай бұрын

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

@soldiergirlpoet 4 ай бұрын

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

@ayogsynergy3828 Ай бұрын

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!

@madhusreebanerjee10 Жыл бұрын

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

@prajwalsharma2794 Жыл бұрын

Best video on wireframing that I have watched.

@shermanartcreativeservices1868 2 ай бұрын

This was SUPER helpful! Exactly what I needed!🙂

@michaelzorko4349 Жыл бұрын

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 Жыл бұрын

Welcome aboard!

@MsDjitornu Жыл бұрын

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

@AlienaCai Жыл бұрын

So glad!

@karthikrao5360 3 ай бұрын

Great video, thanks for sharing! Will try it out

@tusharanand4856 4 ай бұрын

Love the way she explains things! ❤

@majesticchicken3213 8 ай бұрын

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

@nonono6537 9 ай бұрын

so easy to understand, thank you ❤

@jeanina_777 Жыл бұрын

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

@AlienaCai Жыл бұрын

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

@Princeoloto 6 ай бұрын

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

@AlienaCai 6 ай бұрын

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

@kzbee Жыл бұрын

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

@AlienaCai Жыл бұрын

Welcome!

@charliewinefield3644 2 жыл бұрын

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

@AlienaCai 2 жыл бұрын

Definitely!

@ibunnysaur1 28 күн бұрын

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

@alatsamy Жыл бұрын

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

@IgloNudel 3 ай бұрын

This was super useful, thank you so much! ✨

@afrojaaktar2210 Жыл бұрын

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

@AlienaCai Жыл бұрын

Welcome aboard!

@chantalalvarez3804 7 ай бұрын

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

@bickelmeister 8 ай бұрын

That the best on point teaching I ever saw!

@AlienaCai 8 ай бұрын

Wow, thanks!

@tanrusselljosephm2972 8 ай бұрын

Thank u for the Wonderful Tutorial

@briannarenni Жыл бұрын

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 Жыл бұрын

Glad it helped!

@redpillows2992 8 ай бұрын

Cool. this helps me a lot

@LeanMedia Жыл бұрын

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

@prashantmishra5691 Жыл бұрын

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

@AlienaCai Жыл бұрын

Thank you for the comment!

@abdullahnabilmahdi133 3 ай бұрын

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!

@javiertrujillo5016 7 ай бұрын

Very useful!! thanks!

@sandovalromo7039 9 ай бұрын

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

@AlienaCai 9 ай бұрын

Glad to hear it!

@Miaccount4617 Ай бұрын

Great tip about icons!

@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 2 жыл бұрын

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

@jsross3353 3 ай бұрын

Thank you for a brief but very helpful tutorial

@AlienaCai 2 ай бұрын

Glad it was helpful!

@baljindersinghrai640 Жыл бұрын

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 KZfaq 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.👍👍👍❤❤❤❤❤❤

@AlienaCai Жыл бұрын

Thank youuuu

@opshaheer9782 10 ай бұрын

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

@jhayz_alas1998 2 ай бұрын

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

@beemee4416 6 ай бұрын

Thanks for the excellent tutorial!

@AlienaCai 6 ай бұрын

You're very welcome!

@Glassofrosey 3 ай бұрын

you dropped this 👑

@ccchinglim 5 ай бұрын

Thank you Aliena, its very helpful and detailed

@shalinivasanthkumar4479 6 ай бұрын

Really Loved it!

@jerviasjohnson700 2 жыл бұрын

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

@AlienaCai 2 жыл бұрын

Thank you too!

@baumstriezl8034 7 ай бұрын

this was so helpful, thank you

@Ragnorok-yi8zd Жыл бұрын

Thanks for the Tutorial

@billionboss2234 Жыл бұрын

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

@AlienaCai Жыл бұрын

Thanks for the sub!

@prajjwaltalks1110 Жыл бұрын

I am obsessed with your channel ❤️

@AlienaCai Жыл бұрын

Wow, thank you!

@user-rg1vi3pl6f 6 ай бұрын

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

@MM-jr5sr Жыл бұрын

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

@astrology-963 9 ай бұрын

Thanks For this great simple video.

@Alisa-inspiration Жыл бұрын

Thank you for sharing this tutorial, so helpful!

@stephenyankey 4 ай бұрын

It was so nice learning from u

@i_zoru 5 ай бұрын

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

@sarasousa4318 Жыл бұрын

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

@hernandomunoz429 6 ай бұрын

Thank you that was clear!

@Audio-Tales 8 ай бұрын

Thank you so much , this was straight to the point

@AlienaCai 8 ай бұрын

You are so welcome!

@Art_by_nama 9 ай бұрын

It's amazing 😍 thanks you so much 💓

@katastrophhic 5 ай бұрын

grl u made this so easy tysm..

@venugopalimmadi7118 2 ай бұрын

Great teachings. Thank you

@AlienaCai 2 ай бұрын

Thanks for watching!

@cristhianjhlcom 3 ай бұрын

Great video, thanks!

@samanfatima1613 7 ай бұрын

You earned a subscriber ❤

@AlienaCai 7 ай бұрын

Welcome aboard!

@addisonkliewer4494 2 жыл бұрын

Thanks Aliena! This was really helpful!

@AlienaCai 2 жыл бұрын

Thank you for the comment!

@stariemoore5268 Жыл бұрын

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 😅.

@MrYossi2010 Жыл бұрын

Thanks for taking the time to up load the tutorials. I am finding them really useful. In this video you made a circle, then you copied them. I managed to do this. My question is how did you manage to select all three circles, then center them using the red box. I am having difficulty doing this. Can you please explain. Thanks

@zeadmohamedessa1096 8 ай бұрын

Thanks, u r GREAT 🥰

@manuelpineda9067 Жыл бұрын

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

@AlienaCai Жыл бұрын

Glad it was helpful!

@achmadsyarif5129 3 ай бұрын

thank you so much, you help me with my thesis

@AlienaCai 3 ай бұрын

Happy to help!

@naturalsounds3160 Жыл бұрын

absolutely brilliant thank you

@tihanav 2 жыл бұрын

Such a great tutorial! :)

@AlienaCai 2 жыл бұрын

Thank you! Cheers!

@candiey5627 Жыл бұрын

It helps me in learning wireframing. I would like to know something which is whether we can use ready-made icons than self-drawing in wireframing? Thanks for the tutorial.