How to use Figma Styles & Libraries?

[@CuttingEdgeSchool]

🍿Binge Full Playlist - kzbin.info/aero/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]

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.

[@abhinav8385]

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

[@CuttingEdgeSchool]

Paid ones are also not that good tbh 🤭

[@abhinav8385]

true 😜@@CuttingEdgeSchool

[@musicsupport5319]

​@@CuttingEdgeSchool sir please hindi me bhi videos banaya karo

[@shivarajt9985]

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

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

[@JeyadarshiniRaja2020]

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]

you are so helpful thank youu!

[@dv_one1]

THANK SS

[@Flomisek]

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.

[@vijaykumarreddyp1290]

Hi Ansh. This is Day-3/200 in my journey to being a UX Designer. I've practiced tokens and libraries. Got to admit..the best Figma learning series I've ever seen. Thanks to your series I'm able to practice and understand Figma from the roots. I feel less worried to use Figma now. Again, thank you very much for your efforts in making such in-detail content!

[@dipanshchhabda3716]

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.

[@CuttingEdgeSchool]

Thank you for recognising! Hope you finish all 10 videos

[@jaykishan935]

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

[@Shana-pi7id]

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

[@Sanger2007]

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

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

[@mg9760]

This is the best course for figma in the entire youtube. You are highly underrated brother

[@ruchilad8143]

Thank you for creating such in-depth videos! They have been incredibly helpful. I have been using Figma for a year now, but your videos have introduced me to so many features I wasn’t even aware of. Please keep making content like this. It’s a huge help for learners like me! 👏🏻🙏🏻

[@harioandluigi4569]

You've made learning figma from beginner to advanced, a piece of cake!

[@dishy9973]

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

[@troysmusicalroom5260]

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

[@RitikKhandelwal-e9n]

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

[@Mishkat.Chowdhury]

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

[@naeemrind1776]

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

[@ANITECH001]

00:04 Module 1: Basics of Design Tokens and Styles 02:17 UI colors are divided into three buckets: Grays, Bright Colors, and Error/Warning Colors 06:33 Colors in Figma can be categorized into surface colors, brand colors, and semantics. 08:35 Understanding color palettes in Figma 12:54 Introducing the concept of color tokens and styles for easy understanding and abstraction. 15:10 Using tokens as abstractions to define and control colors in Figma 19:14 Colors can have multiple levels of layering, but other styles like shadows, fonts, and spacing do not. 20:56 Organizing global color styles and component names in Figma Tutorial 24:32 Token names convey purpose, property, and component specificity 26:16 Explanation of tokens and their role in referencing root values. 29:55 In design, values are referred to as keys, which are unique identifiers. 31:48 Token names have two components: type and usage 35:26 Uber's color scheme is divided into separate categories for backgrounds, content, and borders. 37:21 Tokens and color hierarchy in Figma 41:02 Variables in Figma allow you to create a root value and link it to a global name, alias, and component. 42:53 Color styles and type styles are important in Figma 46:35 Learn how to declare color styles quickly using the soter plugin and batch renaming 48:38 Using the Styler plugin in Figma to save time and generate color styles. 52:18 Type styles in Figma can be categorized into label text, display, and paragraphs. 54:05 Naming and organizing text styles in Figma 58:23 Different ways to group elements using Figma 1:00:06 You can declare and publish Styles and Libraries in Figma 1:03:36 Design Systems provide valuable resources for UX designers. 1:05:32 Dedicated free courses for learning are available on learn .in. 1:08:50 Subscribe and hit the Bell icon for updates 1:10:35 The video is about Figma tutorial for beginners.

[@aartibandekar9520]

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

[@yogeshmadse3104]

1:07:48 Please Don't make it basic, this course is really helping me a lot, i am following it and making notes on it in details.

[@ashivy03]

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

[@Joemaniac]

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

[@nikitasingh2656]

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.

[@VanshikaGarg-kb3nz]

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

[@jayant4927]

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

[@CuttingEdgeSchool]

Thank you so much Jayant! really happy to read this

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

[@samuelsolarin7263]

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.

[@CuttingEdgeSchool]

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]

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

[@gajput]

This video is golden content... Superb Ansh!

[@rashigothwal6041]

I'm pursuing my masters in IXD design and just completed my 1st year, I've been following you since one year on all social sites, I just cannot articulate how grateful I am to you for giving me such a deep knowledge excluding all bullshit you talk straight with logics and I really want to say I have not learned anything good from my university but your courses have given me so deep knowledge about my course, I really thank you again and we are there to support you at all the platforms, you are doing a very great job. God bless you for this .... Lots of love and support from Jaipur

[@ameenrrihan4251]

same case of most of the university, but content creators are working hard to educate us

[@charliehenry6126]

@CuttingEdgeSchool, Ansh, thank you for that great tutorial. Everything is clear, but I have a big question: Is there a way to reference a style set to a variable? I understand they are completely different, but at the same time, we have the foundations on which we base everything. So I need to create the same set twice, one for styles and one for variables?

[@payalhora8424]

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

[@hardichudasama2077]

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

[@kartikeymehta4947]

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.

[@Arkapratimbhatt]

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!

[@mirzasaif2325]

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!

[@mahaksingg]

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

[@harshitakhandelwal7860]

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

[@Jigyasa_4]

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

[@dhananjaysingh2662]

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.

[@ujjwalbhatia5911]

Thanks ansh for making such detailed videos. It is really helpful to understand how figma is used.

[@jeewatraj4137]

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

[@yugantsonawale]

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

[@AbdullahSaqib-x9m]

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.

[@Aesthetic.__.Senpai]

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

[@manoharchowdhary7202]

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.

[@akinbayoelijah887]

Just getting to learn here. I must say this is amazing and educative!

[@jollygolani2860]

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

[@tina-be4yt]

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

[@RajatKumar-ku7lx]

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

[@JeyadarshiniRaja2020]

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.

[@mahijain8565]

These videos are really helpful. You are simply a gem thankyou Ansh for putting so much efforts for us. ❤

[@pranavux]

As you said paragraph line height should be135%, but you have taken line height of 32px for 20px font size which is 160% of 20px. Please check video duration 59:00 . Could you elaborate..

[@siddhantchaudhary8106]

I was also confused, but in his previous videos he has suggested to keep the line height for paragraphs to be 150%, so it can be a mistake.

[@dakshiparashar159]

Thank You so much for putting in hard efforts for the welfare of newbies! Your efforts are truly valued :)

[@flyingguitarist7026]

Hey Ansh I am just getting started with Ux design , I don't know how others teach or the quality of them as i don;t have any contrast , i just started to learn ux from you so you are my base . So grateful to get started from you

[@harris3967]

I think this video explained very well about what are the things we have to do to make our lives and developers' life easier. But I had a question, Will this method work if the design and coding is going hand in hand parallel?

[@manansomani2912]

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

[@BhawanaPandey-c8t]

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

[@anweshb8750]

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

[@neehalsayad9255]

Love your efforts bro, really appreciate you ❤❤❤

[@swathimr8003]

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

[@swethadevarshetty657]

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

[@shilpagupta2041]

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

[@Anvesh08]

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

[@KlaraChristie]

I am grateful to you for helping those new to trading become successful traders. Your advice and lessons are truly valuable to us!

[@tayyabsohail8823]

I see complete video I am really amazed of tokens how it help faster choosing right color. One thing I want to share that if any person study in college or university have student account can get figma pro free. I am using figma pro without any pay.

[@SANDEEPUI-UXDesigner]

Dear Audience, On 58:57 Timestamp, It's not "135% of font-size" but it's "135% of line-height".

[@murthysri8081]

Depth of this content is immense

[@Ronak111222333]

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

[@reshukashyap8901]

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

[@AnushkaPruthi]

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

[@CuttingEdgeSchool]

Thank youu! Hope you end up finishing the entire course

[@mohdxaiman]

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

[@yoshasanghvi1764]

loving it! Very insightful and detailed videos

[@jelilabudu]

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

[@MonikaYadav-xg8ox]

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

[@Unknown-uy2hh]

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.

[@Sadiq01]

Great Work Ansh! Lots of Love from Pakistan😍

[@troysmusicalroom5260]

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

[@akashjaladurgam4065]

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

[@faiza_aiza]

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

[@Talkbollywood-w2p]

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

[@hanzalahadi9485]

This is really great detailed video every student as me are looking for

[@Shraddhapaints]

its soo helpful Ansh, Beyond your imagination.. for students who have been looted from so called design Mentor schools .. Thank you so much .. I will surely meet you in person some day and convey!

[@CuttingEdgeSchool]

Thank you!!

[@NetraShah-dt8gh]

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

[@officialinsta9736]

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

[@remax110]

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

[@deepchanda1989]

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

[@prasanjitdey124]

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

[@linsonp3514]

Wonderful in detail videos, thank you Ansh.

[@hannahbluesky]

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🩵☁️✨

[@SgxDesigns]

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

[@mohanaganesh4900]

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

[@anuragkatam1825]

Finally ❤❤ Thank you so much for this course 💗

[@ujjwalbhatia5911]

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

[@Anshikaa25o]

Thankyou Ansh for such valuable information

[@PawanRathore-m8d]

Awesome Ansh your content is very indepth thank you so much

[@Joemaniac]

This is so awesome!! Looking forward for future vids

[@MultiFrzn]

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

[@utkarshmishra7814]

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