Тёмный

Figma UX tutorial for beginners - Mockup 

Aliena Cai
Подписаться 105 тыс.
Просмотров 115 тыс.
50% 1

Опубликовано:

 

5 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 240   
@ABSVabeautifulsunsetvlog
@ABSVabeautifulsunsetvlog 2 года назад
This channel is single handedly going to be the reason for my success as a UX designer. 😃
@AlienaCai
@AlienaCai 2 года назад
Thank you 🙏😃😃👍
@xcookie2
@xcookie2 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 месяцев назад
Totally agree. The videos are great. Are you a self learner or did you go to school to study UX UI?
@Mushba.
@Mushba. 2 года назад
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 года назад
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 месяцев назад
You are a great teacher. God bless you. We need more of these tutorials 🙏🏾🙏🏾 Love from Nigeria 🇳🇬
@mohammednettey5744
@mohammednettey5744 9 месяцев назад
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 года назад
Link to Figma: psxid.figma.com/mtvfdvfjvpps Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-cb44ct Previous episode on wireframe: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-D4NyQ5iOMF0.html
@chrisrowe6904
@chrisrowe6904 2 года назад
✌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 6 месяцев назад
You explained all the important points so simple and better than my UIUX instructor in college. No kidding !
@varunchakravarthi9780
@varunchakravarthi9780 Год назад
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!
@marcuscollins103
@marcuscollins103 Год назад
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.
@charliewinefield3644
@charliewinefield3644 2 года назад
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 года назад
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 😄
@vadivarasisuresh8786
@vadivarasisuresh8786 2 года назад
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 🙏
@mervetemur8147
@mervetemur8147 Год назад
✌ 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 !
@mussanadirjan2779
@mussanadirjan2779 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 года назад
Yey! Totally feel you. I was also unable to make it pixel perfect for a long long time 😅
@francenakoete6149
@francenakoete6149 10 месяцев назад
✌️ 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.
@larrytadafe398
@larrytadafe398 Год назад
your tutorials are pretty easy to understand. Thanks for this.. Looking forward to learning more
@zarasohi
@zarasohi Год назад
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!
@juls2334
@juls2334 2 года назад
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!
@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. RU-vid 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.
@rbynfnty
@rbynfnty 2 года назад
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 2 года назад
Totally, thanks for sharing!
@tayyebbio
@tayyebbio Месяц назад
Thank you Aliena for sharing these great toturials. I appreciate your efforts. Keep creating the great content.
@AlienaCai
@AlienaCai Месяц назад
Thank you! Will do!
@christinadiaz2947
@christinadiaz2947 9 месяцев назад
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.
@Glassofrosey
@Glassofrosey 6 месяцев назад
you're an absolute queen! I've genuinely enjoyed this walk through and had so much fun with this!
@echolu3349
@echolu3349 Год назад
Love this video! Please make more Figma tutorial videos! I saved this playlist.
@omarmessam
@omarmessam Год назад
I am still waiting for this series to continue. I am waiting for the interactive prototype tutorial, please Aliena ♥
@stenkelly7089
@stenkelly7089 Год назад
This is so amazing and simple to understand. You should do a tutorial on exporting the project to android studio.
@taniaghosh3319
@taniaghosh3319 2 года назад
Please upload more tutorials of figma. I love your teaching style. You are doing great ❤️ ✌️
@AlienaCai
@AlienaCai 2 года назад
Thank you!
@dannika46
@dannika46 Год назад
This was amazing! I am so glad I found your channel!
@Saransh_rway
@Saransh_rway 3 месяца назад
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!
@rajaramadurai2448
@rajaramadurai2448 Год назад
Thank you Alieana Cai for the crisp, bite-sized lessons 😊 Looking forward to the prototype session 🎉
@AlienaCai
@AlienaCai Год назад
You're so welcome!
@prophetessmarie9742
@prophetessmarie9742 10 месяцев назад
Oh wow! This was intense but great!!!!!!
@AlienaCai
@AlienaCai 10 месяцев назад
Thank you!
@fsaforosaforo6338
@fsaforosaforo6338 3 месяца назад
✌Great video...super fast but still enough to get the main purpose of a Mockup. Thanks. Flo✌
@tifah_zw
@tifah_zw Год назад
✌🏾 you’re really good at explaining!
@AlienaCai
@AlienaCai Год назад
I appreciate that!
@anamafaldarochaferreira3316
@anamafaldarochaferreira3316 2 года назад
✌️ Love your step by step tutorial. They're very helpful. Thank you!
@AlienaCai
@AlienaCai 2 года назад
Thank you!
@kdcp243
@kdcp243 Год назад
great video !!! excited for part 3
@AlienaCai
@AlienaCai Год назад
Yay! 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 🙏❤️
@simoy
@simoy Год назад
Great tutorials Aliena! I would definitely like to see you do the interactive prototype ✌🏽
@AlienaCai
@AlienaCai Год назад
It's under making!
@AjithKumar-dt3td
@AjithKumar-dt3td 2 года назад
Coming from Visio and other tools, your vidoes are super helpful!
@AlienaCai
@AlienaCai 2 года назад
Thank you 🙏😀
@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!
@thuglifejesus2673
@thuglifejesus2673 6 месяцев назад
Mannn..you explained everything except the part I needed 😢
@waterstrider
@waterstrider Год назад
you gained yourself a new follower! such a great teacher!
@AlienaCai
@AlienaCai Год назад
Welcome aboard!
@VigneshAvn
@VigneshAvn Год назад
This is so helpful! Thank you Aliena 😇✌
@muhammedpurathayil7041
@muhammedpurathayil7041 Год назад
Soooo Helpful Aliena!!!
@AlienaCai
@AlienaCai Год назад
I’m glad!
@jsross3353
@jsross3353 5 месяцев назад
You are a great teacher! Keep it up. Thank you
@KoerangPaham
@KoerangPaham Год назад
Thanks a lot, keep going to teach us
@AlienaCai
@AlienaCai Год назад
Thank you!
@yolioms
@yolioms Год назад
✌🏼✌🏼Yes, please and thank you so much--you are a rock star!! 🥰🥰
@bonjovi1745
@bonjovi1745 2 года назад
practice practice, learn from other product, thq aliena 🇮🇩
@AlienaCai
@AlienaCai 2 года назад
Keep going!
@zen-zen191
@zen-zen191 Год назад
✌️a great video, ready to prototype ✌️
@tnl21
@tnl21 Год назад
✌🏽Wow! You are an amazing teacher. Thank you so much for these tutorials, I’m learning so much.
@Fillup82
@Fillup82 2 года назад
Aliena does it again 🙌🏻
@AlienaCai
@AlienaCai 2 года назад
Thank you again Phil 😃😃😁
@deborahyork6811
@deborahyork6811 2 года назад
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 🤍
@beautyinsideout6422
@beautyinsideout6422 Год назад
Victory ✌️
@knuckleheadmcspazatron4939
@knuckleheadmcspazatron4939 Год назад
Very well done✌! I think you're short and to the point videos are better than the Figma content from LinkedIn Learning.
@kunalsoni7681
@kunalsoni7681 Год назад
✌☺ such a fantastic video about UI design
@kannapperumal_sa2684
@kannapperumal_sa2684 2 года назад
✌🏻need next part as well
@AlienaCai
@AlienaCai 2 года назад
Gotcha~ thank you!
@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 🙏
@hudaarshad3355
@hudaarshad3355 Год назад
Very well explained.
@PrincessChristopherOsaugwe
@PrincessChristopherOsaugwe 7 месяцев назад
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
@thanhquachable
@thanhquachable 2 года назад
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.
@TheRunner3D
@TheRunner3D Год назад
great video, thank you ma am
@AlienaCai
@AlienaCai Год назад
You are most welcome
@pragatimath2252
@pragatimath2252 Год назад
thanks for the tutorial😍
@kierapb21
@kierapb21 Год назад
Would love to see the interactive prototype!
@faizyandbro
@faizyandbro Год назад
very nice video series, i also watched your previous video. thank you
@forces4free
@forces4free Год назад
Amazing videos and knowledge share. Yes please✌️
@AlienaCai
@AlienaCai Год назад
Thank you 🙌
@Peace_seeker
@Peace_seeker 6 месяцев назад
you teach really well dear sis..🥰
@Princeoloto
@Princeoloto 9 месяцев назад
You're a good teacher ❤
@okoyekate2377
@okoyekate2377 10 месяцев назад
Just one watch and I already subscribed U are the best Auto layout design please 🙏
@AlienaCai
@AlienaCai 10 месяцев назад
Here you go: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HwiHqfax7Uk.htmlsi=Mdiv_5iu04eeHWNs
@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 года назад
Thank you so much for this!
@AlienaCai
@AlienaCai 2 года назад
Thank you Zee ❤️👍
@naturalsounds3160
@naturalsounds3160 Год назад
you are brilliant thank you so much
@ronbrown5194
@ronbrown5194 10 месяцев назад
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?
@ligiahinkelmann4333
@ligiahinkelmann4333 Год назад
Thank you Aliena :)
@aexorsystem
@aexorsystem 2 года назад
✌Thanks sister.
@AlienaCai
@AlienaCai 2 года назад
Welcome 😊
@MuhammadYusufMakhsudov
@MuhammadYusufMakhsudov Год назад
it was incredible thanks Aliena
@wpwebsiteshop
@wpwebsiteshop Год назад
What an excellent tutorial! So was the previous tutorial. Thanks!
@jahicrawford-young7196
@jahicrawford-young7196 2 года назад
👍👍👍. Can we please get the interactive video !!!
@AlienaCai
@AlienaCai 2 года назад
On it!
@whooohaa
@whooohaa 3 месяца назад
Hi Alieana... great videos and great lessons!! Thank you so much! Which camera do you use for your videos?
@carln4406
@carln4406 11 месяцев назад
Thank you! I am learning.
@ЛераПарфенова-о2щ
@ЛераПарфенова-о2щ 6 месяцев назад
Thank you for tutorial
@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?
@myusrn
@myusrn Месяц назад
Thanks for the great walkthrough video. What would you say is the difference between a UI and a UX designer?
@AlienaCai
@AlienaCai Месяц назад
Oh I actually have a video on it, you will love it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-RN9LwG36lSE.html
@ChuNodeDigital
@ChuNodeDigital 2 года назад
Love the tutorial🌹
@AlienaCai
@AlienaCai 2 года назад
Thank you!!
@ChuNodeDigital
@ChuNodeDigital 2 года назад
@@AlienaCai you are welcome 😉🍷
@lyle4596
@lyle4596 2 года назад
ありがとうございます。
@AlienaCai
@AlienaCai 2 года назад
どういたしまして。
@Almacky
@Almacky Год назад
Thanks for the tutorial.
@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
@callmezizi
@callmezizi Год назад
thank you so much ✌
@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 😊
@clintcaramat2927
@clintcaramat2927 2 года назад
Great aliena :)
@AlienaCai
@AlienaCai 2 года назад
Thank you!
@devg12
@devg12 Год назад
As a formal geospatial analyst we learn these skills in ArcMap without even realizing it.
@tejaltari
@tejaltari 2 года назад
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 года назад
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! ;)
@ysufibrahim3176
@ysufibrahim3176 3 месяца назад
i luv it🥰✌
@MaxwellNaradd
@MaxwellNaradd Год назад
“Good designs are often invisible”
@paoperz4157
@paoperz4157 Год назад
Super helpful!
@Itsbilal522
@Itsbilal522 2 года назад
Just copy and paste the image, attach it to the frame and you’re fine
@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?
@myusrn
@myusrn Месяц назад
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 Месяц назад
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.
@aircontrolserviceshotsprin1707
@aircontrolserviceshotsprin1707 8 месяцев назад
nice ✌
@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
@Learner0009
@Learner0009 2 года назад
Nice video
@AlienaCai
@AlienaCai 2 года назад
Thank you 👍
@swanandpuyed2531
@swanandpuyed2531 Год назад
Далее
Figma UX tutorial for beginners - Prototype
11:42
Просмотров 178 тыс.
This mother's baby is too unreliable.
00:13
Просмотров 16 млн
14 UX Design Career SECRETS I Wish I Knew
18:23
Просмотров 3,6 тыс.
Figma UX tutorial for beginners - Wireframe
8:41
Просмотров 521 тыс.
13 UX Design Career SECRETS I Wish I Knew
14:03
Просмотров 10 тыс.
If I Started UX in 2024, I'd Do This.
13:15
Просмотров 321 тыс.
Free Figma Crash Course for Beginners 2024 | UI/UX Design
1:01:20
How I'd learn UX Design (if I could start over)
11:28
Просмотров 126 тыс.