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
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. 👏🏽
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!
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 ❤
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 🙂.
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.
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 🙂.
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.
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 🙂.
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.
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!
"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.
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 🙂.
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
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.
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?
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 🙂.
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".
