Multi-Brand Design System Setup | Official Guide!!

Learn the different approaches to setting up a multi-brand design system in @TokensStudio that can sync to Figma Variables.

0:00 An Introduction
0:19 Types of Multi-Brand Design Systems
3:32 The Branded House Approach
11:09 Syncing with Variables
15:20 The House of Brands Approach
23:56 Outro

#figma #uxdesign #uidesign

[tanyacequi]

Thanks for this! I think we need more videos like this one diving deeper on the Tokens Studio+ variables workflow for multi-brand and multi-color theme design systems that are required more frequently nowadays. I’m waiting for the UI collective Slack access approval 😊

[johan]

We need more approaches on advanced multi themes brands + token and structure. Thanks for this video, very useful.

[morgan.shaffer.design]

thank you, this was very helpful to my UX team as we are building out our design system

[sophiemulders]

Do you also have an intro on how to use token studio ( free version) ?

[RossMurray]

Hi thanks for this! Do you have any recommendations on how you would set up component level tokens using this house of brands approach? Perhaps within the ALIAS set with a naming convention such as component.button.surface for example?

I'm trying to reduce complexity in my token structure for a multi-brand system and not sure best approach for these. Component level needs to account for possible white labelling in the future. Thanks for any advice :)

[vaanresvaanica]

Simple, Useful & practical, thanks so much!!!
Just a question why you don't make the brand as source?

[ramygamal]

Thank you so much 🙏
Would you please share with me your experience on:
sync the figma variables with Front End library (Code)?
Best case if we can update the variables from Figma and reflect it on our Github/Storybook (or alternatives)
Thanks wish you all the success and happiness 🙌

[DeanRadcliffe-hd]

In the Branded House approach - why would the 3 brands share the same light/dark modes - how does that specialize per-brand?

[samueljames]

With the house of brands approach working with 3 brands, for a single colour to be applied to a ui element, for example surface-primary, does that token have to be replicated in all 3 alias collections for a brand swap to work? Is there a way to have a single token in a collection that serves all 3 brands?

[monabarzandeh]

Thank you for this! I was just wondering whether Figma Variables supports Light and Dark modes with the separated brand approach you just showed us through Tokens Studio?

[joanaSonnhoff]

I thought with figma Variables we don't need the token studio plugin anymore? What are the advantages of token studio instead of only using the new Variables? Thank you for the video.

[jonathanstithparedesramos]

podrias tener un ejercicio pero con otro tipo de tokens la mayoria de los recursos los hacen con los colores

[coffeecatcode]

Why not just set up multiple modes in Figma variables directly instead, to get the same result ?🤔
There's a tutorial on Figma YT channel on how to set up diff themes with dark and light modes for each theme, and different typography and corner radius and everything for each theme