Thanks! Just started following your tutorials, and they are pretty refined and accurate. Also you explain the hard complex things in an easy to follow and in practical way. As a product designer, I am working on building manageable DS, your tutorials are helping me in refining our DS for better! Thanks a ton!
Out of all the wonderful things you've recorded, I think you're not getting enough credit for the dramatic pause at 3:15. Just wanted to say I SEE YOU. 👏🏽
This is the info I need, currently refactoring a design system with 14 brands (using variables and modes), I nailed the typography side of things but the colour sent me into a spin, thanks
This is really helpful, thank you. Could you clarify a couple of points on the naming schema for me please? - Can you give an example of when you might use 'Mono'? - Can you give an example of when you might use any of the items in the 'Appearance' column? Thank you!
Mono is for dark buttons and desaturated elements, and in appearance: Bold equals a slightly darker colour, subtle means a light colour and inverse generally means white or if it's white to begin with it'll become dark 🙂
Wow. nice one. But I really wish you walked us through the entire process. I am always stuck trying to find the right use case for my colors. You really made the setting up primitive color so easy. I wish same was done here. please. wanna know this once and for all.
I hear you, although I saved us both time assigning the primitives to their semantic variables up front. Selecting them yourself comes down to how dark you want the headings vs the text, whether you want your status text to pass A or AA A11y, how light you're comfortable setting your disabled variables to. All of which can be subjective or completely driven by your brand or level of A11y you've committed to. Considering I have 10 years exp in design systems, and have already done this process many times, you can trust the values I've set here as we keep going through the rest of the series. Typography is coming soon, and I hope you continue watching 🙂.
Before using the styler plugin select all the elements and use the layers plugin to sort the layer in x or y axis which will fix random order after style are created ❤
Found the last video of Primitive colours was nicely explained. Not able to catchup on this video, not getting how the Semantic color palette is created @3:00.
I see some people using a three layers system for colors. Something like Primitives > Semantics > Components (blue-500 > background-primary > button-background-primary). Which is the best system to follow for a solo designer and why you chose this two layer system?
I use a 2 layer system in FDS, my premium DS called Scale and at work, where we've been able to use the same set of semantic colour variables for 7 different products. After successfully doing so, I've realised you don't need 3 layers, you just need to keep things simple and consistent without too many snowflakes 🙂.
@@ChristopherDeane First of all, thank you for answering. I'm glad to hear that, as I have been struggling myself to create a good system without much complexity. Knowing that you use a two-layer system and have validated it in real products gives me more confidence. Thank you for your videos; your way of explaining and building the system is very consistent and easy to understand compared to the majority of videos on TH-cam.
I use a plugin in the Primitive Color episode that creates the table rows so go watch that one. I modified it from one of the presets it provides and for the table that shows the naming schema, that's in the Tools section of the file as table head and cell components.
It is very interesting everything that you are explaning. I would like to ask you how do you choose the dark colors from light colors palette. How do you know the equivalence? any tip? Thanks
Hi, this has just come from experience over the time I've been a design system lead, I follow industry standard dark mode and elevation principles (levels of the UI) and test A11y contrast ratios and how you generally want the dark mode to look; tweak a few things until it feels right and go from there.
Can you explain how you created the shadows? and I checked your each file available on G-Drive. It doesn't have any other FDS except for border, Iconography and Spinners.
The shadows are inherited from my premium DS called Scale (www.scaledesignsystem.com), and my G-Drive includes all of the up to date FDS Figma files. I've just done button components and this weekend will do a button group episode.
Glad you are back. I wondered why you replaced all the hex codes in the semantic colours but not in the primitives? Is it purely for easy recognition and reference? Also in your naming table for the semantic variables, what does L0, L1 etc refer to in Value? Is it Lightness? Sorry, if I am misunderstanding as some of the terminology is not what I am used to. This also applies to using 'surface' for elevation instead of 'surface' referring to backgrounds and colour floods.
Hello! The primitives are hex values that have names, so you're in a sense replacing a hex value with a name that can be easily understood. That's right, Surface L0, L1, L2 and Shadow L1, L2 come together to create elevation. They're the surfaces you place your content on at different levels in the interface. 🙂
@@ChristopherDeane Thanks for your quick reply. One other question, what is the reasoning for having the 'blue' as a primary colour and also repeated as the 'brand' colour. I am guessing there must be a reason!
Hi Christopher, Thank you so much for your invaluable content. I just didn't understand how you generated your semantic color sheet. Was it done manually or with a plugin?
I used the same components that were created in the Primitives episode then manually updated them. The plugin is called "Variables color style guide": www.figma.com/community/plugin/1270740078273146018/variable-color-style-guide 🙂.
@@ChristopherDeane Thanks for providing such wonderful content! I really love the humor. :) I followed every step from the previous video and successfully created the primitives, including the plugin you mentioned. However, I'm not quite clear on how the plugin determines the semantics. When I tried to follow the instructions here, I only created the color swatch for the primitives. In this video, you mentioned that we don't have to do the work manually, so I'm curious how the plugin knows what colors to select for the content, background, etc. That's where I'm feeling a bit stuck. Could you please clarify? Thanks!
@@ChristopherDeane Thanks for providing such wonderful content! I really love the humor. :) I'm unclear on how the plugin determines the semantics. In this video, you mentioned that we don't have to do the work manually, so I'm curious how the plugin knows what colors to select for the content, background, etc. That's where I'm feeling a bit stuck. Could you please clarify? Thanks!
thank you, Christopher! Does anyone know why the primitive styles wouldn't show up on other Figmas? All my styles and tokens are created in Global Figma and published.
In episode 2 I told them not to, they should only be assigned to a semantic variable and not used directly in design. You should only use the semantic variables when you design as they allow you to switch between modes automatically.
@@ChristopherDeane Thanks Christopher! Yes, that makes sense however, there are certain colors used by brand/marketing and they are not relying on any tokens because they would end up using shades and tints as well. There are no 1:1 relationships because they don't have so-called "themes". I'm not sure if I'm making it super clear. Is it still ok to have access to the styles or it's not recommended. If not what would be the ideal solution? Thanks for the great content. I already set up my system as exactly you taught. 🙌
You could allow them to be seen but provide guidelines on how your team is allowed to use them, and they're not allowed to use them. Or you could create a set of "Accent" semantic variables that can be used on brand elements, data viz and illustrations.
Thank you for this series Christopher. It has been a great asset. Honest Question though, you mention it would take 1-2 hours to assign the semantic variables just hand making them in the variables pane. You cut away for time-concerns a bit, and then you go in and have to replace the hex with the primitive variable by hand anyways... is it really much faster?
1-2 hours when you assign them in the variables window so they actually work. Then I come back and assign them to what's in the table, which isn't required (As they now live and be used as variables) but I put it together for you anyway 🙂.
First of all thanx for your effort. I have a question about background variables. Is there any reason why there is no background colour for warning hover and pressed? Thx
Notice (Warning) is generally used in status icons and Alert components that don't have hover states. If you think you're going to introduce notice buttons (Button component will be done in a future espisode), then you can add them 🙂.
This is really great. Can you please help how to use semantic token names if I am working on a large project? This is the big problem for most of the freelancers like me.
@@ChristopherDeane how do you learn all these always little nuggets of knowledge? Who did you learn from? Would love to know your sources. Also, love the content, excellent resource and been a big help of me upgrading the design system for eastriding.gov.uk
I learnt from creating design systems over the last 10 years, so you could say I've learnt from the industry, the teams I've worked with and the team I lead now. As for FDS and Scale, I'm the source.
"Semantic" has been the terminology I've been using for a while now (Semantic meaning, semantically driven etc) and "Primitive" is a term that replaced what I used to use, which was "Raw". Primitives --> Semantic is also all I need for my own systems and the ones I build for the organisations I work for.
From experience, I’ve done dark mode so many times now I know what works. This is similar to what is in my DS called Scale that I use on all of my projects. scaledesignsystem.com
For some reason the Style plugin isnt working, when I select all the background colour swatches and run the plugin it changes them all to a random colour and creates a single colour style? Also I've published my system, but when I enable it within another design file I don't see all the semantic colour variables, for example I have 16 foreground colours in my foundations file and only 6 show up in my new file.
Hello, first of all, thank you for these tutorials. I encountered exactly the same impediment. I selected all the color swatches in Content and ran the Styler plugin. A single color style called "swatch" was created (as all color swatches are called). And all the color samples were changed to this new "swatch" color. In the case of Primitives, the color swatches were named according to the color. If we name them correctly, everything works correctly :)
Again, something I couldn't replicate. Plugins are a mystery sometimes right? You can download the later versions of the Figma libraries if you like, the link is in the description 🙂.
It’s normal to still have some base/primitive colors not used semantically right? For instance, I have a lot of grays, but some are not aliased, they’re just there because they were apart of the scale, or they’re available *if* they’re needed in the future. Same thing for other colors. Should we delete colors like this, or is it enough to simply hide them from publishing?
When mapping my Dark variables, our system has a separate neutral palette for dark mode. At the Primitive level I have set the hex colours for Light and Dark neutrals, but at the Semantic level I can't reference the dark palette variables, it only shows the light primitives. Would I have to create a Primitive > Neutral Dark group?
That's probably because they all have to be in the same mode level. You could put them in the Primitives set, so you have "Neutral" and "Neutral Dark". Your dark mode semantic variables will then be able to see them.
@@ChristopherDeane thank you, I somewhat figured it out, to view the neutral dark variables in the design I just need to ensure the parent frame/layer primitives and semantic setting is set to "dark".
Thanks!
Just started following your tutorials, and they are pretty refined and accurate. Also you explain the hard complex things in an easy to follow and in practical way.
As a product designer, I am working on building manageable DS, your tutorials are helping me in refining our DS for better! Thanks a ton!
Out of all the wonderful things you've recorded, I think you're not getting enough credit for the dramatic pause at 3:15. Just wanted to say I SEE YOU. 👏🏽
Wait till you see the end of the Iconography episode 😁.
This is the info I need, currently refactoring a design system with 14 brands (using variables and modes), I nailed the typography side of things but the
colour sent me into a spin, thanks
This is soo helpful and exactly what I was looking for to get started with design tokens! Thank you so much for putting this together!! :)
Great series! That space being removed by the Styles to Variable plugin is why I prefer to use kebab case syntax for names.
This is really helpful, thank you. Could you clarify a couple of points on the naming schema for me please?
- Can you give an example of when you might use 'Mono'?
- Can you give an example of when you might use any of the items in the 'Appearance' column?
Thank you!
Mono is for dark buttons and desaturated elements, and in appearance: Bold equals a slightly darker colour, subtle means a light colour and inverse generally means white or if it's white to begin with it'll become dark 🙂
@@ChristopherDeane Thank you Christopher :)
Much awaited video. Nice work brother. Keep them coming. ;)
Episode 4 is up! th-cam.com/video/B24oJclKGDk/w-d-xo.html
@@ChristopherDeane Just finished it (Already subscribed) :) Nice work brother, keep them coming once per week hehe. Learned a lot ;)
Wow. nice one. But I really wish you walked us through the entire process. I am always stuck trying to find the right use case for my colors. You really made the setting up primitive color so easy. I wish same was done here. please. wanna know this once and for all.
I hear you, although I saved us both time assigning the primitives to their semantic variables up front. Selecting them yourself comes down to how dark you want the headings vs the text, whether you want your status text to pass A or AA A11y, how light you're comfortable setting your disabled variables to. All of which can be subjective or completely driven by your brand or level of A11y you've committed to. Considering I have 10 years exp in design systems, and have already done this process many times, you can trust the values I've set here as we keep going through the rest of the series. Typography is coming soon, and I hope you continue watching 🙂.
invaluable content! this help me a lot
Before using the styler plugin select all the elements and use the layers plugin to sort the layer in x or y axis which will fix random order after style are created ❤
Great content as always!
Nice. amazing content for new learners.
Found the last video of Primitive colours was nicely explained. Not able to catchup on this video, not getting how the Semantic color palette is created @3:00.
That's OK if you can't follow this section, you can download the files that are in the description that have them all set up for you anyway.
WoW. amazing content for new learners
I see some people using a three layers system for colors. Something like Primitives > Semantics > Components (blue-500 > background-primary > button-background-primary).
Which is the best system to follow for a solo designer and why you chose this two layer system?
I use a 2 layer system in FDS, my premium DS called Scale and at work, where we've been able to use the same set of semantic colour variables for 7 different products. After successfully doing so, I've realised you don't need 3 layers, you just need to keep things simple and consistent without too many snowflakes 🙂.
@@ChristopherDeane First of all, thank you for answering. I'm glad to hear that, as I have been struggling myself to create a good system without much complexity. Knowing that you use a two-layer system and have validated it in real products gives me more confidence.
Thank you for your videos; your way of explaining and building the system is very consistent and easy to understand compared to the majority of videos on TH-cam.
Thanks for the amazing content mate! Wondering how you put together the semantic table?
I use a plugin in the Primitive Color episode that creates the table rows so go watch that one. I modified it from one of the presets it provides and for the table that shows the naming schema, that's in the Tools section of the file as table head and cell components.
It is very interesting everything that you are explaning. I would like to ask you how do you choose the dark colors from light colors palette. How do you know the equivalence? any tip? Thanks
Hi, this has just come from experience over the time I've been a design system lead, I follow industry standard dark mode and elevation principles (levels of the UI) and test A11y contrast ratios and how you generally want the dark mode to look; tweak a few things until it feels right and go from there.
Can you explain how you created the shadows? and I checked your each file available on G-Drive. It doesn't have any other FDS except for border, Iconography and Spinners.
The shadows are inherited from my premium DS called Scale (www.scaledesignsystem.com), and my G-Drive includes all of the up to date FDS Figma files. I've just done button components and this weekend will do a button group episode.
Glad you are back. I wondered why you replaced all the hex codes in the semantic colours but not in the primitives? Is it purely for easy recognition and reference? Also in your naming table for the semantic variables, what does L0, L1 etc refer to in Value? Is it Lightness? Sorry, if I am misunderstanding as some of the terminology is not what I am used to. This also applies to using 'surface' for elevation instead of 'surface' referring to backgrounds and colour floods.
Hello! The primitives are hex values that have names, so you're in a sense replacing a hex value with a name that can be easily understood.
That's right, Surface L0, L1, L2 and Shadow L1, L2 come together to create elevation. They're the surfaces you place your content on at different levels in the interface. 🙂
@@ChristopherDeane Thanks for your quick reply. One other question, what is the reasoning for having the 'blue' as a primary colour and also repeated as the 'brand' colour. I am guessing there must be a reason!
My brand color is Blue, and yours might be purple, whatever it is, just create the 9 tints of it and you’ll be good to go 🙂.
My brand color is Blue, and yours might be purple, whatever it is, just create the 9 tints of it and you’ll be good to go 🙂.
Hi Christopher,
Thank you so much for your invaluable content. I just didn't understand how you generated your semantic color sheet. Was it done manually or with a plugin?
I used the same components that were created in the Primitives episode then manually updated them. The plugin is called "Variables color style guide": www.figma.com/community/plugin/1270740078273146018/variable-color-style-guide 🙂.
@@ChristopherDeane Thank you!
I was just about to ask this same question and am glad I read this here! (I am trying to replicate the ENTIRE process myself)
@@ChristopherDeane Thanks for providing such wonderful content! I really love the humor. :)
I followed every step from the previous video and successfully created the primitives, including the plugin you mentioned. However, I'm not quite clear on how the plugin determines the semantics. When I tried to follow the instructions here, I only created the color swatch for the primitives. In this video, you mentioned that we don't have to do the work manually, so I'm curious how the plugin knows what colors to select for the content, background, etc. That's where I'm feeling a bit stuck. Could you please clarify? Thanks!
@@ChristopherDeane Thanks for providing such wonderful content! I really love the humor. :)
I'm unclear on how the plugin determines the semantics. In this video, you mentioned that we don't have to do the work manually, so I'm curious how the plugin knows what colors to select for the content, background, etc. That's where I'm feeling a bit stuck. Could you please clarify? Thanks!
thank you, Christopher! Does anyone know why the primitive styles wouldn't show up on other Figmas? All my styles and tokens are created in Global Figma and published.
In episode 2 I told them not to, they should only be assigned to a semantic variable and not used directly in design. You should only use the semantic variables when you design as they allow you to switch between modes automatically.
@@ChristopherDeane Thanks Christopher! Yes, that makes sense however, there are certain colors used by brand/marketing and they are not relying on any tokens because they would end up using shades and tints as well. There are no 1:1 relationships because they don't have so-called "themes". I'm not sure if I'm making it super clear. Is it still ok to have access to the styles or it's not recommended. If not what would be the ideal solution? Thanks for the great content. I already set up my system as exactly you taught. 🙌
You could allow them to be seen but provide guidelines on how your team is allowed to use them, and they're not allowed to use them. Or you could create a set of "Accent" semantic variables that can be used on brand elements, data viz and illustrations.
@@ChristopherDeane Thank you so much! Really appreciate your expertise!
Thank you for this series Christopher. It has been a great asset. Honest Question though, you mention it would take 1-2 hours to assign the semantic variables just hand making them in the variables pane. You cut away for time-concerns a bit, and then you go in and have to replace the hex with the primitive variable by hand anyways... is it really much faster?
1-2 hours when you assign them in the variables window so they actually work. Then I come back and assign them to what's in the table, which isn't required (As they now live and be used as variables) but I put it together for you anyway 🙂.
First of all thanx for your effort. I have a question about background variables. Is there any reason why there is no background colour for warning hover and pressed? Thx
Notice (Warning) is generally used in status icons and Alert components that don't have hover states. If you think you're going to introduce notice buttons (Button component will be done in a future espisode), then you can add them 🙂.
This is really great. Can you please help how to use semantic token names if I am working on a large project? This is the big problem for most of the freelancers like me.
That’ll be coming up soon, after iconography when I do a scoping and usage episode.
Could you explain when one would use the inverse appearance of content?
When it's on a brand color or black background. If it stays inverse (White) in light and dark mode, you can affix "-static" to the variables name.
@@ChristopherDeane how do you learn all these always little nuggets of knowledge? Who did you learn from? Would love to know your sources. Also, love the content, excellent resource and been a big help of me upgrading the design system for eastriding.gov.uk
I learnt from creating design systems over the last 10 years, so you could say I've learnt from the industry, the teams I've worked with and the team I lead now. As for FDS and Scale, I'm the source.
How does it automatically create say Notice?
It doesn't, those were set up previously, the plugin just turns them into their semantic variable in a collection.
Hi. Is there a specific reason why you use Primitives -> Semantic instead of Primitives -> Alias -> Mapped?
"Semantic" has been the terminology I've been using for a while now (Semantic meaning, semantically driven etc) and "Primitive" is a term that replaced what I used to use, which was "Raw". Primitives --> Semantic is also all I need for my own systems and the ones I build for the organisations I work for.
How did you generate choose colour for dark mode?
From experience, I’ve done dark mode so many times now I know what works. This is similar to what is in my DS called Scale that I use on all of my projects.
scaledesignsystem.com
🤩🚀
🙏🏻👍✨
For some reason the Style plugin isnt working, when I select all the background colour swatches and run the plugin it changes them all to a random colour and creates a single colour style?
Also I've published my system, but when I enable it within another design file I don't see all the semantic colour variables, for example I have 16 foreground colours in my foundations file and only 6 show up in my new file.
Interesting on both issues. Feel free to download the 3 - End file so you can skip straight to where they're all set up.
Hello, first of all, thank you for these tutorials. I encountered exactly the same impediment. I selected all the color swatches in Content and ran the Styler plugin. A single color style called "swatch" was created (as all color swatches are called). And all the color samples were changed to this new "swatch" color. In the case of Primitives, the color swatches were named according to the color. If we name them correctly, everything works correctly :)
Again, something I couldn't replicate. Plugins are a mystery sometimes right? You can download the later versions of the Figma libraries if you like, the link is in the description 🙂.
Are semantic colours similar to alias colours?
Yes. I’ve always called them semantic, and more orgs are starting to adopt that terminology. Even Figma uses Primitive, Semantic and Component naming.
It’s normal to still have some base/primitive colors not used semantically right? For instance, I have a lot of grays, but some are not aliased, they’re just there because they were apart of the scale, or they’re available *if* they’re needed in the future. Same thing for other colors. Should we delete colors like this, or is it enough to simply hide them from publishing?
Hi, and yes. It's normal to have the complete tint set on hand whether they are being used or not.
@@ChristopherDeanethank you, hope the next vids in this series are coming soon!
Watch episode 4 now! 😁 th-cam.com/video/B24oJclKGDk/w-d-xo.html
When mapping my Dark variables, our system has a separate neutral palette for dark mode.
At the Primitive level I have set the hex colours for Light and Dark neutrals, but at the Semantic level I can't reference the dark palette variables, it only shows the light primitives.
Would I have to create a Primitive > Neutral Dark group?
That's probably because they all have to be in the same mode level. You could put them in the Primitives set, so you have "Neutral" and "Neutral Dark". Your dark mode semantic variables will then be able to see them.
@@ChristopherDeane thank you, I somewhat figured it out, to view the neutral dark variables in the design I just need to ensure the parent frame/layer primitives and semantic setting is set to "dark".
What is "Mono" role for?
Buttons that are black, amongst other things 🙂.
@@ChristopherDeane Can you give another example? Quite don't understand what "Mono" is for. Thank you for this series of videos, very valuable!