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!
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 🤗
Hello! I admire your talent for conveying things clearly, at a good pace and in a good mood! You are clearly the best tutor I have ever watched! Incomparable! Thank you!
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
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!
Thank you so much for this video. I have seen a couple of videos, but it was very difficult for me to comprehend. I just finished creating my colour style now. Thank you again, ma'am
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.
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!
"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!"
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.
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.
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
the good thing about exporting-importing your tokens is you can found any "typo" or error that way. Figma should have inner ways to validate confliting variable names or restrict characters which would break json standarts..
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.
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! ☀
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!
Hi, Thank you so much for this amazing tutorials on Variables. I have a question, in the video first your created Color tokens vairables out of Primitive color variables and later Semantic color variables to create Modes. Why do we need to have Color tokens variables if those Primitive color variables can be assigned to Modes directly?
You're welcome! using primitives sort of protects you in the long run so you always have all of them linked to one. So if a shade changes or something you change it once and it treacles down. ☀️🙏🏻
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. 🤓💯👍
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 ☀️💛
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
Heey! Also been binge-watching your videos. I just love how clean and organized things are explained 👏 Q: Say if you want to reuse this system for another project, and you need to build new brand colors - how would you do this? My guess is generating a primary palette and replace the purple colors?
Thanks! great question :) Basically yes. For example if you follow this video you can change the greyscale primitives to match the new brand colour and then you can either change the purple primitives to match your brand and it will keep all the alias's "alive" OR you can reconnect your tokens and semantics to new primitives. I hope that helps! ☀️🙏🏻
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?
You're welcome! You can do that using modes or using different variables on your components ☀️🙏🏻 Figma have a great video on this - th-cam.com/video/RXQ8XVirzjs/w-d-xo.html
Thanks! I have tis video on how to use variables for light and dark mode :) I hope that helps! ☀️🤗 *Figma light & dark mode variables* - th-cam.com/video/j1pLgYoAijI/w-d-xo.html
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?
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!
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?
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. ☀️🙏🏻
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
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 ☀️🙏🏻💛
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 ❤ 👍🏻
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?
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. 🙏🏼☀️
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?
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. ☀️🙏🏻
Hey great video i also subscribed your channel. I have a very humble request can you pls pls make a detailed video about variable and tokens? like this topic in basic and more in depth version. I'm saying this because I saw a bunch of videos in TH-cam and no one talking about variable that detailed. your way of teaching is absolutely amazing so it will be so nice and amazing if you pls make a Depth tutorial on Variables pls.
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. ☀️🤗
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 ☀️🙃
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
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. ☀️🙏🏻
Can you confirm if the layer feature that allows you to change the Primary section to ERROR is available in the updated Figma? I can’t seem to find it.
Yes it's still there! If the element you are selecting is using a variable that has a different mode you will see a variable mode button in the appearance section ☀️🙏🏻💛
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.
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 ☀️🙏🏻💛
Glad to hear that! Great question - it all depends on what you need for your project and how you set up your designs. You might not need all of these colours but I like to show examples of a fully-fledged system so you can change it from there and make it your own ☀️🙏🏻💛
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!
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! ☀️🤗
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
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?
You're welcome! it depends on lots of factors! I go through it a little in this video (th-cam.com/video/7ZGGGxWHi7g/w-d-xo.html) but you can also google " how to select a brand colour" you will find lots of guides out there! I hope that helps 🙏🏻☀️💛
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?
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 - th-cam.com/video/j1pLgYoAijI/w-d-xo.html . I hope that helps ☀️🤗🙏🏻
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.
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.
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. ☀️🙏🏻💛
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!!)
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 👀👀
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?
Thanks! yes so they are other background options that might be used to show different elevation levels for example. But this is just one way to do it ! a design system should have whatever you need it to have according to your needs so you may not need this at all or you may need many more types! No one way fits all. ☀️🙏🏻💛
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
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* - th-cam.com/video/WMDJY86RhLo/w-d-xo.html
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!
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 ☀️🙏🏻💛
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?
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! ☀️🙏🏻💛
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 - th-cam.com/video/7ZGGGxWHi7g/w-d-xo.html I hope that helps ☀️🤗
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!
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 ☀️🙏🏻💛
Hi thanks for the video. How manny states should we have in the design System? Warning,success,danger, and informative? this is the right way to name it?
Thanks! I would say those 4 are great to have and pretty useful! sometime you might not need them and sometimes you will ned others as well depending on what you are designing for :) naming wise, these are pretty standard names so you can stick with them if you want ☀️🙏🏻💛
Hey, Quick question: How do you assign the Text color tokens to your Text styles to avoid designers choosing the right style but forgetting to change the color of the text itself? Appreciate your videos so much!
Great question! Sadly there isn't a way to "bind" test styles and colour styles in Figma :/ You can use the style descriptions to remind the users of guidelines but they don't show up unless you look for them so it's not the best :/ ☀️🙏🏻💛
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
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 ☀️
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
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".
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 🤪☀️🙏🏼
@@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
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.
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 ☀️🙏🏻💛
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?
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. ☀️🙏🏻
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 😅
Recently found a video of yours and this is the next one I've seen. Greeat tutorials! I am wondering regarding these color tokens, when you have a company with a brand manual that already have a lighter or darker color - and those are the only ones that can be used. Do you still build the design system like this with all the different shades despite them never being used?
Thanks! It's a bit different when you already have brand colours in place. Sometimes its still useful to get some more shades of your brand colours for backgrounds or visual hierarchy but some brands are really strict about colour use. So sadly my answer is the dreaded - it depends 🙈 the beauty of variables is you can make them to suit your needs 🤗 Sorry its not a more straightforward answer 🙃☀️
@@TDSunshine I appreciate your answer - and I know, it's not always easy to give a straight forward answer, so no worries about that! :) Your answer still helped me though since you mentioned it depends and you can do what suits your needs :)
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❤❤❤❤ ❤
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.
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 ☀️🤗
I love you videos and it's keeping me up to speed in using variables. I would like to know what plugin are you using to do those shortcut keys that does batch renaming? Thanks
Thanks Neil! Batch renaming is a native function in Figma you just need to select more than one element and tap CMD+R/CTRL+R. If you mean the little green squares at the bottom left of my videos that popup when I click on a keyboard key than thats just a graphic I made and added in when editing ☀️🙏🏻
Oh, I see. 😂 I haven't tried selecting more than one element. I just hit CMD+R, expecting a prompt or something. Thanks for explaining. Looking forward to more Figma variables content on your channel. 😊
@@NeilCuestas No worries! selecting only one element and then CMD+R will let you rename that layer in the layers panel ☺ More variable videos will be coming up for sure so keep a look out! ☀
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?
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?
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 ☀️🙏🏻
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! 🙏🏼☀️
Just finished this first episode . Nobody, I repeat nobody explains this s*** better than you. You're raising star ma'am!
Aww thanks so much! ☀️💛
Totally agree with you!
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!
Aww thanks! You're very welcome!☀️🙏🏼✨
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 🤗
Was thinking exactly the same!
Aww thank you so much! 🙏🏼☀️
Hello! I admire your talent for conveying things clearly, at a good pace and in a good mood!
You are clearly the best tutor I have ever watched!
Incomparable! Thank you!
Thank you very much! ☀️🙏🏻💛
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
Thanks! I'm glad it helped! ☀️🙏🏻💛
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!
Thank you so much for this video. I have seen a couple of videos, but it was very difficult for me to comprehend. I just finished creating my colour style now. Thank you again, ma'am
You're very welcome! ☀️🙏🏻💛
This is THE BEST channel regarding Figma on intire TH-cam. Thank you!
Wow, thank you! ☀️🙏🏻💛
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.
aww thank you so much! Im glad you are finding my videos helpful ☀️🤗🙏
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!
Thank you! ☀️🙏🏻💛
This is super easy to follow, no waffle, straight to the point! Thanks Tair!
Yay! You're welcome ☀️🙏🏻💛
"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!"
aww thanks! 🙏🏻💛☀️
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.
Great tip thanks! 💛☀️
I want to say just awesome ❤❤❤❤ your video is too clear and entertained for me. Thank you so much.....❤❤❤❤
So nice of you ☀️🙏🏻💛
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.
haha believe me it took me way longer to make this too! Glad you got it working in the end! ☀️🙏🏻💛
Excellent explanation. I was looking for such content for learning design systems and you covered everything thoughtfully. Honestly, I love it!!!!
Thanks! I'm glad you enjoyed it! ☀️🙏🏻💛
I love your Videos. I started Using Figma 1 month ago, and you are my inspiration ❤
Aww thanks! happy to hear they are helpful on your Figma journey 💛☀️
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
Thanks! great idea! ☀️💛🙏🏻
This channel is doing so well for me, thank you.
I replicated this perfectly, i wished you covered for dark modes, i wonder what hue to pick
Happy it helped! Dark mode is on my list for sure! ☀️🙏🏻💛
Your channel is so under-rated!
Thanks! 🙏🏻🥹☀️
One of the best series on Design System on TH-cam. Well Done :)
Thanks! ☀️🙏🏻
the good thing about exporting-importing your tokens is you can found any "typo" or error that way. Figma should have inner ways to validate confliting variable names or restrict characters which would break json standarts..
Great point! ☀️🙏🏻💛
You made this process so easy!!!!Appreciate your work!!
Thanks! ☀️🙏🏻💛
This is my favorite channel 😁Keep it up!! Love it
Thank you! Will do! ☀️🙏🏻💛
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.
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! ☀
That's helpful. Thanks@@TDSunshine
Really one of the best I found in getting this done properly
Thanks! ☀️🙏🏻💛
Hey, thanks a lot! You're probably one of the best at explaining design systems in such a wonderful way. Subscribing you right away.
Aww thanks! ☀️🙏🏻💛
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!
Obrigado! 🙏🏻☀️
Amazing tutorial! Especially the tip about the branded greyscale. Keep up with the videos! Thanks.
Thanks! ☀️🙏🏻💛
Hi, Thank you so much for this amazing tutorials on Variables. I have a question, in the video first your created Color tokens vairables out of Primitive color variables and later Semantic color variables to create Modes. Why do we need to have Color tokens variables if those Primitive color variables can be assigned to Modes directly?
You're welcome! using primitives sort of protects you in the long run so you always have all of them linked to one. So if a shade changes or something you change it once and it treacles down. ☀️🙏🏻
Your video is amazing. Thanks for making such wonderful and useful video for figma newbies.
You're welcome! I'm glad it was helpful! ☀️🙏🏻
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. 🤓💯👍
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 ☀️💛
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
@@TDSunshine Saw your videos, it is super helpful. Thank you, Sunshine.
@@TDSunshine You can change the Lightness or Brightness value of hue to + or - 10 in Figma
Heey! Also been binge-watching your videos. I just love how clean and organized things are explained 👏 Q: Say if you want to reuse this system for another project, and you need to build new brand colors - how would you do this? My guess is generating a primary palette and replace the purple colors?
Thanks! great question :) Basically yes. For example if you follow this video you can change the greyscale primitives to match the new brand colour and then you can either change the purple primitives to match your brand and it will keep all the alias's "alive" OR you can reconnect your tokens and semantics to new primitives. I hope that helps! ☀️🙏🏻
You can even change the variable name in the primitives and all the connections will still remain intact!
☀
Tru tru 💪@@TDSunshine
Hi Great video first, secondly can you tell why we have not added info and accent color when we are creating semantic tokens?
Thanks! good question! Info and accent can definitely be helpful in a design system it's all about what your product/ project needs. ☀️🙏🏻💛
@TDSunshine okay TYSM✨
just amazing Series for learning Ui Style Guide and the way you Teach such a amazing ❤I Love it💛
Thanks! 🙏🏻☀️
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?
You're welcome! You can do that using modes or using different variables on your components ☀️🙏🏻 Figma have a great video on this - th-cam.com/video/RXQ8XVirzjs/w-d-xo.html
Great Insight and clear explanation! Could you please shed more light on how to add tokens for dark mode?
Thanks! I have tis video on how to use variables for light and dark mode :) I hope that helps! ☀️🤗
*Figma light & dark mode variables* - th-cam.com/video/j1pLgYoAijI/w-d-xo.html
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?
Amazing video btw, I’m excited to watch and learn from the entire series! 😊
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!
Clear explanation and arrangement, you are amazing
Thanks! ☀️🙏🏻💛
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?
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. ☀️🙏🏻
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
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 ☀️🙏🏻💛
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 ❤ 👍🏻
You're welcome! ☀️🙏🏻💛
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?
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. 🙏🏼☀️
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?
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. ☀️🙏🏻
Hey great video i also subscribed your channel. I have a very humble request can you pls pls make a detailed video about variable and tokens? like this topic in basic and more in depth version. I'm saying this because I saw a bunch of videos in TH-cam and no one talking about variable that detailed. your way of teaching is absolutely amazing so it will be so nice and amazing if you pls make a Depth tutorial on Variables pls.
Thanks! I have a whole playlist about variables and making more too! ☀️🙏🏻
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?
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. ☀️🤗
Thank you for your reply. I will do the same :)
Amazing breakdown of Figma Design System! 👏
Thanks! 🙏🏻☀️💛
Thank you for a great video! What would you recommend to organize variables for light vs dark mode and multi-brands?
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 ☀️🙃
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
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. ☀️🙏🏻
This is such an amazing channel - thank you so much!
Thanks! ☀️🙏🏻💛
Can you confirm if the layer feature that allows you to change the Primary section to ERROR is available in the updated Figma? I can’t seem to find it.
Yes it's still there! If the element you are selecting is using a variable that has a different mode you will see a variable mode button in the appearance section ☀️🙏🏻💛
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.
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 ☀️🙏🏻💛
Love your energy! Thanks for creating these videos.
aww thanks! will do! ☀️🤗🙏🏻
I feel more confident in myself after learning the variables.
But how can I use this together? I mean how to combine border with surface and so on
Glad to hear that! Great question - it all depends on what you need for your project and how you set up your designs. You might not need all of these colours but I like to show examples of a fully-fledged system so you can change it from there and make it your own ☀️🙏🏻💛
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!
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! ☀️🤗
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
@@karenbeal2387 same question, those scenarios are not common, and I wonder if those worth the efforts to set up ?
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?
Using aliases isn't always necessary but sometimes it's really useful and helps keep your system more dynamic! ☀️🙏🏻
Amazing content, was very useful for me, thank you!!
Happy to hear that! ☀️🙏🏻
Nice tut, thanks, do you have a method for picking your primary shades before you initiate a system?
You're welcome! it depends on lots of factors! I go through it a little in this video (th-cam.com/video/7ZGGGxWHi7g/w-d-xo.html) but you can also google " how to select a brand colour" you will find lots of guides out there! I hope that helps 🙏🏻☀️💛
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?
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 - th-cam.com/video/j1pLgYoAijI/w-d-xo.html . I hope that helps ☀️🤗🙏🏻
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.
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.
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. ☀️🙏🏻💛
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!!)
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 👀👀
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?
Thanks! yes so they are other background options that might be used to show different elevation levels for example. But this is just one way to do it ! a design system should have whatever you need it to have according to your needs so you may not need this at all or you may need many more types! No one way fits all. ☀️🙏🏻💛
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
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* - th-cam.com/video/WMDJY86RhLo/w-d-xo.html
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!
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 ☀️🙏🏻💛
Your videos are fantastic and easy to follow, great help! Thank you
Thanks! ☀️🙏🏻💛
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?
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! ☀️🙏🏻💛
Hey, great video! I'm just not sure how you choose the first main colors to then base your shades on?
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 -
th-cam.com/video/7ZGGGxWHi7g/w-d-xo.html I hope that helps ☀️🤗
Good job sunsha 😊
Thanks! ☀️🙏🏻💛
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!
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 ☀️🙏🏻💛
Hi thanks for the video. How manny states should we have in the design System? Warning,success,danger, and informative? this is the right way to name it?
Thanks! I would say those 4 are great to have and pretty useful! sometime you might not need them and sometimes you will ned others as well depending on what you are designing for :) naming wise, these are pretty standard names so you can stick with them if you want ☀️🙏🏻💛
Hello is there any playlist for variables?
Yes there is - th-cam.com/play/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI.html ☀️🙏🏻💛
Hey,
Quick question: How do you assign the Text color tokens to your Text styles to avoid designers choosing the right style but forgetting to change the color of the text itself? Appreciate your videos so much!
Great question! Sadly there isn't a way to "bind" test styles and colour styles in Figma :/ You can use the style descriptions to remind the users of guidelines but they don't show up unless you look for them so it's not the best :/ ☀️🙏🏻💛
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
i really hope you see this, cause im new to design systems, and i wont lie im beyond lost
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
☀️
@@TDSunshine thank you so much
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
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".
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 🤪☀️🙏🏼
@@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
Well explained! Thank you!👏🏽
Thanks! 🙏🏻☀️
Love it, really well put together.
Thanks! ☀️🙏🏻
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.
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 ☀️🙏🏻💛
My mind blowing at the end of the episode
haha in a good way I hope? ☀️🙏🏻💛
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?
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. ☀️🙏🏻
What is the use of Style Color group in variable? Kindly explain that, I am not able to understand.
Not sure what you mean by style colour group...
I was lazy and checked if there's a new plug-in to create variables directly - there is! Color Variables Creator by masha. Very useful
ooo great thanks! When I made this video variables were super new so there wasn't much out there yet haha thanks for sharing! ☀️🙏🏻💛
@@TDSunshine thank you for making such comprehensive videos! Love your content:)
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 😅
It’s lots of work to convert a library but might be worth the effort in the long run! ☀️
It was brilliant! Thank you so much💜💜💜
You’re welcome! ☀️🙏🏼💛
can you do a course on creating components with varients and properties for design systems
hey! the rest of this series has just that! ☀️ You can have a look at this playlist - th-cam.com/play/PLx-zZQ15gdAozTLq2xMRFhPKp6fjhoZ3E.html
ok looking forward for more videos @@TDSunshine
Recently found a video of yours and this is the next one I've seen. Greeat tutorials!
I am wondering regarding these color tokens, when you have a company with a brand manual that already have a lighter or darker color - and those are the only ones that can be used. Do you still build the design system like this with all the different shades despite them never being used?
Thanks! It's a bit different when you already have brand colours in place. Sometimes its still useful to get some more shades of your brand colours for backgrounds or visual hierarchy but some brands are really strict about colour use. So sadly my answer is the dreaded - it depends 🙈
the beauty of variables is you can make them to suit your needs 🤗
Sorry its not a more straightforward answer 🙃☀️
@@TDSunshine I appreciate your answer - and I know, it's not always easy to give a straight forward answer, so no worries about that! :) Your answer still helped me though since you mentioned it depends and you can do what suits your needs :)
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❤❤❤❤
❤
Thank you! ☀️🙏🏻💛
@@TDSunshine Mam Pleas make series on landing page by using design system like real world project
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.
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 ☀️🤗
question is surfaces here what will be used mostly as Background fill ?
Exactly ☀️🙏🏻
You deserve to have more subscribers.
I think so too! 🤪 thanks! 🙏🏻☀️💛
I love you videos and it's keeping me up to speed in using variables. I would like to know what plugin are you using to do those shortcut keys that does batch renaming? Thanks
Thanks Neil! Batch renaming is a native function in Figma you just need to select more than one element and tap CMD+R/CTRL+R.
If you mean the little green squares at the bottom left of my videos that popup when I click on a keyboard key than thats just a graphic I made and added in when editing ☀️🙏🏻
Oh, I see. 😂 I haven't tried selecting more than one element. I just hit CMD+R, expecting a prompt or something. Thanks for explaining. Looking forward to more Figma variables content on your channel. 😊
@@NeilCuestas No worries! selecting only one element and then CMD+R will let you rename that layer in the layers panel ☺ More variable videos will be coming up for sure so keep a look out! ☀
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?
I see you solved it! 🎉☀️
How to choose color or generate pallet for dark mode
Great idea! Will add to my list ☀️🙏🏻💛
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?
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 ☀️🙏🏻
u deserve more subscribers, Good job
Thanks! 🙏🏼☀️🤗
such a creative peron , thanks for the tips and keep it up wish the best in your life
Thanks! ☀️🙏🏻💛
Perfect as always!
thanks! 🙏🏻☀️💛
Thank you for this detailed tutorial🎉 God bless you
Thanks! 🤗 You’re welcome ☀️🙏🏼
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?
I grouped the different colour shades rather than using modes. But you can use anything you feel works best for your design flow ☀️🙏🏻💛
I want to know how i can use red/ orange or green as the primary colors if its used as error warning and success
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! 🙏🏼☀️
Perfect as always :)
Thanks! ❤️🙏🏼