Master Design Tokens - From Basics to Advanced

Getting started with design tokens, or need a refresher? This video walks you through the basics of Figma design tokens, and covers advanced topics as well!
Join the community: uicollective.co/
Resources: uicollective.co/designer-tool...
Download template shown: resources.uicollective.co/buy...
Other vids that will help:
Token/variable naming guide: • Master Figma Tokens & ...
Build a figma variable library: • Figma Variables Setup:...
0:00 An Introduction
0:27 What are design tokens?
2:47 Importance of design tokens
4:32 Choosing tokens
8:26 Token collections
13:40 Alias your tokens example
18:31 Mapping your tokens example
22:14 Building a sample library part 1
29:34 Building a sample library part 2
38:38 Tokens Studio vs Figma Variables
41:17 Quick tip
43:48 Outro

[@jonfreeze]

Hands down the most absolute best video visually describing tokens. Thank you! I’ll be using these techniques to speed up my DS development!

[@UICollectiveDesign]

Thank you!! Please subscribe and share this video where you can :)

[@atharnadeem6947]

Thank you so much for this video. Learned a lot from your channel.

[@UICollectiveDesign]

Glad it helped! Please subscribe and share our channel where you can :)

[@atharnadeem6947]

@@UICollectiveDesign always.

[@UICollectiveDesign]

@@atharnadeem6947 Thank you!!

[@mona.abdelmeged]

Thank you so much

[@UICollectiveDesign]

You're welcome! Be sure to share your channel where you can :)

[@albertzimtea]

Thank you so much for the in-depth lesson about tokens, I really need this

[@UICollectiveDesign]

Glad this helped! Please subscribe and share this vid and our channel where you can :) Support goes a long way!

[@niel5922]

as always, great content!

[@UICollectiveDesign]

Thank you! Please subscribe and share the video where you can :)

[@deliciouspizza4405]

Awesome! Thank you so much

[@UICollectiveDesign]

Glad it helped. Please subscribe and share where you can :)

[@ytrpaz]

i really need this thanks so much

[@UICollectiveDesign]

Glad this helped! Please subscribe and share our channel where you can :)

[@robin_designs]

Is there a specific reason why you named the different levels of tokens "Brand, Alias, Mapped"? I believe the naming that the figma team used is "Primitives, Semantics, Components". You are referring to the same right?

[@UICollectiveDesign]

Yeah the same! There's so much confusion around the terms semantics, primitives, etc. They're used in a lot of places, and tend to have a lot of different meanings based on people I've talked to. So this is just the approach I prefer.

[@Underhills]

Great stuff! Thanks for sharing. For the purple and red shades I think you meant to assign the topmost shade to Primary Darkest and not Darker - right? Cause it's the darkest.

[@UICollectiveDesign]

In this example, I only had 5 shades in my color scale. So logically following the scale, I selected darker. Darkest would be reserved if I had a third dark color

[@Underhills]

You used your picker to lift colors from a shade series that are made with alpha values, but the colors applied in the mapped variables are opaque hex codes. Why is that? Some systems also base their background colors on alpha levels and I find that difficult to implement cause you don't get a consistence color as it picks up whatever background it sits on. So if a CTA button has an alpha transparency level on the background color that button looks different throughout the UI, it could be sitting on a gray background, a white background etc. That in turn makes it impossible to operate with a strict semantic concept like primary, secondary etc as the button look varies. These items should always look the same in my mind, so they should be opaque.

[@UICollectiveDesign]

Using the color picker was just for ease of the exercise. I never recommend using opacity for colors :) Great call out though !! :)

[@djashawe88923]

Hi, Thanks for the great content. I have a question. Figma demos and tutorials usually follow a two-step process: Primitives and Tokens. The variables are then assigned from Tokens which reference Primitives. I couldn't wrap my head around why you have a three-step process (Brand -> Alias -> Mapped) instead of Primitives -> Tokens. Is there any reason or advantage in doing so? Is it because the naming conventions can get too long? For example, Primitives/color/brand/#FB9FE6 becomes Tokens/surface/button/primary/default/"button-primary-background-default" and Tokens/surface/button/primary/hover/"button-primary-background-hover"? I'm still new, so I'm confused. 🥲

[@UICollectiveDesign]

Take a look at our token/variable setup guide from November. This will really answer your question!

[@UICollectiveDesign]

kzbin.info/www/bejne/jXK3q3yBZaacbqs

[@Lichtsucher]

immeasurable merit !

[@UICollectiveDesign]

Thank you! Please subscribe and share the video where you can :)