Hi Anna! 👋 Figma has a great video on getting started with Variables in the ways you are talking about on their YouTube: Figma tutorial: Intro to variables - YouTube

Let me know if you have any further questions and have fun! 🙂

Hi Anna, here’s how I would do it:

• 
  

  Define a base color palette. The colors here are not opinionated, meaning that at this level you’re not declaring what a specific color should be used for. It’s just a name and value, e.g.
  
  --color-base-red-200 = #FF0000

--color-base-dark-900 = #000000

--color-base-light-700 = #EEEEEE

  
  


• 
  

  For each component, define a set of alias variables and assign specific base variables to them as values. E.g., for the error variant of the Toast component:
  
  --color-toast-error-icon = --color-base-red-200

--color-toast-error-text = --color-base-red-200

--color-toast-error-background = --color-base-light-700

--color-toast-error-border = --color-base-dark-900

  
  


• 
  

  Assign the alias colors to the strokes and fills of the layers in your component.

  
  

In this setup you can make global changes by changing your base color palette (e.g., changing the value of --color-base-red-200 from #FF0000 to #EF0000 to better align with the recent changes to brand guidelines) and make local changes at the component level based on mode/variant/state/theme/context:

For light mode:

--color-toast-error-icon = --color-base-red-200

--color-toast-error-text = --color-base-red-200

--color-toast-error-background = --color-base-light-700

--color-toast-error-border = --color-base-dark-900

For dark mode:

--color-toast-error-icon = --color-base-light-700

--color-toast-error-text = --color-base-light-700

--color-toast-error-background = --color-base-red-200

--color-toast-error-border = --color-base-light-700

You can consider another middle layer of alias variables between base- and component- level variables (e.g., a ‘default’ color for text: --color-paragraph-text = --color-base-light-700). However, additional layers of abstraction may make things more complex, as things like color use are highly dependent on context, state, etc (e.g., what’s a paragraph? what about quotes within a paragraph? what if it’s a paragraph in a tooltip? etc).

Another suggestion here: you may want to consult with your engineers to align on the theming and variable naming approach they are thinking of using in CSS or whatever component framework they have in mind. This may be especially relevant now that we have variables in Figma and developers will be able to see the names of these variables in dev mode. It will make everyone’s jobs easier if you are using the same variable names in Figma that they have in code in the same way because you will be speaking the same language.

Here is my take on the issue - Designing a colour system. This article is my take on multi-brand… | by Pavel Kiselev | Medium

You guys, thanks so much for all your replies! It is all clear to me now 🙂