Figma Tutorial for Beginners: Styles and Libraries Explained

Figma Tutorial for Beginners: Styles and Libraries Explained | Ansh Mehra

Рет қаралды 55,980

8 ай бұрын

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

Пікірлер: 184

@AnshMehraa 8 ай бұрын

🍿Binge Full Playlist - kzfaq.info/sun/PLlHtucAD9KT3wgeeVqILeW-0rYoQgR1Rh&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/

@Sumit_Bhise 8 ай бұрын

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.

@JeyadarshiniRaja2020 8 ай бұрын

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

@yourartsychicc 6 ай бұрын

you are so helpful thank youu!

@dv_one1 4 ай бұрын

THANK SS

@abhinav8385 8 ай бұрын

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

@AnshMehraa 8 ай бұрын

Paid ones are also not that good tbh 🤭

@abhinav8385 8 ай бұрын

true 😜@@AnshMehraa

@musicsupport5319 8 ай бұрын

@@AnshMehraa sir please hindi me bhi videos banaya karo

@shivarajt9985 3 ай бұрын

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

@NirmlaPaliwal Ай бұрын

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

@Flomisek 3 ай бұрын

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.

@3323_SHRUTIROUNIYAR Ай бұрын

The episodes shows how in depth things are there in designing and glad that you are teaching with such an ease. Thank you!

@dishy9973 7 күн бұрын

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

@Jigyasa_4 6 ай бұрын

just in love with thw way you put everything across for beginners.

@jaykishan935 8 ай бұрын

I have been doing ui/ux since 1 yr bt ur videos have still taught me so much…..

@jeewatraj4137 8 ай бұрын

we are blessed to have you. thank you so much from the bottom my heart.

@user-ff7he8uj5z 8 ай бұрын

I am learning UI/UX by watching your videos. Thank you so much for making such detailed videos that too for free. ❤

@anuragkatam1825 8 ай бұрын

Finally ❤❤ Thank you so much for this course 💗

@Shana-pi7id 8 ай бұрын

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 KZfaq channel and also for the resources what you always share with us.

@TechMag10 Ай бұрын

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.

@isaisaman-eatingcyborg8976 4 ай бұрын

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!

@naeemrind1776 8 ай бұрын

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

@payalhora8424 8 ай бұрын

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

@Sanger2007 8 ай бұрын

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

@shilpagupta2041 7 ай бұрын

please do not stop. It is really a gem for us. 🤩

@VanshikaGarg-kb3nz 8 ай бұрын

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

@JeyadarshiniRaja2020 8 ай бұрын

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.

@user-pj5zx4dq4s 2 ай бұрын

Aaarggg!!!! these Tokens blowed my mind, I am going to rewatch this. Thank you Ansh!

@aartibandekar9520 3 ай бұрын

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

@jelilabudu 25 күн бұрын

There are are a lot to learn from the course.❤

@nikitasingh2656 4 ай бұрын

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.

@yugantsonawale Ай бұрын

Completed the above tutorial and it was again resourceful as always. Thanks for these in depth videos.

@hardichudasama2077 8 ай бұрын

it's very useful for all the person who want to start learning figma..

@Aesthetic.__.Senpai Ай бұрын

Thanks, Ansh for these videos they are very in-depth and no one is discussing this topics

@neehalsayad9255 8 ай бұрын

Love your efforts bro, really appreciate you ❤❤❤

@priyalpal5674 Ай бұрын

So Usefull!!

@Anshikaa25o 3 ай бұрын

Thankyou Ansh for such valuable information

@mirzasaif2325 4 ай бұрын

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!

@Arkapratimbhatt 2 ай бұрын

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!

@akashjaladurgam4065 8 ай бұрын

Ansh thank you so much. You just did a great job!

@Ronak111222333 2 ай бұрын

Great work,this things are pretty simple at glance but actually help lot when work become systematic & efficient

@Anvesh08 4 ай бұрын

Hey ansh . thank you for delivering detailed videos. Designers are blessed to have you😍

@linsonp3514 4 ай бұрын

Wonderful in detail videos, thank you Ansh.

@RajatKumar-ku7lx 8 ай бұрын

Great videos! Thanks for sharing this valuable information and that too for free. Would love to see the rest of the videos ❤

@user-be4eu3py5q 8 ай бұрын

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

@itsmearyan1882 8 ай бұрын

I was waiting for this video and finally ! Thank you😀😃

@AimBigger 8 ай бұрын

Can't hold myself to subscribe, great effort ansh👏

@manansomani2912 8 ай бұрын

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! ❤

@jollygolani2860 8 күн бұрын

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

@SgxDesigns 8 ай бұрын

Learning Process 😍 This will be the best Playlist on your channel ❤

@vaibhavsatav45 4 ай бұрын

Super Informative Video 🙂

@shashankhebbar581 6 ай бұрын

continue bro , I started watching

@faiza_aiza 5 ай бұрын

Such valuable content you give us without any fee. Hats off to you!👏

@kartikeymehta4947 7 ай бұрын

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.

@mohdxaiman 8 ай бұрын

Dont stop keep going ansh please i can't thank you enough for figma series

@tina-be4yt 4 ай бұрын

I am writing to express my gratitude, Thank you so much Ansh Sir.

@shubhapaul2258 3 ай бұрын

Thank you bro for making such valuable content ❤

@Joemaniac 8 ай бұрын

This is so awesome!! Looking forward for future vids

@anweshb8750 7 ай бұрын

Great videos ansh ! Thanks for sharing this valuable information and that too for free. Would love to see the rest of the videos.

@manoharchowdhary7202 2 ай бұрын

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.

@hmm...6555 6 ай бұрын

Very Informative! Amazing

@MonikaYadav-xg8ox 8 ай бұрын

It's awesome.. Thankyou for this type of valuable content.. It's really helping alot for the new designers. 😊

@MultiFrzn 8 ай бұрын

Great work like always. Keep it up brother!! More power to you... 💪🏻

@deepchanda1989 5 ай бұрын

Wonderful video bro. Learn lot of things. Thank you so much.

@remax110 8 ай бұрын

Your tutorial helped me tremendously. I look forward to the next tutorial. Thank you for all your hard work.

@mohanaganesh4900 4 ай бұрын

Hi Ansh ..This is really useful video. Thanks a lot for helping us

@user-xv9dr4wb6x 3 ай бұрын

Awesome Ansh your content is very indepth thank you so much

@atramshatram3392 5 ай бұрын

bro these are just gold mine

@Joemaniac 8 ай бұрын

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

@adityasinghyadav78 8 ай бұрын

please continue this series

@HimanshuDheer 8 ай бұрын

Great learning Ansh sir👍👍

@mahamudurrahmanshaown6724 6 ай бұрын

Very informative content 👌👌

@musicalmood895 6 ай бұрын

Thank you so much sir for these amazing videos ☺️

@cse30someshjha90 8 ай бұрын

Thanks for such a detail video

@Userlyux 8 ай бұрын

Great Work Ansh! Lots of Love from Pakistan😍

@NetraShah-dt8gh 2 ай бұрын

bosss you are mind blowing , hats off 🙇‍♀ thank you so much sir for such efforts. "Mine inspiration"

@swathimr8003 8 ай бұрын

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

@samuelsolarin7263 23 күн бұрын

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.

@AnshMehraa 23 күн бұрын

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

@samuelsolarin7263 23 күн бұрын

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

@troysmusicalroom5260 8 ай бұрын

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 ❤️☺️

@NirmlaPaliwal Ай бұрын

which web site you are using for practice

@Dev3z 8 ай бұрын

just wow!!!

@jayant4927 7 ай бұрын

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

@AnshMehraa 7 ай бұрын

Thank you so much Jayant! really happy to read this

@swethadevarshetty657 4 ай бұрын

Hello Ansh, Thanks for making these kinds of Video's Your Video's are much better than any 50k, or 60k Online BootCamp Videos

@mahaksingg 2 ай бұрын

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

@reshukashyap8901 7 ай бұрын

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

@khushboobhatia6329 Ай бұрын

Loved it

@Islamic_Stratgist 7 ай бұрын

thanks for very in depth

@prasanjitdey124 7 ай бұрын

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

@AnushkaPruthi 2 ай бұрын

Absolutely loved the content and how in depth the video is. Keep going! Learning more and more everyday from you. :)

@AnshMehraa 2 ай бұрын

Thank youu! Hope you end up finishing the entire course

@Mishkat.Chowdhury 3 ай бұрын

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.

@NirmlaPaliwal Ай бұрын

hey i am also watching ansh video but please suggest me where i can do practice. thanks

@harshitakhandelwal7860 2 ай бұрын

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 💙💛

@anmolbhargav2704 7 ай бұрын

2nd shot is done gonna do practice now.

@alphaabhi21 7 ай бұрын

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

@officialinsta9736 8 ай бұрын

Thanks for sharing this. Loved your videos and learn alot from you. Love from Pakistan 🇵🇰❤️

@troysmusicalroom5260 8 ай бұрын

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❤️

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

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.

@riyaski91 5 ай бұрын

Thankyou so much!

@AshishKumar-ou5fi Ай бұрын

Amazing

@ujjwalbhatia5911 6 ай бұрын

Bro plz publish the whole course this is really beneficial for the beginners

@Osholegendry 8 ай бұрын

I love your videos bro ❤

@dhananjaysingh2662 6 ай бұрын

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.

@ashivy03 7 ай бұрын

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

@user-ei9ht7hp8v 2 ай бұрын

gtg for styles, color tokens, fonts as a good resource in figma🔥

@Unknown-uy2hh 8 ай бұрын

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.