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

[@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.

[@UICollectiveDesign]

100% agree. The process of creating variables and modes could be streamlined. Half the battle is recreating what you've already added!!

[@Rachel-Guideposts]

You can use Shift-Return to copy a line to the next line now.

[@Petter-j4s]

Quick tip for the screenshot issue, I downloaded "Figma Beta" and set the Figma-UI to dark mode (to avoid confusion). Then I open the same file as I'm working within and then I can ALT+TAB between them to reference the variables.

[@NomNomCactus]

I was waiting for this video! Thanks!!

[@UICollectiveDesign]

Sweet! Happy to help :) Please like, subscribe, and share our channel where you can

[@cp3onmtv963]

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...

[@UICollectiveDesign]

Have you watched our 'Guide to Advanced Naming & Set Up' video?

[@UICollectiveDesign]

I would take a look at this, as it goes through it more in-depth. If not, I can post a longer explanation here.

[@cp3onmtv963]

@@UICollectiveDesign thanks for getting back, and yes I have

[@cp3onmtv963]

@@UICollectiveDesign it actually may be good if you could post it here, this way myself and others can screen shot and paste in figma to reference the explanation when building their own system instead of trying to remember time stamps where a good point was made etc,

[@UICollectiveDesign]

Okay just on the go right now will post a longer explanation when I can. @@cp3onmtv963

[@porushpuri]

wow, very insightful. thanks for creating this.

[@UICollectiveDesign]

No problem :) Please subscribe and share our channel :)

[@diporko2486]

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?

[@UICollectiveDesign]

You can put them in Mapped :)

[@tomfallon9654]

Great demo! I have a question. I went through all the steps, however, when I got to the test part, e.g. the button exercise in the video, I wasn't seeing a "layer" or "Alias" as a selection option on the right side. Do I need to do something to the frame? Thank you for your help in advance. Im on version 124.6.5

[@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.

[@UICollectiveDesign]

Great comment and also another great approach :)

[@ThomasChristensen-y9f]

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!

[@juliaeberlein6341]

Did you solve the problem? I have the same :/

[@aakashrawat1996]

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 family/weight/size/line-height as parameters, and then again reference them to the Alias?

[@linkuu17]

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.

[@UICollectiveDesign]

Sorry I missed this comment... So Figma has a weird bug that when two mapped collections share the same alias, only the first alias mode is shown in the preview. It's unfortunate I know, and hopefully something they fix soon!

[@aakashrawat1996]

Hey man, did you find a workaround for it?

[@j4fl929]

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 )

[@UICollectiveDesign]

I would watch our video: Master Figma Tokens & Variables: Ultimate Guide to Advanced Naming and Set Up! It goes through this in-depth

[@alexyoung-davies100]

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.

[@UICollectiveDesign]

So true. Drives me crazy as well!

[@plasticbattles]

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

[@UICollectiveDesign]

This video will explain more: kzbin.info/www/bejne/jXK3q3yBZaacbqs

[@mds9344]

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?

[@UICollectiveDesign]

You can put the image inside a component, and then use string variables.... checkout our video on swapping variants using variables.

[@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 KZbin 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.

[@UICollectiveDesign]

Hm strange. Can you share more about what's not working with it here? Maybe I can help

[@erikalogie]

Ok, I managed to link the Figma Forum link here, please let me know if you can provide any insight! Thanks so much.

[@UICollectiveDesign]

@@erikalogie I still can't see it unfortunately... maybe KZbin is hiding it automatically

[@erikalogie]

@@UICollectiveDesign Looks like they are automatically hiding it, bummer. If you go to Figma forums and search for "Switching between mapped modes for different variable modes is not working", that is my post. Or alternatively, if you have an email address it is possible to share here, I can send you the link that way.

[@erikalogie]

@@UICollectiveDesign Or does the Design System PRO include variables that use this approach and I can use that as a guide to get my own to working? Or does it just have one mapped mode?

[@rohancadney-moon7303]

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

[@UICollectiveDesign]

Tokens Studio!

[@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?

[@UICollectiveDesign]

Great question! Alias or theme swapping is good if the mapped variables are consistent (ie. action primary uses alias primary). But in some cases you might want to apply different theme colours to different mapped variables (ie. action primary uses alias secondary). We simply wanted to show both in this example.

[@JasonWilson-m7m]

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

[@UICollectiveDesign]

kzbin.info/www/bejne/rn_OZISkqtSqgac I would watch this!!

[@andriidzvonkovskyi8184]

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

[@UICollectiveDesign]

100 scale is really good for when you have complex colors or see your number scale evolving... as you can add colors in-between shades (such as 150) By making 100 your lightest, it helps not mix them up, as you'll have a good idea of what is dark vs light. Happy to advise more on your particular use-case.

[@raisulrana2134]

it's cool

[@UICollectiveDesign]

Thanks so much!!