Master Multi-Brand Design Systems with Figma Variables Sync in Tokens Studio

Learn the different approaches to setting up a multi-brand design system in ‪@TokensStudio‬ that can sync to Figma Variables.
Build a community profile + join the community: www.uicollective.co/
Resource library: resources.uicollective.co/
Request a design system audit: www.uicollective.co/design-sy...
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

[@Silverjerk]

Appreciate all the hard work you guys put into these videos. One thing we’re missing in the community is exploring more high-level concepts, like file organization, developer handoff, scaffolding, etc. At least in my case, watching videos covering the fundamentals is an exercise in keeping skills sharp, rather than exploring new ideas. I’m guessing there are some experienced UX/UI designers that may be looking for advice or even just some insight on how other designers and teams manage their projects. As an example, I’m the UX lead for a health and fitness brand with 5 separate applications, some of those share components and basic architecture; all utilize the same design language; and at least one of these introduces vastly different features with separate component libraries that still relies on the skeleton of components from the major shared libraries. I started by creating files by app, and using pages to manage components, design system, etc. I then moved to using projects and libraries to make things more efficient, but this introduced other concerns and had its own brand of limitations. Would love to see some content around these topics. It’s rare to find this sort of education outside of Figma’s own educational videos, which are great, but are still seemingly targeting the more junior-level product designer. Either way, keep up the amazing work.

[@UICollectiveDesign]

We're actually working on some of these items now! Would you be open to providing feedback?

[@Silverjerk]

@@UICollectiveDesign That's great news; I'd absolutely be willing to provide feedback. Excited to see what you guys are working on.

[@UICollectiveDesign]

Submit a request to join our Slack when you can! www.uicollective.co/apply-to-slack @@Silverjerk

[@tanyacequi6556]

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 😊

[@johan8008]

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

[@UICollectiveDesign]

Another tokens vid is coming soon! Stay tuned.

[@morgan.shaffer.design]

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

[@UICollectiveDesign]

Glad it helped! Be sure to join our Slack community :) invite your team as well for any token questions, etc...

[@sophiemulders]

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

[@UICollectiveDesign]

Not an official version, but it is embedded in a number of our videos like this one.

[@vaanresvaanica]

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

[@UICollectiveDesign]

It just doesn't work. No real reason haha

[@coffeecatcode5465]

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

[@UICollectiveDesign]

Tokens Studio offers a number of other benefits including Github sync

[@ramygamal91]

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 🙌

[@UICollectiveDesign]

Another one of the UIC team members can best answer that one :) Join our slack and I can connect you!

[@ramygamal91]

@@UICollectiveDesign Thank you so much 🙏

[@monabarzandeh377]

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?

[@UICollectiveDesign]

It does indeed! Take a look at our second most recent video it might make more sense

[@jonathanstithparedesramos9026]

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

[@UICollectiveDesign]

Sorry I only speak English. However, if Google Translate was right, we have some other videos on other types of tokens :)

[@user-wi6cw3wo9h]

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.

[@UICollectiveDesign]

There are a bunch of reasons, but the largest for me is that Tokens Studio supports font/type tokens/variables, and is far more robust. I, along with many others feel that variables was released half completed.

[@user-rs5qq7tp9u]

Quick question: Are the modes /number of brands here still limited to 4 like in the Figma pro accounts? I'm just facing this problem, I set up 4 Brands with normal figma variable modes but i need to do like 13 or so, for which i would need an organizational plan. Does this plugin work around this? Thanks for a quick response.

[@UICollectiveDesign]

Can I ask why you need 13 modes? This will be a nightmare to manage.

[@user-rs5qq7tp9u]

@@UICollectiveDesign Because I have 13 Brands in my multi-brand system. And then I can just switch complete websites to the style of a different brand and have only one set of master components.

[@user-rs5qq7tp9u]

For example if you had Coca Cola in your example. How would you set it up so you can easily switch a corporate website layout between all 55 Coca Cola brands (Fanta, Powerade, Coke...)

[@UICollectiveDesign]

This is a much deeper conversation. Request to join our Slack and I can connect you with someone who has a ton of experience with this.@@user-rs5qq7tp9u

[@user-rs5qq7tp9u]

I would love that. @@UICollectiveDesign