Just hit publish on a new guide! It's called "Variable mapping and design system structure" and you can grab it here: It's hopefully a way to provide some guidance on how to structure your variables and collections according to how your system is set up

Included: 1️⃣ The introductory slides from Config's session 2️⃣ A visual showing the relationship between (colour) variables and styles 3️⃣ Setup for single brand 4️⃣ Setup for multi-brand, shared primitives 5️⃣ Setup for multi-brand, different primitives

First: Colour variables and styles I prefer to keep styles, "feeding" them with variables It sets up us for composite tokens and is more future proof (right now!) Primitive variables ➡️ Semantic variables ➡️ Semantic styles Last step may be repetitive, but it's worth it

Next up is the approach for a single brand This naming convention is the approach for all system setups, but the difference here is that we have a single foundations file

Next: Multiple brands, but the same primitive foundation This is a complex layout, but essentially: • A central primitives file • Each brand has their own semantic foundations file • The primitives are fed into each foundations file

Finally: multiple brands, independent primitives As you'd expect, this means more files! If we have no crossover between brands, it makes sense to keep things distinct These could live in different workspaces, different teams, or within the same project, it's up to you

Lastly, there's a playground section where you can build your own diagrams rather than trying to fiddle around with mine!

Hotfix! @alexiadanton noticed that I had a bug in the variable names We should avoid using slashes in variable named (e.g. red/300) and introduce hyphens (e.g. red-300) Sorry, but you'll have to duplicate this one again 😅

And available in Spanish! Thank you @imandresochoa for translating the description 🙌

This may help, too: an automated x-ray to verify how you've applied variables to the anatomy, properties and now modes of your features :)

Yesss! Love it