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

[@MrBrunobrunic]

Just finished this first episode . Nobody, I repeat nobody explains this s*** better than you. You're raising star ma'am!

[@TDSunshine]

Aww thanks so much! ☀️💛

[@anastasiiakarpovska4029]

Totally agree with you!

[@thearaav6670]

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.

[@TDSunshine]

Hey! I create the border group at 10:53 and I do skip all the variables inside but if you pause on 11:08 you can see the ones I selected 🙃 Hope that helps! ☀

[@thearaav6670]

That's helpful. Thanks@@TDSunshine

[@ghrasko]

COMMENT: Professional subscription provides only 4 modes, just not enough for the example (Value, Primary, Error, Warning, Success), so I would have to go with groups. Enterprise subscription would be needed for the 4+ modes, but that is very expensive for my purposes. Anyhow, I might rename the first "Value" mode to "Primitive" and then do this with a total of 4 modes. I am just trying that.

[@TDSunshine]

Great tip! ☀️🙏🏻

[@carlafdz]

Hello! Why is having a primitive collection with colors and then token collection with the primitive colors better than just using the colors from the primitive collection?

[@TDSunshine]

Using aliases isn't always necessary but sometimes it's really useful and helps keep your system more dynamic! ☀️🙏🏻

[@davidmcloughlin6581]

Great tutorial. I was just wondering how you selected the original colours (0:35). Were there any decisions made to ensure they have similar hue/saturation values. Thank you.

[@TDSunshine]

Yes! I sort of took my brand colour and then changed the hue only to different colours. To keep the brightness and saturation similar. It doesn't always work perfectly but its a good starting point ☀️🙏🏻💛

[@fscsimon]

Hey Tair - thank you so much for creating these. As someone moving from Sketch over to Figma a lot of this was really confusing but you managed to make it fun, easy to understand and accessible - even for me!! One question I have though, I notice that you don't create Variables or Tokens for Black #000000 or White #FFFFFF - is there a particular reason for this?

[@TDSunshine]

Hey! I usually make black and white variables / styles in my project and I am a big believer in this! I think in this method I wanted to show lots of other things to do with colours and it kind of slipped my mind. ☀️🙏🏻

[@bakiKaradeniz]

Thanks for the video. Really liked your teaching style. I have a question. Is it add or remove value to ux using different shades of semantic colors? Are you using colors like this in your projects?

[@TDSunshine]

Thanks! great question, I think the most important thing is to keep it accessible. Sometimes to us, as designers, a slight change in shade is super clear but to anyone else it's barely noticeable. So I would caution against using different shades for different meanings. But you can use shades of the same colour to emphasise their semantic meaning. ☀️🙏🏻

[@joseparedes240]

Love your videos! Was applying the greyscale trick but, how you generate the others tones? I tried to pick one and generate in tints dev but it looks strange. Thanks a lot

[@TDSunshine]

Thanks! I would try to go from the brand colour. Select your brand colour and change the hue to whichever colour you want to create and then play with the brightness / saturation a bit if needed. ☀️🙏🏻

[@javadsaberi_afroo]

I saw that you created from 25 to 950 colors, but you only used a few color modes when setting the variable. What about the rest of the colors?

[@TDSunshine]

I grouped the different colour shades rather than using modes. But you can use anything you feel works best for your design flow ☀️🙏🏻💛

[@fdsgfdghghdhffhdfh-eo7pm]

Hi great video. I don't understand what "subtle" "lighter" "default" "darker" came from? Is this something the designer can just choose or should their be a protocol to follow? What if I need more color surfaces?

[@billscheider9970]

Hi there. Am I doing something wrong? I'm on a professional account and creating semantic tokens. I was able to create the default but, when attempting to create the additional modes, received a figma message telling me I needed to upgrade to an Enterprise account! That doesn't seem right. What d'ya think I might have missed along the way?

[@TDSunshine]

I see you solved it! 🎉☀️

[@binilmathew5714]

Why do we need to delete the styles after create variables? is it okay to keep it there? Will this combination helps you keep things organized, make updates easily, and ensure a cohesive design?

[@TDSunshine]

Having styles and variables with the same name can be confusing. You might accidentally use one instead of the other and not realise and then be unable to prototype it or control it dynamically. ☀️🙏🏻

[@edriasalsa9262]

hi, thank you so much for this it really helps me to learn color system using variables. the way you explained it is easier to understand. i just wanna ask after i use it, why is it that when i use it in UI design, semantic colors like warning, error, and success don't show up in libraries? any tips to make them appear?

[@TDSunshine]

Thanks! They are different modes of the same colour so you will only see one of them and then you will need to change the mode of the element you use them on to see the others. You can change modes in the layer section of the design panel. 🙏🏼☀️

[@td7367]

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!

[@TDSunshine]

Aww thanks! You're very welcome!☀️🙏🏼✨

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

[@bolkhayegakya]

I have all these colors in my design system and I added it but suppose if I have 9 new colors with the single shade only then what should I name those?

[@TDSunshine]

I would say either name them by the colour name and then the number of the shade they would be in their scale (if they had one) or just leave it simple with just the colour name ☀️🙏🏻

[@fernwehtwl]

i do not recommend the styler plug in because it messed up all of my color swatches!!! when i used this plugin it not only doesn't add to the style on figma but it also changes my color swatches too!!=

[@TDSunshine]

Oh no sorry to hear you had a bad experience with it! 🙈 there are lots of plugins out there so hopefully you will find a good one for you to use 🤗🙏🏼☀️

[@sachinkumart]

How to choose color or generate pallet for dark mode

[@TDSunshine]

Great idea! Will add to my list ☀️🙏🏻💛

[@javadsaberi_afroo]

You used material 2 to make the colors of the variable. Why didn't you use material 3?

[@TDSunshine]

Material 2 has this tool (m2.material.io/design/color/the-color-system.html#tools-for-picking-colors) that I don't think is available on Material 3 ☀️🙏🏻💛

[@javadsaberi_afroo]

@@TDSunshine Can you provide a tutorial for this link? And which system is better to go with It is said somewhere light lighter dark darker It is said somewhere primary onprimary secondary on secondary

[@sergio.arboleda]

Thanks!!

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@zainabelbakry.1]

what is the command R in widows?

[@TDSunshine]

CTRL + R ☀️🙏🏻

[@ViB92666]

Can't wait to see how you handle the Typography system since, as far as I know, there's no way to natively "tokenize" fonts in Figma (please, knock me down with this assumption!!)

[@TDSunshine]

Sadly you’re right :/ but Figma did announce that typography variables are in the works! The video about typography system will go live on Monday so watch this space 👀👀

[@meremo657]

hii please at 8:26, you said "if you look in your figma file you'll see this frame for color tokens" i think im confused.. but what exactly do you mean by figma file..i cant see anything on mine. or did you create that frame by your self?? @TD Sunshine

[@meremo657]

i really hope you see this, cause im new to design systems, and i wont lie im beyond lost

[@TDSunshine]

Hey! there is a link in the video description to download the file im working on in the video so you can follow along with me :) here you go - www.figma.com/community/file/1267794150131517088/design-system-1-colour-system ☀️

[@meremo657]

@@TDSunshine thank you so much

[@manobanismo]

Is this works on figma student plan?

[@TDSunshine]

Yes is does! variable modes and prototyping work on education plan and any paid plans 🙏🏼☀️

[@manobanismo]

@@TDSunshine thank you, will defo try it!

[@deeptisharma2297]

Your channel is so under-rated!

[@TDSunshine]

Thanks! 🙏🏻🥹☀️

[@micacharise1330]

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 🤗

[@chrysanthiskalioti4203]

Was thinking exactly the same!

[@TDSunshine]

Aww thank you so much! 🙏🏼☀️

[@tariqahmed3939]

Thanks............

[@TDSunshine]

You're welcome! .......... ☀️🙏🏻

[@TestGA-o5p]

You made this process so easy!!!!Appreciate your work!!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@javadsaberi_afroo]

I think you should make more categories for color such as onsurface onbackground .... The table you prepared does not have many of the basic colors in the project and we will have problems in the real project. Thank you for making the second part of the colors and using the dark mode on a real project

[@TDSunshine]

Great tips! Colours in design systems can be done in so many different ways I agree! In this video I just showed one idea and way of setting it up but I agree that for sure there could be more added and probably some removed ☀️🙏🏻💛

[@Rishik_Jha]

what about dark mode?

[@TDSunshine]

Hey! I have video about light and dark mode :) *Figma light & dark mode variables* - kzbin.info/www/bejne/oGLTfZqPpKacoKs

[@bhossen]

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

[@TDSunshine]

You're welcome! I'm glad it was helpful! ☀️🙏🏻

[@nguyenthiphuonganh3884]

Thank you for your content. It is really helpful. May I ask a question? We create a palette ranging from 50 to 950. Will we use all of these shades? It seems like it could be overwhelming and might lead to an inconsistent design if we don't apply all the rules. When should we use the primary colors from 50-400 and 800-950? I'm looking forward to receiving your feedback if yes Thanks a lot.

[@TDSunshine]

hey! yeah I agree for sure! I would usually keep 3 / 2 shades on either side of my primary colour to use in the design but its good to have all the options in the background. I have recently started "scoping out" the other shades so basically hiding them from selection. ☀️🙏🏻💛

[@gabrielequatela1554]

Thank you very much for yours videos. I'm an iOS Software Engeneer who studying about Figma and design to design and develop an own app and i'm learning a lot. Thank you. but i've a question: Why you create a set of shade for each color when in a app you use just one color? let me explain: in my app, for example I use just red 500. Why, in my design I have to create all shadows of that color? Is there some vantage? I see some designers doing the same as you do and create these colors. Why? There are some reason? Thank your for your patience!

[@TDSunshine]

Thanks! You don't have to create all shades at all :) This is one example of a design system but you should create what works best for you! I do think it's usually useful to have at least one lighter and one darker version of your brand colour because it is useful sometimes but again it's up to you and you design ☀️🙏🏻💛

[@jswanson859]

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.

[@TDSunshine]

aww thank you so much! Im glad you are finding my videos helpful ☀️🤗🙏

[@eliseuramos250]

Amazing content, was very useful for me, thank you!!

[@TDSunshine]

Happy to hear that! ☀️🙏🏻

[@lowlay964]

Yey! I finally found something that I need. Thank you! Your new subscriber here!

[@TDSunshine]

aww thanks! 🙏🏻☀️💛

[@Sincerelygreen]

Really great content! Reg. color tokens- By surface, do you mean back ground colors? @TD Sunshine

[@TDSunshine]

Yes surface=background in this case ☀️🙏🏻💛

[@guyennana]

Thank you for a great video! What would you recommend to organize variables for light vs dark mode and multi-brands?

[@TDSunshine]

Thanks! This is a bit of a make shift one right now :/ Variables are still in Beta and Figma has announced that they are working on theming. You can always use modes to swap between different modes and themes. And you could use styles + componentes and swap between libraries but that does not effect variables right now. I hope that kind of helps ☀️🙃

[@hersones9743]

Nice video

[@TDSunshine]

Thanks! ☀️🙏🏻

[@samduss4193]

question is surfaces here what will be used mostly as Background fill ?

[@TDSunshine]

Exactly ☀️🙏🏻

[@TonyYemelyanov]

Interesting approach! I have a few questions and thoughts about it. One of the benefits of design tokens is their support for semi-automated dark mode, which is valuable for accessibility and the increasing preference for dark themes among users. In your approach, you used variable modes to separate tokens by context. How would you scale this architecture to support dark mode effectively? Additionally, many products either currently support or may want to support multiple UI themes in the future. From my understanding, variable modes are particularly well-suited for this, allowing a seamless switch between light, dark, or any other theme with minimal effort. Is there an aspect I might be missing here? Looking forward to your reply!

[@TDSunshine]

Thanks! So in this example, I took an approach where there is not dark mode so you can use modes for other things like semantic colours. But yes I agree that the most classic case would be to use modes for light and dark mode which makes the swap so easy! When Figma announced variables they said they are working on themeing but its not live yet so one day soon I hope they will launch it! For now you can use "swap library" but bare in mid you can't swap variables :/ I have a video going live about this on Tuesday so keep a look out ☀️🙏🏻💛

[@karenbeal2387]

Hello, really helpful video, thank you! One question, why did you call the greyscale collection 'Style tokens'? Is this to enable adding more colours as modes later if desired? Not sure why you have separated this from the semantic colour set. Thanks again - finding your videos really helpful for understanding variables and tokens!

[@TDSunshine]

The reason I separated them was because the semantic ones have modes and the others don’t so I couldn’t have them in the same collection. Essentially style tokens are like my default styles and then semantic token are for when I need to use colours with meaning or that are connected to the brand/primary colours. I hope that makes sense! ☀️🤗

[@karenbeal2387]

Hello again - I am wondering about using modes for warning/error/success etc when the websites I usually design rarely have the need for them… Have you set up the modes in the Semantic collection purely to make it easier to map onto the style guide? I am not sure how else you would need to change an entire webpage design into 'error' mode for example? Just trying to work out how best to set up my next project file. @@TDSunshine

[@tracyy6619]

@@karenbeal2387 same question, those scenarios are not common, and I wonder if those worth the efforts to set up ?

[@templa946]

Great Video, but tbh, Ive seen a lot of videos like this where I'm failing to understand why you'd have 4 different colours for warning, error & surface and then on top of that, duplication of the exact same for border & surface. Seems OTT, complicated & ultimately not very cohesive

[@TDSunshine]

Thanks! I think it’s all about what you need in your design system. I feel like KZbin is a place to share ideas and get inspired so maybe you don’t need it year 4 colours but this methods of using variable colour modes will be useful for you for something else 🤗☀️🙏🏼

[@darrenstrange2244]

Great video! I’m having problems with how to use the colour system now. If I have two new designs projects, one with a primary green theme and one with a primary pink theme, how can I globally change the colours for each project - because if I change the primary colour on the design system it affects both projects that using the design system? Am I thinking about this in the wrong way? Do I have to duplicate the design system for every single project I work on?

[@TDSunshine]

Thanks! its best practice to use a separate design system per project (if they are for different brands for example). If you are using styles and not variables you can use the swap library function. Im uploading a video on "swap library" in 2 weeks so watch this space! ☀️🙏🏻💛

[@debiprasadsena]

The way your variable(Semantic) are named, I am really in doubt how they will justify the developer at the time of hand off.

[@TDSunshine]

I see what you are saying as modes are a bit tricky with variables technically having the same names and just being in a different mode but As there is there is clear documentation and collaboration between designers and developers any system can work. 🤗☀️

[@serhiytorba]

If you a using modes for success/error/warning/... then you'll not be able to make Dark/Light modes. I think for that purpose better to use groups instead of modes.

[@TDSunshine]

It all depends on what you need in your designs. And what works best for your personal / team preferences ☀️

[@ashishzanzane6602]

Thank you so much. The video is amazing. I have just one question, normally we use modes for dark and light. so why do you do this for success, warning........and also how do I create dark mode then?

[@TDSunshine]

You're welcome! ☺️ it all depends on what you need for your project and designs! In this example I only had light mode so could utilise modes for other things. I have this video that shows how I would use modes for light and dark - kzbin.info/www/bejne/oGLTfZqPpKacoKs
. I hope that helps ☀️🤗🙏🏻

[@ashishzanzane6602]

Thank you.@@TDSunshine I really appreciate your efforts, I have seen so many videos but nobody could explain the design system in this manner. Thank You so much.

[@cga6336]

Why all these videos start with their own template to download? Why doesn't it start from scratch? Come on

[@TDSunshine]

haha sorry for being helpful 👍🏼

[@billscheider9970]

I doing something wrong! I was trying to create more modes rather than creating a new variable. Oops. So I don't need help after all.

[@TDSunshine]

Those "+"s really messed me up too at the start! glad you managed to figure it out though 😄☀️

[@1deplatt]

Why is it called "Surface"? what elements belong in this category? great vid by the way (this is the type of vid that Figma should have provided)

[@TDSunshine]

Fair point! I used "surface" to refer to any backgrounds that we will need in our designs, page backgrounds, or component ones (buttons, drop downs etc). Regarding "semantic", for me, it means that there is meaning behind them. Such as those specific colours are used to signify a warning or an error and not just a normal state. I hope that clarifies it a little bit! ☀️🤗

[@TDSunshine]

@@1deplatt I’d say save that colour and any variations of it in your system for sure! You can name the collection or style group however you want but for sure I would document it all with clear nameing

[@1deplatt]

If I use a light grey color for a webpage BG (from the greyscale primitives) Should I add that color to the surface category??

[@1deplatt]

@@TDSunshine Thanks :) keep up the great work!

[@jayreambonanza1991]

Not giving a shit whether I'm getting the accurate hex code from a snippet or not is definitely a me behavior

[@TDSunshine]

😎 thuglife ☀️

[@ChrisMartin-i4x]

Hey Great video. Question for you that I can't seem to find a no nonsense answer, its seems to be quite a bit of extra work to covert colours from styles to variables. What the benefit of using variables above styles? You mentioned it it was was to apply colours to elements but its also the just as easy with styles? thanks

[@TDSunshine]

Great question! The value of variables is that you can connect variables to other variables. So you can create a sort of system of referencing. Right now styles have a bit more to offer than variables in terms of colours because you can’t save multiple colours into one variable and they can only be solid colours. So you win some you lose some 🤪 I hope that makes sense! I also have this video where I talk about the whole referencing thing in more detail ☀️🙏🏼 - *Variables best practice* - kzbin.info/www/bejne/jX6ne4xua7ebgtE

[@sadianaz-eo9ol]

kindly @TD sunshine mam kindly create a complete design system series and cover all the topics

[@TDSunshine]

Adding to my list! ☀️🙏🏼

[@pramesh27]

Thanks to discribe token system in a very simple way

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@Djerique]

Is there already a Figma plugin that can translate the colors to variables? That you mention in 05:18

[@TDSunshine]

I'm sure there is! worth searching the community for one ☀️🙏🏻

[@cesaracosta8831]

I created a script to create swatches using the JSON list, and runs in the Scripter plugin. so you dont need to use the color picker. if you want me to send ya the script to test let me know :)

[@TDSunshine]

🕶️

[@coralgalaxy544]

The default values of red, orange, yellow, green, blue, purple, pink and grey at 0:54 you have taken for the reference, where can i find those?

[@TDSunshine]

I selected the circle at the top and then copied their HEX value from the fill section of the design panel. You can find the Figma file I worked with in the description if you want to duplicate it. ☀️🤗

[@coralgalaxy544]

Thank you for your reply. I will do the same :)

[@ahmadsharif9038]

I don't have Figma professional. You mentioned that use groupings instead of modes. So inside "Semantic colors", I created Primary/Surface, primary/Border, Primary/Text. And inside of each of these 3, I created their respective colors. And then I repeated this for error, warning and success, and now I have total 36 variables, unlike yours, where you had 9. Am I doing this right? And if I am doing this right, and off course I would not have the option of "Change variable mode" like you did at 15:08, what option would I have for doing what you did at 15:08? Again thanks.

[@TDSunshine]

Hey! Yeah without the professional plan groups are the best way forward 😇 because you can’t “change variable mode” you need to reassign the variables when you need to use a different semantic colour. So if you are using primary/surface and you need it to be an error then you just change the variable to error/surface. Because of the grouping you can easily search the variables for the different semantics ☀️🤗

[@itsyoursenseii]

so we create design system after we built our web designs???

[@TDSunshine]

Sometimes you start from complete 0 and start with a DS before starting the design but sometimes you might join in a project where there isn't a DS in place yet or there is an old outdated one and you need to redo them. Either way design systems are constantly evolving ☀️

[@LanceYoung-j1q]

This is such an amazing channel - thank you so much!

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@liaqatali7633]

Dear Mam, Special thankx for sharing valuable lecture about design system. Please make landing page by using design system for better understanding how to apply all knowledge at once. Love from Pakistan❤❤❤❤ ❤

[@TDSunshine]

Thank you! ☀️🙏🏻💛

[@liaqatali7633]

@@TDSunshine Mam Pleas make series on landing page by using design system like real world project

[@chamudirwijesekera2821]

I want to know how i can use red/ orange or green as the primary colors if its used as error warning and success

[@TDSunshine]

Ooo great question! I think the main thing is to make sure there is a clear difference between them. So if I go for red as my brand colour and I also want a red for error I need to make sure they are very different “kinds of red”. And you may also want to add more visual queues to help the user differentiate that now this red means error by incorporating elements like icons, text, borders etc. I hope that helps! 🙏🏼☀️

[@whyisitsohardtochangethis]

My mind blowing at the end of the episode

[@TDSunshine]

haha in a good way I hope? ☀️🙏🏻💛

[@smilli6415]

can you do a course on creating components with varients and properties for design systems

[@TDSunshine]

hey! the rest of this series has just that! ☀️ You can have a look at this playlist - kzbin.info/aero/PLx-zZQ15gdAozTLq2xMRFhPKp6fjhoZ3E

[@smilli6415]

ok looking forward for more videos @@TDSunshine

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

[@TDSunshine]

Great tip thanks! 💛☀️

[@ivangarciavaldes5060]

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

[@TDSunshine]

Aww thanks! happy to hear they are helpful on your Figma journey 💛☀️

[@aina9873]

Well explained! Thank you!👏🏽

[@TDSunshine]

Thanks! 🙏🏻☀️

[@sergio.arboleda]

2:15 a.m. Completed!

[@TDSunshine]

that's dedication! 😎☀️🙏🏻

[@yumegrade5581]

Should I create a design system for every project? Or can you explain how design systems would adapt to multiple projects with different brand colors etc?

[@yumegrade5581]

Amazing video btw, I’m excited to watch and learn from the entire series! 😊

[@TDSunshine]

Thanks! This is a great question! I have a video going live in a few hours that will go through best practice in setting up a new project! Basically I would say it really depends on the type of project you are designing. But when you start you will usually duplicate design systems into the project (your own ones or ones from the community) and then tweeks them to match what you are working on. ☀️ I hope that helps!

[@djashawe88923]

I've been binge-watching your videos, very useful and helpful. Thanks. I think some degree of design systems can be beneficial to kick things off, but since a design process is about going back and forth and reiterating many times, it's not easy to decide on everything ahead of time. You seem very organized, and I would like to know how you plan things ahead and how your design process is like. If possible, it'd be very nice to see your design process with a short example of a mobile app or or web app in the future. Thanks always for amazing content. 🤓💯👍

[@TDSunshine]

Thanks! I completely agree about the back and worth btw! You can even see through my series that I change things from time to time. Design systems are an ever evolving process 🤗☀️ that’s a good idea though for a video topic! I’ll add it to my list ☀️💛

[@djashawe88923]

Thanks a lot. I look forward to watching your design process one day for you're very organized and I'm sure it'll inspire many others including myself. @@TDSunshine

[@alkesh482]

@@TDSunshine Saw your videos, it is super helpful. Thank you, Sunshine.

[@alkesh482]

@@TDSunshine You can change the Lightness or Brightness value of hue to + or - 10 in Figma

[@HenryReyes9]

Love it, really well put together.

[@TDSunshine]

Thanks! ☀️🙏🏻

[@krishnpal9503]

Very nice

[@TDSunshine]

Thanks! ☀️🙏🏻

[@krishnpal9503]

@@TDSunshine i like your way to describing the topic, and i listend your all video and i like to most word is "Hey" which means "Here" i listened maytime to understand this word only but I really love your work and style 🤗😃 👌

[@realmoha-c5q]

We need more tutorials!❤

[@TDSunshine]

Coming soon... ☀️🙏🏻💛

[@darkWhite728]

Iam facing problem creating modes. Please help

[@TDSunshine]

Are you on a professional plan? variable modes are only available on certain Figma plans ☀️🙏🏻💛

[@darkWhite728]

@@TDSunshine No, I am using free plan

[@altsider]

Great tutorial!! I'll practice and try to convert the Material Design color styles to variables (dark/light). If it work, the challenge will be setup these variables to all MD components 😅

[@TDSunshine]

It’s lots of work to convert a library but might be worth the effort in the long run! ☀️

[@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 sooooo much useful information. Many thanks ❤ 👍🏻

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@whoisjowi]

You're the bestttttttttttttttttttt

[@TDSunshine]

aww thanks! ☀️🙏🏻💛

[@claudiogferreira4267]

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

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@Wict0r7]

Hi! Great video, learning alot! I have a question about the last part in the video(error, warning and success). I Have followed every step you go through and I have copied the primary color frame and when Im switching to error, warning or success, only the surface colors are switching and not border and text. What have I missed? I have the professional subscription

[@Wict0r7]

Issue solved, now it works great! =) A tip for all of you is to be more specific when you name your variables so the system knows from which collections, the colors should be taken from. Instead of just "default". example can be "SemSurfaceDefault".

[@TDSunshine]

Great point! Yes sometimes it gets a bit buggy when variables have the same names / similar ones. Also I find I myself make mistakes and select the wrong ones sometimes because of that 🤪☀️🙏🏼

[@Wict0r7]

@@TDSunshine Thank you! But you are doing a great job by teaching your skills and knowledge. You describe the steps very simply and clearly, which makes it easy to follow along. We learn from each other! :) Keep up your great job

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

[@TDSunshine]

Obrigado! 🙏🏻☀️

[@SaraNielsenMaars]

Thank you for this very simple explanation! Made my start with variables so much easier :) One question tho, how do you go about making hover, pressed and disabled states for each of these tokens?

[@TDSunshine]

You're welcome! You can do that using modes or using different variables on your components ☀️🙏🏻 Figma have a great video on this - kzbin.info/www/bejne/iIm0aYuMntetoNU

[@dsouzaedson]

Variables + Modes = Brilliant!! I just started learning UX as a subject. Even though I learned Figma features, never really understood the practical implementation of those. Watching the first episode gave me a clear understanding of creating Color palettes, Creating Color Shades, and Using Variables in real life. Thank you for teaching about Color Systems. Excited to learn more

[@TDSunshine]

Thanks! I'm glad it helped! ☀️🙏🏻💛

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

[@TDSunshine]

aww thanks! 🙏🏻💛☀️

[@masumsarkerux]

love it. and also u

[@TDSunshine]

🙏🏼☀️

[@areeshaafridi2697]

To me whats confusing is when exactly would we be needing to use all of these options ? Like the negative text or the different options for the borders. A tutorial on how you use these many options to whenever you are designing would be nice. Need to understand their importance and role.

[@TDSunshine]

There are so many different way to use and create design systems its part of the fun! Sometimes you need a really robust system and sometimes 5 colours are enough ☀️🙏🏻💛

[@hardboiled2000]

Nice tut, thanks, do you have a method for picking your primary shades before you initiate a system?

[@TDSunshine]

You're welcome! it depends on lots of factors! I go through it a little in this video (kzbin.info/www/bejne/bYuqeHqujK2cbck) but you can also google " how to select a brand colour" you will find lots of guides out there! I hope that helps 🙏🏻☀️💛

[@imSky69]

such a creative peron , thanks for the tips and keep it up wish the best in your life

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@swathivadivel3025]

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

[@TDSunshine]

Thanks! great idea! ☀️💛🙏🏻

[@marziz]

Absolute magic! Colour styles, variables and tokens have been doing my head for ages. Not only are you a genius in your craft but also your entertaining personality shines through so brightly. Thank you!

[@TDSunshine]

Thank you! ☀️🙏🏻💛

[@ManishaNegi-m1z]

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.

[@TDSunshine]

haha believe me it took me way longer to make this too! Glad you got it working in the end! ☀️🙏🏻💛

[@haroonbasheer1993]

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

[@TDSunshine]

Thanks! I'm glad you enjoyed it! ☀️🙏🏻💛

[@kunal007216]

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

[@TDSunshine]

Aww thanks! ☀️🙏🏻💛

[@abdulaleemakinyoola6796]

Great Insight and clear explanation! Could you please shed more light on how to add tokens for dark mode?

[@TDSunshine]

Thanks! I have tis video on how to use variables for light and dark mode :) I hope that helps! ☀️🤗 *Figma light & dark mode variables* - kzbin.info/www/bejne/oGLTfZqPpKacoKs

[@KshitijShah89]

Love your energy! Thanks for creating these videos.

[@TDSunshine]

aww thanks! will do! ☀️🤗🙏🏻

[@isivaasanaru5643]

Hey, great video! I'm just not sure how you choose the first main colors to then base your shades on?

[@TDSunshine]

Thanks! If you mean the rainbow colours from the start, I just kind of chose ones I liked and wanted to show an example with lots of colours. But sometimes your designs might not need so many, or maybe you already have brand colours to work with and then you can shade less ! it really depends on your needs 🤗 I have this video where I go through a more simplified process of creating a pallet with just a primary and secondary brand colour - kzbin.info/www/bejne/bYuqeHqujK2cbck I hope that helps ☀️🤗

[@streamx2]

Do mind having a look at your FIgma file, it won't open for me? Clicking the Open in Figma button does nothing. Thank you for your videos.

[@TDSunshine]

It works fine for me :/ maybe you have some sort of pop up blocker or something ? You can also search for TD Sunshine in Figma community on the app or in the browser. Hope that helps ☀️🙏🏼

[@streamx2]

@@TDSunshine Worked this morning, Thank you again

[@sadianaz-eo9ol]

just amazing Series for learning Ui Style Guide and the way you Teach such a amazing ❤I Love it💛

[@TDSunshine]

Thanks! 🙏🏻☀️

[@juleonasefi5230]

Thanks for this, you rock 🎸

[@TDSunshine]

You're welcome! ☀️🙏🏻

[@juleonasefi5230]

@@TDSunshine Planning on watching your whole series.. even after using Figma for a year or so now, this is one area I need to improve on. Slowly but surely!

[@viniciuscarliiared2253]

Your videos are fantastic and easy to follow, great help! Thank you

[@TDSunshine]

Thanks! ☀️🙏🏻💛

[@AlenKh-x2u]

The usage of modes is not scalable

[@TDSunshine]

It all depends on what you need for your designs and what your system requires ☀️

[@AlenKh-x2u]

@@TDSunshine that is true, however, there is always needs to be consideration of designing a system scale for the future, and the way video demonstrates the usage of mode is counter intuitive on what Figma recommends, also having background in engineering and design the method is not ideal to have states in different modes