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!

Other vids that will help:

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

#figma #uidesign #uxdesign

[abulut]

These videos are rare and designers who pay attention to master this are a LOT more valuable in big organisations. Crazy that we can watch these videos for free. I've learned a lot from you

[islamyuldashev]

Most simple and clear explained video, year ago searched this kind of video didnt find any

[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!

[AquaATee]

Easy to follow, love the way this is structured. Thanks for the time and effort you put into this. Subscribed!

[masietsheole]

So far, the most straight forward and simplest introduction tutorial about Figma Tokens and Variables. Great job👏

[KulwantSingh-icuz]

Thanks for creating such an in-depth video on variables and design tokens, thanks Indeed!

[iamavro]

This is what I have been looking for. Thank you so much. Love from India. 🇮🇳

[longchhun]

I had facing many years of communication issues regards communication and terms to use within a team from design until release product. You channel in deep experience and explaination! I couldn't even find some paid course online. But here is free 🎉

[sravannraj]

I was looking for a solution for tokenizing the colors & typography and found your video. This really helps. Thanks Kirk!!

[ofibao]

Extremely valuable content! Thanks mate

[euginrobinson]

We usually end up paying hefty fees in order to acquire in-depth knowledge about design systems and practical know-how to build them. But here we have just completely free of cost if one has the patience and curiosity to learn.

[SaraHernandez-wt]

Amazing tutorial - super informative and clearly explained!

[albertzimteaaa]

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

[yaragengo]

thank you soooo much for your content!! I've been learning a lot 💕

[atharnadeem]

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

[cristinacasanas]

This video is fantastic! Thank you so much :)

[andydasi]

This is just what I needed, thanks a lot!

[LeninLive]

It almost seems like no one in the design world is bothered with the code integration/handoff, just look at the views numbers under the videos. Number one criteria is the adoption. I've seen so many design systems that suck when it comes to the handoff. Thank you for the video!

[bishoyadel]

Amazing video teach me a lot of things, thank you ❤

[TiagoPietroPesce]

42:26 it is possible to set a variable for re-grouping others, but idk when you would like to do that, other for a quick "line-height" for most case scenery:

line-height/xs-12
line-height/sm-20
line-height/md-28
line-height/lg-32

header: "line-height/lg-32"
body:"line-height/sm-20"
caption: "line-height/xs-12"
button: "line-height/sm-20"

thats allows you keep a regular line-height-padding base 4 while keep consistent size and you can have font messing around with weird sizes like 15, 5px
but in case of colors maybe there some use for grouping then "calling" the group as a "variation" theme like: 2 diferent hovering colors based on what interaction do expect (click/drag-n-drop for example)