Master Figma Tokens & Variables: Ultimate Guide to Advanced Naming and Set Up

Unlock the secrets to ‪@Figma‬ token and Figma variable mastery in this tutorial on naming conventions associated with different variable collections, and then how to setup these tokens in ‪@TokensStudio‬ and then sync with Figma variables.
Build a community profile + join the community: www.uicollecti...
Resource library: resources.uico...
Request a design system audit: www.uicollecti...
Our Figma Plugin: www.figma.com/...
0:00 An Introduction
0:51 Brand, Alias, Mapped Collection Intro
2:13 The Relationship Between Collections
4:53 Brand Variable Naming Conventions
9:07 Alias Variable Naming Conventions
11:42 Mapped Variable Naming Conventions
15:00 Setting Up Color Chart
17:33 Initiating Brand Themes
22:24 Initiating Alias Themes
25:59 Initiating Mapped Collection
28:29 Syncing Tokens with Variables
30:40 Building a Component with Variables

[@liberhandmade]

Hi, I just wanted to say that I'm learning a lot from your videos. This is a bit off-topic, but you have such a beautiful voice, and your pronunciation is so good that I can understand every single word you say, even though English is not my main language! Thanks a lot!

[@UICollectiveDesign]

Really appreciate the kind words!!! Please subscribe and share our channel on social media where you can :) Your support goes a long way!

[@djashawe88923]

Here's what I've understood: In design system tokenization, the choice between a two-step and three-step process depends on how you structure your tokens. The two-step method (A=B=C) straightforwardly assigns variables, while the three-step approach (A=B; B=C) in the video breaks variables into "what they're used for" (Alias) and "where they're used" (Mapped). The choice of structure-whether to organize by broader to specific categories or by usage contexts-is flexible and depends on your team's preferences and workflow. For instance, you might categorize from a broader category (Alias) to a specific category (Mapped), offering flexibility in how you organize your design system tokens. Both methods achieve the same outcomes, but the primary benefit of using a three-step process over a two-step process in tokenization is to avoid long names and reduce multiple layers of nested groups. This approach can provide greater clarity and organization, especially in large and complex design systems, by breaking down the hierarchy into more manageable parts.

[@UICollectiveDesign]

Nailed it!!

[@wonsunparque4788]

This much layering and componentization will require a dedicated design system team to maintain and keep it updated as business grows and changes. It is probably more appropriate for a larger organization. For a small design team < 5 people in a startup environment, it may be overly complicated and they probably should use a much simpler structure. A simpler and more straight-forward system will also make onboarding new designers much easier, which happens a lot for startup companies. Designers come and go. The design system should be easy to update for new designers to accommodate new business / brand direction as start up companies find their identities in the ever-changing business environment.

[@UICollectiveDesign]

I agree! However, this structure can still be applied in smaller scales. Emphasis is not necessarily on all the different variables required, but on setting it up right so it has the flexibility to grow.

[@mona.abdelmeged]

Hi again! Your teaching style is so clear and easy, I've understood the concept very well. Thanks 🤩

[@UICollectiveDesign]

Happy to hear that! Please subscribe and share our channel where you can :)

[@jess.doing.things]

Thank you for these videos! Super helpful as I transition from component-based to semantic tokenization

[@UICollectiveDesign]

Happy to help! Please subscribe and share our channel/vids where you can :)

[@sophiemulders]

Tip for colors: get HSL() and make tokens voor lightness, saturation and hue. And for the tints just drop the lightness. And then for changing the color you only need to change the hue token

[@UICollectiveDesign]

Great call out!!

[@OlhaMitrova]

Thank you for the video! Still is unclear what is the purpose of the Alias collection if we can just make from the Purple 500 -> Surface primary. Could you please help me to understand why do we need this additional chain?

[@nortim]

I'd like more clarity on this also

[@1deplatt]

I was just going to mention this. Why use an alias level just to add the words primary, secondary, etc. ??? Could we not just call the color on the brand level “purple -primary “

[@sophiemulders]

@@1deplatt what if client or you decide that purple is not primary anymore?

[@deeteekay6859]

Building a color scale just by adding white to create light tones and adding black to create dark tones won't give you rich tints or shades that work well with gradients, and illustrations or that look like what you can find in nature. It is ideal to also make use of the luminance value of color to create a more natural tint or shade.

[@UICollectiveDesign]

Agreed - This is just an example :) I appreciate the dialogue!

[@UICollectiveDesign]

Rookie indeed! But great to get started. A lot goes into building an accessible pallet and there are so many tools out there that help now.@spikespiegel2511

[@illustrayking3243]

the better approach is uniform color using oklch() or learning munsell color system

[@deeteekay6859]

If your alias color collection is the same thing as your brand collection, what's the purpose of creating it? Why not just use the alias naming convention for the brand and use the brand collection to build the mapped collections?

[@UICollectiveDesign]

Great question! Your colours need a role. You can also have brand colors, that are not assigned a role. Therefore, brand is not always a 1:1 match of what is in alias.

[@Akram-UXUI]

@@UICollectiveDesign Great..

[@UICollectiveDesign]

@@Akram-UXUI Glad it helped!

[@cintiapena1696]

@@UICollectiveDesign Cant they then be added as styles rather than adding in brand collection variable?

[@UICollectiveDesign]

@@cintiapena1696 They can as well, but the variables are wrapped inside of the styles :)

[@JohnDrach]

Everybody uses the color scale method in their design system. It looks good in the docs but who actually uses all the variants of those colors. You may for a hover, maybe a pressed state but the others I can never find a use for. Love the video. Not trying to detract from it. Just something see a lot. Would love to hear how other make use of the spectrums of color from their DS.

[@UICollectiveDesign]

So true. I like to keep my color scales to 5 or 6 to keep things clean. In one of my recent videos where we build out a library, I touch on this. Agreed that a ton of colors look nice in docs, but 80% of them just sit there.

[@JohnDrach]

I was watching some more of your vids this morning, and I came across this mention. Great content. Question, I noticed while running through some quick tests that in some cases, even though i'm on Figma enterprise I would get a popup saying I needed to pay $75 per seat to use variables. Do you know what the rule is, how many variables you can leverage before you're cut off?@@UICollectiveDesign

[@Fabian-fk8qs]

@@UICollectiveDesign For shades of grey I need many of them and when it comes to colored labels (e.g. unsaturated color as background, saturated for text) that each have a hover state and a pressed state you quickly need much too from my experience.

[@The3er0]

on 16:50 where you make color scale there a much easier way to do this. When you select a color just change HEX to HSB and change the two fields in the middle that represent white and black.

[@UICollectiveDesign]

Great call out!

[@bradmacdonald6591]

@@UICollectiveDesign Do you mean modify Saturation and Brightness?

[@bradmacdonald6591]

Reducing the Saturation by 50%, is the same hex as taking your primary, reducing opacity by 50%, color matching with the extra square workflow.

[@UICollectiveDesign]

That works as well!@@bradmacdonald6591

[@atharnadeem6947]

I have learnt a lot from your videos. keep going brother.

[@UICollectiveDesign]

A lot more on the way! Please subscribe and share our channel where you can :)

[@lewisaupy]

Thank you for popularizing these concepts, this video is a pleasure to watch! 🙂

[@UICollectiveDesign]

Glad you like it! Please share the video :)

[@seredadenis]

Setting set to "source" just doesn't work on variables yet (only styles generation), because variables require a full collection setup (core->semantic->component) to keep the aliases.

[@UICollectiveDesign]

Great call out :)

[@problemimentali]

sorry, what's the purpose of using Tokens Studio to then just sync to Figma variables? I don't see any advantage in doing that as opposed to just do the setup directly with variables. Am I missing something here?

[@UICollectiveDesign]

With Figma's variable release in December, there isn't much point anymore. Will be releasing a video next week on this....

[@problemimentali]

@@UICollectiveDesign gotcha, thanks for the answer. I'll be looking forward for the new video

[@Nicciolai]

@@problemimentali me too

[@UICollectiveDesign]

Just posted the vid this morning@@problemimentali

[@sophiemulders]

Which video is this? I was wondering the same. And second question; i am new to tokenstudio and cant find a tutorial how it works ( applying to your design) (free version), do you have a video on that? So i can make a descision which to choose.

[@mp11195]

I like 3-tier approach to variable collections, but it looks a bit odd to me to have a very specific variable in the Brand collection - radiusComponent. What's the reason for this? why not have it either in Alias' or Mapped collection?

[@UICollectiveDesign]

Great question, I would watch the following video kzbin.info/www/bejne/jXK3q3yBZaacbqs

[@AmishEspacial]

@@UICollectiveDesign This link takes to this same video :)

[@NguyenThanhTung-xi2ju]

Thank you, I love this tutorial

[@UICollectiveDesign]

Glad it helped!

[@ahzootube]

So if the brand colors given from the brand team are already aliases like "CTA Blue" and "Primary Blue", what would your approach be?

[@UICollectiveDesign]

Primary/Blue is fine. CTA Blue would become Surface/Primary

[@galuhsp4378]

can we make some new color that has some opacity with it, but we use the reference form the brand/global tokens?

[@UICollectiveDesign]

Absolutely!!

[@majidmanavi]

Thanks for your amazing content.

[@UICollectiveDesign]

Glad you like it :) Please subscribe and share our channel

[@Exaltaweb]

If you do a super simple design system how would you simplify all these colors, sizes, etc?

[@UICollectiveDesign]

That depends on the use-case. This already is quite simple as is.

[@yamilafritzler1224]

I think font size token is missing

[@UICollectiveDesign]

Sorry this must have been a recording oversight

[@mischugo]

I really like this structure. But I don't think I would go to the trouble of reorganizing an existing UI kit. I also find it a bit too "bureaucratic" or fragmented. If you could start from scratch, that would be different. Thanks

[@UICollectiveDesign]

Filming a video now where I build one from scratch :) Agreed, reorganizing an entire UI kit is aggressive. But for those getting started or have questions about particular tokens, this was meant to help.

[@mischugo]

@@UICollectiveDesign Sure ❤️

[@sophiemulders]

So your mapped collection is same as component tokens?

[@UICollectiveDesign]

Nope! It's best to avoid component-level tokens where possible. Mapped are not component specific, but if you really need a component level token, it can belong in Mapped.

[@polenunes]

@@UICollectiveDesign Why it is best to avoid component level tokens?

[@UICollectiveDesign]

@@polenunes It can cause overcomplexity and inconsistencies if borders, surfaces, etc... all are unique. Additionally, if a change does need to be made, it must be made across each token, instead of just adjusting one value.

[@vaibhavnaik12]

I have one question, if we are using color theme as purple 500, 600, 800 etc and my primary brand color is 800. If future if the brand color got changed and new brand color is green 500, then how would it work across for changing colors?

[@UICollectiveDesign]

Can you can adjust the brand primary in Alias

[@vaibhavnaik12]

@@UICollectiveDesign in approach one this will still work but in approach 2 it is going to impact. Imagine in the current hover I used primary 400, and post new brand color update my primary will be 800, but over will be still 400 in whatever color shade it is available.

[@whennn]

So my question was something similar to this. Let’s say as example you got on the basic token level of colors. Something like green , scaling from 1-9 lightest to darkest. Obviously 5 is the primary. Anyways. So all is connected to the level of mapping. But now the company has decided that the brand color is going to change to a blue. So, how do u link this in tokens without breaking it all. I mean is easier for designers to just go to tokens and change the variable name to BLUE and change the values, but what about on dev side. Cuz they need a consistent name for the tokens they use. Meaning they will have to change all their names now from green to blue. Not sure if there is a better name convention to use at the first level rather than just the color name.

[@UICollectiveDesign]

@@whennn This is where you just adjust your primary color. No need to adjust the names in the brand collection

[@UICollectiveDesign]

@@vaibhavnaik12 Yeah there would be some manual work there to repoint tokens, but no need to adjust anything in your brand collection... you're essentially just selecting a different primary color. Request to join our Slack and I can help you troubleshoot/

[@adrian.uidesign]

What would be your approach if a black #00000 is needed and/or white? Would you include them in a grey scale brand color or separate as the grey? How do you name it in the alias when a black can be primary text and secondary surface at the same time? thanks for your content! :)

[@UICollectiveDesign]

I would watch this video I released two weeks ago :) : kzbin.info/www/bejne/jKC2oGWVlM2BY6M

[@nutellanorbert2799]

Thank you! That was very helpful. I got the problem, that my tokens studio tokens and the figma variables and styles tending to lose connection between each other. besides the fact that naming and grouping are the same. is there a way to tie them up in a way that they are always synced in real time? I remember that this was once possible but can't remember how.

[@UICollectiveDesign]

Don't believe they can be synced in real-time. I am sure there is a plugin for this though

[@Fabian-fk8qs]

Have you found a solution meanwhile?

[@nutellanorbert2799]

@@Fabian-fk8qs yes. When creating a theme you have to sync styles and variables in the theme. That writes a json with the respective styles id

[@Fabian-fk8qs]

@@nutellanorbert2799 Thank you very much! :)

[@sophiemulders]

i watched your other video -> kzbin.info/www/bejne/jKC2oGWVlM2BY6Msi=gkFqlCBw0kaR9HXR, and there you do this extensively in the variables in figma. but here you have the mapped set, with in that set 'light' , so how would you then add the 'surface colors' part, and the text-color part etc?? i still have the free version of token studio (and free version of figma, because i cant choose between the two and i am not sure which one is worth it. )

[@UICollectiveDesign]

Create a profile on our community site so I can invite you to our Slack community. I would be able to better assist you there :) TS offers things that variables does not... such as Github sync, etc... but right now, they are relatively similar. I would suggest starting with variables give the easier learning curve.

[@polenunes]

Thanks for the video, it's helping me a lot! I have a question: when you synchronize tokens to variables, what happens to my typography tokens? Does it convert them as well or do they become styles?

[@UICollectiveDesign]

Depends if you choose to sync to variables or create the styles :)

[@UICollectiveDesign]

& glad the video helps! Please subscribe and share the vid where possible. All support helps!