Master Figma Variables: Set Up a Multi-Brand Design System
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2024
- 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
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...
Dark mode video referenced: • Figma Variables: Build...
--
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
I was waiting for this video! Thanks!!
Sweet! Happy to help :) Please like, subscribe, and share our channel where you can
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.
100% agree. The process of creating variables and modes could be streamlined. Half the battle is recreating what you've already added!!
wow, very insightful. thanks for creating this.
No problem :) Please subscribe and share our channel :)
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.
Great comment and also another great approach :)
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.
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...
Have you watched our 'Guide to Advanced Naming & Set Up' video?
I would take a look at this, as it goes through it more in-depth. If not, I can post a longer explanation here.
@@UICollectiveDesign thanks for getting back, and yes I have
@@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,
Okay just on the go right now will post a longer explanation when I can. @@cp3onmtv963
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?
You can put the image inside a component, and then use string variables.... checkout our video on swapping variants using variables.
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 )
I would watch our video: Master Figma Tokens & Variables: Ultimate Guide to Advanced Naming and Set Up!
It goes through this in-depth
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?
You can put them in Mapped :)
Why do you use 100 200 300 400 … naming? How do I not mix them up?
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.
Why are collections "Mapped/Diet Coke" and "Mapped/Sprite" created if the button uses "Mapped/Coke" and you just swap at the alias level?
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.
You dont show how to apply a mode variable to the frame itself, how is that done? Thanks
th-cam.com/video/xNk3QnuowKE/w-d-xo.html I would watch this!!
Is there a way to sync your variables with Github without having to pay for the enterprise version of Figma?
Tokens Studio!