Figma Design System - Colour System (Using Variables & Tokens) | Part 1 | Figma Variables Tutorial

🚨Follow along with this Figma file -

💛 Thanks for watching, Tair 💛

🍿 _WHAT TO WATCH NEXT_ :

👋🏼 _IF YOU ARE NEW HERE_ :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼. I'd love to hear your ideas and suggestions for my next video, so feel free to comment below. Your support means a lot and helps me keep the channel going and growing!

👾 _MY GEAR_ :

🌼 _CHAPTERS_ :
00:00 Welcome to the series
00:18 Creating Colour Palettes
02:25 My Greyscale Trick 🤫
03:45 Organising the Colours
05:49 Creating Colour Variables
08:16 Creating Colour Tokens
10:00 Calling a Variable Alias
12:30 Assigning the Tokens
12:53 Creating Semantic Tokens
15:54 Coming Up Next

🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.

#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes

[MrBrunobrunic]

Just finished this first episode . Nobody, I repeat nobody explains this s*** better than you. You're raising star ma'am! <333
Thank you once again. Let's go to the episode 2 ;)

[td]

You are amazing! I really searched long hours to find a good guidance on understading these things(tokens, variables, variants etc) and here you are. Thank you so much for your really helpful content!

[micacharise]

I've been scouring over for design system tutorials and yours was the best that I've found!! Short, simple, organized, and most of all -- actionable. Thank you so much!!! 💖 Wishing you more success 🤗

[roadassasin]

You are doing such a great job, Your videos helped clear so many of my doubts regarding the new variable systems on Figma also learned a few new tricks to quickly rename things. More power to you! Wish you more subs in the coming future!

[jswanson]

I just recently discovered your channel and I'm really enjoying the content. I'm starting a new project and I just followed your steps to create the styles and convert them to variables and WOW! Just Brilliant! Thank you for sharing. I'll taking a deeper dive into all of your content. You break it down into digestible steps which is really helpful.

[xefnmsv]

Although the video was just 16 minutes long it look me 2 hours to get the things right but loved the session the positive energy that you radiate is just amazing, makes learning easier for me. Will definitely complete the playlist and get better at design systems.

[thearaav]

Hey! You Skipped the border value parts, I try to guess it. Your files is very clean and tidy. Your 15 minutes make me follow more than 1 hour. But anyway thanks your new Figma Tutorals.

[mhassbo]

Clear explanation and arrangement, you are amazing

[hajnihercz]

Another great video, thank you!

Small tip on the Styler plugin, under "Customise plugin", you have the option to check/uncheck "Reverse generation order". By default, when I used it to generate the colour styles, it went from darker to lighter shades, whereas I prefer the opposite, so checking the Reverse order box fixed this nuisance super quickly :) I also used it to create Text Styles in my preferred order.

[bolkhayegakya]

One of the best series on Design System on Youtube. Well Done :)

[Cleitorcedor]

Olá, eu falo do Brasil e posso garantir que suas aulas são extremamente competentes. Honestamente por aqui não encontramos um material tão completo e com tão boa explicação! Obrigado pela sua dedicação e competência. Incrível!

[haroonbasheer]

Excellent explanation. I was looking for such content for learning design systems and you covered everything thoughtfully. Honestly, I love it!!!!

[ivangarciavaldes]

I love your Videos. I started Using Figma 1 month ago, and you are my inspiration ❤

[whyisitsohardtochangethis]

My mind blowing at the end of the episode

[bhossen]

Your video is amazing. Thanks for making such wonderful and useful video for figma newbies.

[YOGESHGARGOfficial]

"Fantastic breakdown of Figma Design System! 👏 Your clear and concise explanations make understanding this topic a breeze. Kudos for making complex concepts so accessible! Wishing you the best of luck with your future content endeavors!"

[mischugo]

It always remains a bit "difficult" for me to follow at this pace ... but it works (unfortunately I can't understand English language very well 🙈). But the way the tutorials are presented is really great. And always much useful information. Many thanks ❤ 👍🏻

[claudiogferreira]

Amazing tutorial! Especially the tip about the branded greyscale. Keep up with the videos! Thanks.

[kunal]

Hey, thanks a lot! You're probably one of the best at explaining design systems in such a wonderful way. Subscribing you right away.

[swathivadivel]

I just started learning variables from your lectures. I loved it. My suggestion is to take a video from starting to ending you can create web or mobile app design in figma using variables.that could be useful because the values 50, 100, 200 where to use in different areas