Figma Design System: 03 Semantic Color Variables 

Episode 4 is up! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-B24oJclKGDk.html

@@ChristopherDeane Just finished it (Already subscribed) :) Nice work brother, keep them coming once per week hehe. Learned a lot ;)

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 🙂.

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 🙂.

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 🙂.

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)

Interesting on both issues. Feel free to download the 3 - End file so you can skip straight to where they're all set up.

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.

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!

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".

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! 😁 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-B24oJclKGDk.html

Yes. I’ve always called them semantic, and more orgs are starting to adopt that terminology. Even Figma uses Primitive, Semantic and Component naming.