Figma Tutorial for Beginners: Styles and Libraries Explained | Ansh Mehra
Vložit
- čas přidán 21. 10. 2023
- 🍿 Watch rest of the Figma Course - • Basics of Figma Series...
This is Episode 3 of Foundations of Figma where we will cover how to practically use Styles, Libraries, and Design tokens along with all the tips and tricks you'll need to use Figma like a professional.
Figma File for Download: www.figma.com/community/file/...
Foundations of Figma is the most practical and actionable Figma course you'll find on the internet with proper homework and resources at the end of every video.
🌏 Keep up with Design and AI:
🔗 / anshmehra.in
🔗 www.anshmehra.com/
🔗 / ansh
🚀 Complete Roadmap to a UX Design Career:
→ learnuiux.in/
🏆 Learn about Prompting and AI Tools:
→ www.howtoprompt.in/
Resources mentioned in the video 👇🏽
🔗 Course Playlist Link: • Basics of Figma Series...
🔗 Figma Community Files - www.figma.com/@anshmehra
👉🏻 UX Inspiration
pageflows.com/
mobbin.com/browse/ios/apps
designvault.io/
uxarchive.com/
uxui.monster/
screenlane.com/?ref=uimovement
👉🏻 Learning
www.checklist.design/
learnmobile.design/
www.microcopy.me/
developer.apple.com/design/hu...
uilearn.com/blog/
uxdesign.cc/47-key-lessons-fo...
👉🏻 Marketing Inspiration
www.saasframe.io/categories/d...
www.darkmodedesign.com/
www.webdesign-inspiration.com/
saaslandingpage.com/
www.landingfolio.com/
marketingexamples.com/
godly.website/
effortlessly.io/
www.showreelz.com/
www.niceverynice.com/components
land-book.com/
onepagelove.com/
👉🏻 Figma Resources
figmalion.com/
uxdesign.cc/the-ultimate-figm...
www.figma.com/best-practices/...
awesomefigtips.com/
shortcuts.design/
nitishkmrk/status...
figmacomponents.com/
👉🏻 Reading Material about UX
/ anshmehra
semigrownkid/stat...
builtformars.com/
history.user-interface.io/
www.loversmagazine.com/
/ garrytan
vanschneider.com/blog/how-to-...
uxmasterclass.design/
start.uxdesign.cc/
👉🏻 Design System Resources
designstrategy.guide/design-m...
www.designsystems.com/
designsystemsrepo.com/design-...
component.gallery/design-syst...
heydesign.systems/
👉🏻 Research Tools
www.whocanuse.com/?bg=993357&...
answersocrates.com/q/en/US/ux
👉🏻 AI Tools + ChatGPT Playlist (Must for upskilling in 2023):
• ChatGPT Full Tutorials...
👉🏻 ChatGPT Explained - The Ultimate Guide For Beginners 2023:
• What is ChatGPT? Step ...
👉🏻 Midjourney AI - Complete 2023 Guide for Beginners:
• Video
👉🏻 Free Hindi UX/UI Design Course (for Designers):
• Learn UX at ₹0 in Hindi
👉🏻 Free English UX/UI Design Course (for Designers):
• Complete English Guide...
👉🏻 UI Redesign Playlist for practical hands-on learning
• Improving mobile app's...
👉🏻Writing UX Design Case Study: Step by Step Process (for Designers):
• Writing UX Design Case...
Do comment your reviews here or on Twitter (@AnshMehraaa) or share a story on Instagram (@anshmehra.in) - Zábava
🍿Binge Full Playlist - czcams.com/play/PLlHtucAD9KT3wgeeVqILeW-0rYoQgR1Rh.html&si=4yajSMq_CPIfbBzE
Figma File for Download: www.figma.com/community/file/1295389047112261243
🚀Complete UX Design Course (9 Weeks, 100% Free):
→ learnuiux.in/
🏆Learn about Prompting and AI Tools:
→ www.howtoprompt.in/
DON'T MAKE THESE VIDEOS JUST BASIC. In depth videos are much needed. I'm jealous of your consistency and dedication, Ansh! Stay healthy and happy.
These type of courses are usually paid and can be seen on udemy etc. giving it away for free with industry practices is just wow. UX designers are blessed to have you!!
Paid ones are also not that good tbh 🤭
true 😜@@AnshMehraa
@@AnshMehraa sir please hindi me bhi videos banaya karo
Very true. I'm amazed to see such a level of effort in detailing. Even after many years of experience, I am learning so much in basics from you @@AnshMehraa
@@shivarajt9985 hi i need suggestion. I am new in figma i had 3 experice in css,html, java script after 4 year i want to start my carrer in figma ux/ui so this field is good or not or where i can practice figma tool.
thanks i hope you will reply me because you have experice
I very much appreciate the “in depth” approach you have in your videos. Compared to 20 minutes of “figma for beginners” where people are explaining only the names of tools and they show you how to make a rectangle, your videos leave me with feeling of accomplishment. In the second video of this series I really liked that you added some articles, because it helped me with making notes and I think I found a lot of important details in there. This one was, as you said yourself, a bit confusing, but I am sure it will get easier once I start using what you brought to us in this video.
I’m using this timeline for self-reference 😊
02:00 - MODULE 1: BASICS OF TOKENS & STYLES
02:06 - Three Buckets: Greys, Brand Colors, Semantics
07:30 - Greys
10:10 - Brand Colors
11:40 - Semantics
12:02 - Colorizing button system with different shades
13:45 - Color Tokens
14:30 - Abstraction, Alias
16:30 - Tokenization
18:03 - Levels of Tokens
20:54 - Real-life Example - 1
22:49 - Real-life Example -2
23:43 - Token Naming
25:13 - Component-specific, state-specific tokens
28:15 - MODULE 2: STUDYING REAL SYSTEMS
29:09 - Base Design Tokens: Anatomy
30:45 - Uber Color design tokens
34:05 - Uber: Color Token Types
35:37 - How Uber defined its greys
38:49 - Uber: Primitive tokens, Semantic tokens, Component-specific tokens
39:54 - Uber Token Name: Summary
43:08 - MODULE 3: PRACTICAL IMPLEMENTATION
43:20 - Color Styles
46:30 - Declaring Greys
51:01 - Type Styles
53:18 - Label styles
58:47 - Paragraphs
59:32 - Useful Figma plugins
01:00:18 - Libraries
01:02:23 - Inspiration for UI & Web Design, Resources to Learn Figma
01:03:10 - Resource for Design Systems
01:06:45 - Homework for next 5 Days
you are so helpful thank youu!
THANK SS
DEFINITELY , THE VIDEOS ARE TOP NOTCH AS A BEGINEER I HAVE TO WATCH VIDEO TWICE OR THRICE TO KEEP UP WITH THE TOPICS , I DIDNT FIND ANY YT CHANNEL DELIVERING THIS QUALITY CONTENT , THANKYOU SO MUCH ANSH
The episodes shows how in depth things are there in designing and glad that you are teaching with such an ease. Thank you!
Hey Ansh, I have watching you since last 4 month and just wanna say, the way you explain things is commendable. I am a beginner, and you are the prime source for me. you are the biggest inspiration and a mentor for me. thank you for this CZcams channel and also for the resources what you always share with us.
I have been doing ui/ux since 1 yr bt ur videos have still taught me so much…..
Please dont stop making these in depth videos. Basic Stuff is out there already. The Reason I come to your channel is for this exact in depth study of tools and concepts. I know that it takes a lot of your resources and money to make these classes but I believe that Having a detailed course that only 5k people see is better than a simple one that millions do because those 90% of the 5k people would get their careers kickstarted because of you. Idk you obv understand things better but I would love to see this series and others like this continue
Ansh, 🙂
I can't thank you enough for the amazing Figma video series. Your attention to detail and thorough explanations make a world of difference for designers like me. Much appreciated!
And this series can be put on another site as a paid course but you have made it free. 👍
just in love with thw way you put everything across for beginners.
In-depth content is exactly what we need, Ansh! Thank you so much for your effort to bring this insanely quality content for FREE. As a newbie transitioning into UX Design, I’m so glad to find your channel. Your videos have helped me a lot in my self-learning process. Especially, this Figma playlist is an absolute gamechanger. And all those resources you curate from time-to-time are very useful.
Yaayy! I've finally reached part 3 of this video series! I started with the Office Hours playlist and then switched here and the reason was simply to get Ansh's perspective and cover the major concepts quickly as Office Hours can initially seem overwhelming. After this, I plan to head back to Figma's playlist, as Ansh suggests.
I've been following Ansh's roadmap for a while and sometimes I truly worry if I will make it to that high-paying internship that Ansh talks about but the only way to find out is to walk the path :)
I am learning UI/UX by watching your videos. Thank you so much for making such detailed videos that too for free. ❤
It's 1:30am and I just finished going through this video and taking vvv detailed notes. Ansh, really grateful that you're providing such valuable content for absolutely free. Your efforts are much much appreciated, keep up the great work!
This is exactly what I was looking for! Thanks for such a clear and concise explanation of Figma Styles and Libraries. I feel much more confident using them now.
we are blessed to have you. thank you so much from the bottom my heart.
Ansh this was a very helpful video i must appreciate it actually after finishing figma beginners playlist i jumped on the office hours playlist which is very advanced version so thank you for this playlist please keep on uploading this playlist..lots of love❤❤❤
Finally ❤❤ Thank you so much for this course 💗
Thank you so much Ansh for making these videos. I had a lot of doubts on figma, related to UX and slowly all are getting cleared in this series. :)
Great work,this things are pretty simple at glance but actually help lot when work become systematic & efficient
Hey Ansh! I was truly impressed by the clarity of your content. The tokens concept was entirely new to me, and I'm eagerly looking forward to more of this insightful content in your upcoming videos. Thank you for sharing these valuable insights! ❤
The content is so so so helpful for someone like me who is transitioning from a completely different field of work to Designing. Thanks for this✨✨✨✨✨
Completed the above tutorial and it was again resourceful as always. Thanks for these in depth videos.
Ansh, first of all, thank you so much for creating such a detailed series for Figma; it's extremely helpful. To be honest, the first two lectures were easily understandable and fun, but this particular third lecture initially made me a bit anxious. I got confused and all, but as you said, to watch each of these videos at least twice, so I watched it again, and I got it. I understood completely what it was all about, and I am really happy now.
Great videos! Thanks for sharing this valuable information and that too for free. Would love to see the rest of the videos ❤
I wasted 4 yrs in design clg and still wasn't taught figma beyond basics. The way u show real apps and decipher good designs and bad and review them, case studies and detailed lectures related to UI UX , I wasn't taught any of it in clg . This is so useful! Thanks a lot
Great videos ansh ! Thanks for sharing this valuable information and that too for free. Would love to see the rest of the videos.
Aaarggg!!!! these Tokens blowed my mind, I am going to rewatch this. Thank you Ansh!
Got some time so thought to refresh some figma concepts and obviously had expected to get something new from Ansh like always. But to my surprise, this isn't just a series covering basics but it actually has very valuable content. Haven't thought of getting design tokens explained so clearly and easily. I know that you have reduced the frequency of video uploads for this series because of not getting that good response. But I'll request to kindly complete it, as it is very valuable for us.
Thanks, Ansh for these videos they are very in-depth and no one is discussing this topics
These videos are really helpful. You are simply a gem thankyou Ansh for putting so much efforts for us. ❤
Thank you for creating such a beautifully designed and well explained courses for absolutely free!!! It is a blessing to find this kind of knowledge on internet for free!
1:08:06 bhaiya plz, keep on making these kinda in-depth videos. I had so much confusion with tokens & stuffs, but now they are so much clear. With some practice it will be crystal clear. Ik it feels “off” to see less response on videos that has so much hard work, but u’ll always have some numbers of dedicated loyal students who will watch these regularly. We need these kinda guidance, I need these kinda videos….thank you ❤️☺️
which web site you are using for practice
This is the best Content on Figma I have seen so far on YT. Please continue to make them as detailed as possible. All love from the UK. You are saving me thousands of pounds man. Thank you so much, Ansh.
Thank you! In fact this is just the start. Once you finish the entire Figma Course, check out our UX Course (all for free) on LearnUIUX.in
@@AnshMehraa I am already on it I only came here to post comments, I love watching from the LearnUIUX platform it’s less distracting compared to watching on YT when you are tempted to click something else and ads
Hey Ansh ! thnkyou so much for your guidance. i've watched this video 3 times , it took me 3 days to complete this. Hats off to you brother. Once again thankyou so much!
Thankyou Ansh for such valuable information
Wonderful in detail videos, thank you Ansh.
This is so awesome!! Looking forward for future vids
Hey ansh .
thank you for delivering detailed videos. Designers are blessed to have you😍
Hi Ansh, Love the way you explain each & every thing in detail. Learnt a lot from these videos. Thank you very much for such valuable lessons.
There are are a lot to learn from the course.❤
So Usefull!!
I was waiting for this video and finally !
Thank you😀😃
Great work like always. Keep it up brother!! More power to you... 💪🏻
love your content please don't stop making videos in details.
You are the only reason I am loving UX UI and getting the confidence that will be able to get job soon
Ansh thank you so much. You just did a great job!
Hi Ansh ..This is really useful video. Thanks a lot for helping us
Love your efforts bro, really appreciate you ❤❤❤
Thank you bro for making such valuable content ❤
it's very useful for all the person who want to start learning figma..
Awesome Ansh your content is very indepth thank you so much
Your tutorial helped me tremendously. I look forward to the next tutorial. Thank you for all your hard work.
Wonderful video bro. Learn lot of things. Thank you so much.
please do not stop. It is really a gem for us. 🤩
It's awesome.. Thankyou for this type of valuable content.. It's really helping alot for the new designers. 😊
Hello Ansh,
This is a much detail oriented video. For a beginner like me of course it took me a lot of patience and effort just to sit and take notes on notion and I feel I am still figuring it out on a lot things since i'm trying to be precise. The videos that are made by you are very helpful and I feel I can only give you feedback once I start exploring and reading about the contents that you create as it requires a lot of efforts.
Thank you for your effort and hardwork , would love to wait for more videos that helps people like me to gain more clarity of complicated topics in laymen's terms . :)
Absolutely loved the content and how in depth the video is. Keep going! Learning more and more everyday from you. :)
Thank youu! Hope you end up finishing the entire course
Learning Process 😍 This will be the best Playlist on your channel ❤
bosss you are mind blowing , hats off 🙇♀ thank you so much sir for such efforts. "Mine inspiration"
Can't hold myself to subscribe, great effort ansh👏
I am writing to express my gratitude, Thank you so much Ansh Sir.
Thank you so much sir for these amazing videos ☺️
Such valuable content you give us without any fee. Hats off to you!👏
Very Informative! Amazing
Dont stop keep going ansh please i can't thank you enough for figma series
I have watched 1 and 2. Made notes in Figma (not yet in notion). Posted those notes on one of my instagram page (because I ain't confident about LinkedIn yet) and just finished watching video 3. You are amazing Ansh 💙💛
Super Informative Video 🙂
I gotta say, it's an absolute gem! Your step-by-step breakdown had me feeling like a design wizard in no time. 🧙♂ The clarity putted into the tutorial made learning eazyyyy -Thanks a ton for sharing🚀✨. EK number contentttttttt BESHTTTTTTTT :)
Thank you so much Jayant! really happy to read this
continue bro , I started watching
Loved it
Thanks for such a detail video
Thank you, Ansh. I've tried learning Figma from various sources, but I'm truly satisfied with your teaching. Now, I'm consistently learning Figma from you.
hey i am also watching ansh video but please suggest me where i can do practice.
thanks
Thank you Ansh for this amazing video learned a log though I am late I hope I can keep up with your videos as you continue.......
thanks for very in depth
I'm following your videos bro and it's really helping to learn deeply about Figma. Please don't make it a basic videos there are tons already. we need deep knowledge about this to learn it in better way. You're really doing a great job. Please don't stop 😟. Complete the series please🙏🙏
bro your content is just superb, don't worry about views you will get them so soon as not everyone is coming to learn figma but with time this will be reaching to all, wish you the best for your future and thankyou for such a content ❤❤
bro these are just gold mine
just wow!!!
hi sir my name is mahak from madhya pradesh bhopal and i am learning figma from you i really appreciate every effort of yours and just dont stop keep teaching me you can change my life loved this vdo
Bhaiya I don't know if you'll read this, but consider this as a small request from a girl who has taken a step ahead in her life by watching your videos. Hands down, I haven't seen any video which is so in-depth about Figma and it is really the best resource. Please continue this series because it helps me to gain more knowledge about the core tool and also fills the gaps that I had while self-exploring the tool. All I can say is nothing but a thank you. For putting in so much work just to ensure that we as students can learn better. :) P.S.: Please upload the next episode toooooo!!!
Hello Ansh,
Thanks for making these kinds of Video's
Your Video's are much better than any 50k, or 60k Online BootCamp Videos
Very informative content 👌👌
2nd shot is done gonna do practice now.
Great learning Ansh sir👍👍
I’m very tired today so I’ll watch this video some other time, but I have only come here to like and comment because I already know this has to be a bomber….😂😍💯 Thank you so much Ansh bhaiya for standing beside us❤️
Great Work Ansh! Lots of Love from Pakistan😍
Thankyou so much!
Thank you so much
Amazing
gtg for styles, color tokens, fonts as a good resource in figma🔥
please continue this series
Ansh, I have a request upon reading the comments I found out that many people including me were having difficulty in understanding how these concepts would work in real life and would be their implementations be like while working with a team. If you add a segment focused on this problem, it would be a real help. Love your content and thanks for these insights.
At the end of the figma course please create a project and use every thing which we learned just for recall everything and understand how we start and complete project. Thanks for sharing value able content best figma course ever i was using figma for 2 years after your video, i think i don't even know the basics of figma.
Thanks for sharing this. Loved your videos and learn alot from you. Love from Pakistan 🇵🇰❤️
Things I loved about this course :
1. All the information is from an angle of how a beginner should explore the Figma world.
2. The industry-level terminologies and their usage.
3. The Hierarchy of the information presented.
Thanks man for putting in so much effort.
Thank you for recognising! Hope you finish all 10 videos
Awesome video! Can you do more videos on Design tokens? Like how to create a design token in figma and share it to developers. Doesnt have to be part of this course, but a seperate video completely.
thank you 😇
This video is a little bit more complicated than last episodes but I know I can understand better after rewatch it
Thank you for your detailed video Ansh🩵☁️✨