Master Figma Variables: Set Up a Multi-Brand Design System

In this tutorial, dive into the world of multi-brand design systems as we guide you through the process of setting up a powerful multi-brand design system using Figma variables with a miniature design system build.

*I apologize for some small audio errors early in the video. My mic went astray and I have been unable to edit them out

--

0:00 An Introduction
0:29 Lesson Brief
1:37 Brand Coke Collection Setup
7:15 Brand Sprite Collection Setup
12:12 Alias Collection Setup
22:28 Mapped Coke Collection
29:49 Mapped Diet Coke Collection
35:20 Mapped Sprite Collection
41:35 Applying Variables

#figma #uxdesign #uidesign

[Underhills]

Great demo as always. When watching this the need of batch actions in Figma is apparent. Should be a function called "same as former" in the mode tables, or just a pre-filled row with all the properties from the former mode table, so if you only need to edit one of the values it could be a huge timesaver. Batching other stuff like autolayout props to many frames simultaneously would also be neat. Hope someone from Figma is taking notes.

[NomNomCactus]

I was waiting for this video! Thanks!!

[ChristianoPinto]

Even though the "Mapped" collection for each brand makes it nice and neat the experience of switching different modes within a brand, the issue is that you must duplicate all your design tokens when doing Mapped/Coke, or Mapped/Coke_Diet etc. Therefore, if you delete one alias/mapped token in one place, you must make sure you delete it everywhere and ofc it also applies when adding new tokens. So in my opinion, in the end, this doesn't differ much from maintaining the same design tokens but in different BRAND FILES (e.g. Sprite DS, Coke Diet DS or Coke DS). In this approach, you still must import/recreate the same list of variables you have in your master, but you do it locally in the Sprite DS file, for example. The advantage here is that you don't need a Mapped collection, which basically exists just to make this workaround. With the local tokens that were copied/recreated from the master naming convention, you can be more straighforward and create Light x Dark in the first level of variables collection.

[porushpuri]

wow, very insightful. thanks for creating this.

[aakashrawat]

I have a question. Let's say we have two brands (Brand A and Brand B), each has it's own typeface. How would you structure it in your collections? Would you first define a 'Type' group in individual brand collection (Brand A and Brand B) with Font as parameters, and then again reference them to the Alias?

[cponmtv]

Really appreciating the consistent AND relevant content!! Cant lie, Im really missing the purpose of the 'mapped' variables you suggest in your systems videos. Im struggling to figure out why ALIAS isnt enough. Is 'mapped' essentially your version of component specific components?? Ive watched all of these vids more times than I care to admit, every time I think I understand the purpose/value of 'mapped' I find myself wondering why that's necessary again...

[ThomasChristensen-yf]

Great video, thanks! I have an issue with two diffrent brands text on-action, color. One of the brands has an dark surface bacground, and the other has a lighter surface background. For the one with the darker surface background i have mapped a lighter text on-action color from my alias collection, and a darker text on-action from my alias collection on the other one.
The problem is that when i am trying to switch between the two brands on my button, the text color does not change automaticly when i change the frame alias to the diffrent brands.

Please help!

[diporko]

Thanks for the video. 👏
Question: What if we need to make component-based tokens? Where should we put that? In Alias token? If yes why did we put radius token in Theme?

[alexyoung-davies]

I really wish you could set a default mode on a file.

Lets say you have a team of 3 designers, and each of them works on a different product brand, designers for brands 2 and 3 will always be forced to build in the default space of brand 1 and be constantly setting the mode overtime they import a component/add a new frame/ pull out a new device frame etc. This feels super tedious.

[jfl]

Really Informative and nice video please keep it up!
Could you please explain to me the difference between alias and mapped ?
English isn't my first language so I find it a bit confusing.( idek if it has smth to do with lang )

[plasticbattles]

So, in your Collection naming structure, does "Brand" = primitive and "Mapped" = semantic? How does "Alias" effect the primitive/semantic hierarchy?

[linkuu]

So I've setup 2 brands with 2 mapped collections:
-Brand 1
-Brand 2
-Alias (brands as modes here)
-mapped/brand 1 (with light and dark)
-mapped/brand 2 (with light and dark)

I can switch brands by selecting the alias, and I can switch to light and dark using mapped/brand a (mapped/brand 1's light/dark modes work for brand 2)

Question is, the second mapped collection seems redundant to edit/apply, am I missing something with my setup? even when applying alias colors, I can only see the colors of Alias brand 1.

would love some help with this, absolutely love the result I've gotten so far with switching brands using your method.

[mds]

Is there any way to create variables for images or brand assets as well? Say you have a Coca Cola frame that includes the Coca Cola logo. Duplicate that frame and set the mode to Sprite, the Sprite logo should be applied where the Coca Cola logo is - is this possible?

[rohancadney-moon]

Is there a way to sync your variables with Github without having to pay for the enterprise version of Figma?

[TheLinktolife]

Why are collections "Mapped/Diet Coke" and "Mapped/Sprite" created if the button uses "Mapped/Coke" and you just swap at the alias level?

[JasonWilson-mm]

You dont show how to apply a mode variable to the frame itself, how is that done? Thanks

[erikalogie]

I'm having trouble getting this approach to work. I've implemented it exactly as in the video (I think) but it is still not working. I've reached out for support on Figma and no one seems to be able to help, and my Youtube comment seems to automatically gets deleted here by a bot every time I put in the link to the Figma community forum issue with details.

[andriidzvonkovskyi]

Why do you use 100 200 300 400 … naming? How do I not mix them up?