Figma UX tutorial for beginners - Mockup
Вставка
- Опубліковано 27 лип 2024
- Link to Figma: psxid.figma.com/mtvfdvfjvpps
Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-...
This is a beginner friendly Figma UX tutorial, dedicated on creating mockups. Mockup is a high fidelity design representation of your final product. Please check out the previous tutorial on wireframe before jumping to this tutorial.
Previous episode: • Figma UX tutorial for ...
My official insta: / thealienacai
Tutorial breakdown:
What's a mockup?: (0:00)
Creating shape elements in mockup: (0:30)
Creating text elements in mockup: (4:24)
Common scenarios: (5:31)
Creating icons in mockup: (9:25)
Creating system elements in mockup: (11:50)
🚀 Subscribe to learn more about UX design at ua-cam.com/users/alienacai?sub_confirmati...
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... - Наука та технологія
This channel is single handedly going to be the reason for my success as a UX designer. 😃
Thank you 🙏😃😃👍
@@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 ❤️
Totally agree. The videos are great. Are you a self learner or did you go to school to study UX UI?
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 💚💚
You are so welcome! I've also procrastinated on updating my portfolio for months 😅 You are not alone. Let's do it together.
You are a great teacher. God bless you. We need more of these tutorials 🙏🏾🙏🏾
Love from Nigeria 🇳🇬
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!
you're an absolute queen! I've genuinely enjoyed this walk through and had so much fun with this!
✌ 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 !
✌️ 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.
What an excellent tutorial! So was the previous tutorial. Thanks!
This was amazing! I am so glad I found your channel!
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 :)
Yay! Thank you! and have fun 😄
your tutorials are pretty easy to understand. Thanks for this.. Looking forward to learning more
✌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. 😊
I'm so glad to hear that. Keep going with your UI journey 🙌✌️
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. UA-cam 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.
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
Thank you Alieana Cai for the crisp, bite-sized lessons 😊 Looking forward to the prototype session 🎉
You're so welcome!
Love this video! Please make more Figma tutorial videos! I saved this playlist.
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!
Great to hear! Figma is so strong these days.
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
thank you so so so so much. Your comment means a lot to me ❤️ Will keep going 🙏❤️
Link to Figma: psxid.figma.com/mtvfdvfjvpps
Link to Figma Professional Plan: psxid.figma.com/sp3ulqgt744y-cb44ct
Previous episode on wireframe: ua-cam.com/video/D4NyQ5iOMF0/v-deo.html
Thank yo so much for all your videos, I do whatever you teach step by step and finish them.
Glad you like them! And thanks for following along!
You explained all the important points so simple and better than my UIUX instructor in college. No kidding !
✌🏽Wow! You are an amazing teacher. Thank you so much for these tutorials, I’m learning so much.
You are a great teacher! Keep it up. Thank you
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!
Thank you for the feedback. Noted 👍
✌️ Love your step by step tutorial. They're very helpful. Thank you!
Thank you!
This is so helpful! Thank you Aliena 😇✌
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!
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.
very nice video series, i also watched your previous video. thank you
great video !!! excited for part 3
Yay! Thank you!
✌️a great video, ready to prototype ✌️
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 🙏
✌☺ such a fantastic video about UI design
✌Great video...super fast but still enough to get the main purpose of a Mockup. Thanks. Flo✌
You're a good teacher ❤
you gained yourself a new follower! such a great teacher!
Welcome aboard!
it was incredible thanks Aliena
Thank you! I am learning.
This is so amazing and simple to understand. You should do a tutorial on exporting the project to android studio.
Great tutorials Aliena! I would definitely like to see you do the interactive prototype ✌🏽
It's under making!
✌🏼✌🏼Yes, please and thank you so much--you are a rock star!! 🥰🥰
thanks for the tutorial😍
Very well explained.
Oh wow! This was intense but great!!!!!!
Thank you!
Please upload more tutorials of figma. I love your teaching style. You are doing great ❤️ ✌️
Thank you!
Thanks for the tutorial.
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?
Thank you so much! On it!
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.......
You are very welcome 🙏
Soooo Helpful Aliena!!!
I’m glad!
✌🏾 you’re really good at explaining!
I appreciate that!
I am still waiting for this series to continue. I am waiting for the interactive prototype tutorial, please Aliena ♥
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 🤍
you are brilliant thank you so much
finally, I just learned how to place a shape to the desired location when it is not possible using a mouse dragging. thanks.
Yey! Totally feel you. I was also unable to make it pixel perfect for a long long time 😅
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.
Totally, thanks for sharing!
Super helpful!
Aliena does it again 🙌🏻
Thank you again Phil 😃😃😁
Very well done✌! I think you're short and to the point videos are better than the Figma content from LinkedIn Learning.
Thank you so much for this!
Thank you Zee ❤️👍
Thank you Aliena :)
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?
Hi Alieana... great videos and great lessons!! Thank you so much! Which camera do you use for your videos?
Thanks a lot, keep going to teach us
Thank you!
i luv it🥰✌
Thank you for tutorial
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?
Amazing videos and knowledge share. Yes please✌️
Thank you 🙌
thank you so much ✌
Coming from Visio and other tools, your vidoes are super helpful!
Thank you 🙏😀
Hi, love the way you explain everything, i think i found my tutor, see you in next video.☺
Glad it was helpful!
✌🏻need next part as well
Gotcha~ thank you!
you teach really well dear sis..🥰
✌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.
What a great video, you are an awesome teacher!
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?
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.
@aliena Cai - Is there a way to pick a screenshot and de-construct and reverse engineer the frames?
thx so much
Would love to see the interactive prototype!
great video, thank you ma am
You are most welcome
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
Mannn..you explained everything except the part I needed 😢
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?
Just one watch and I already subscribed
U are the best
Auto layout design please 🙏
Here you go: ua-cam.com/video/HwiHqfax7Uk/v-deo.htmlsi=Mdiv_5iu04eeHWNs
thanks alots
nice ✌
The copied icons from coolicons all have a light-yellow-colored frame. Does anyone know how to get rid of it?
your videos are awesome !
Glad you like them!
@@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 😊
Great aliena :)
Thank you!
Hi Aliena, can I ask where can i find the "community" button for the elements? cause my file doesn't have TT
Love the tutorial🌹
Thank you!!
@@AlienaCai you are welcome 😉🍷
why put a rectangle first then put text inside on the rectangle , when you can use auto layout and then fill the container?
practice practice, learn from other product, thq aliena 🇮🇩
Keep going!
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!
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 😄
@@AlienaCai Thanks for helping me out. I really appreciate it! ;)
How do you zoom in??
Quick question: How do I fill the copied heart icon with the red color? Seems like I can only change the stroke color but not the fill color. Thanks!
That's a great question, it's actually a bit complicated because the way these icons are designed. I suggest you to go back to the coolicons page and see if they have a filled version in other part of the page/ another page. Usually, these icon templates will have both filled ones and outlined ones.
Hello! I can't find the Community Page. I have a free account, so I don't have access to it?
✌Thanks sister.
Welcome 😊
Thank you for such valuable information - I just have one question - when exporting a mock-up for a thumbnail for my case study/portfolio, how to I get the image not to pixilate? It happens to both my mobile and desktop mock-up. Much UX love all the way from South Africa🇿🇦🤍
Aha, select the frame, go to bottom right "share", and change 1x to 3x (or 5x)
Thank you🙂@@AlienaCai
ありがとうございます。
どういたしまして。
As a formal geospatial analyst we learn these skills in ArcMap without even realizing it.