Design Tokens Demystified: Boost Your Workflow!

[@mikeysouthwell]

Great video! Why did you add your Base tokens to your Mapped collection? Shouldn’t it have been Alias to Mapped? Also, it would’ve been great to mention how to hide the Base and Alias values from Figma so you only see the Mapped values on the nodes on the canvas to make it easier to read and avoid the issue of accidentally adding the wrong token 😀

[@UICollectiveDesign]

Mike!!! Great to hear from ya. Oops, did I make a mistake? Yes it should be alias to mapped and not brand to mapped. Thanks for catching this!! I also agree on that.... been waiting for Figma to fix that for a long time

[@mikeysouthwell]

@@UICollectiveDesign ahh is it still buggy 😢 Hopefully they fix it soon so we can use the variables properly 🤞As always, great work and keep the quality content coming 🤩

[@UICollectiveDesign]

@@mikeysouthwell Thanks Mike!! Appreciate the support man

[@hardboiled2000]

That helped, thankyou for taking the time

[@UICollectiveDesign]

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

[@agustinfernandez8972]

Thank you for this video, i am trying to understand figma variables and learning to apply a good proper name for the elements. Something that might also help is using a real example applying this variables starting with a simple button design and a card. From atom to molecule. Also showing how the colors on the component are applied. You can show the difference between applying styles from variables. This is something that really helps. May be basic list of all the posible states applying variables for a component. Thank you so much for this content.

[@UICollectiveDesign]

Thanks for the comment! I would check out this vid: kzbin.info/www/bejne/hX6qhYNohtWZn7s

[@fionaovcharenko]

Thanks, that's very helpful!

[@UICollectiveDesign]

You're welcome! Please subscribe and share this video where you can :)

[@lukehereart]

Can you maybe link to how this translates to the structure or setup a dev will use that will parallel this design token setup in figma. Struggling to make the connection from this to an implementation for a dev.

[@UICollectiveDesign]

let me put you in-touch with my dev contact. Signup and I will invite you to our community right away and connect you with Phil. He can talk more about dev related elements

[@lukehereart]

Signed up 🌿

[@UICollectiveDesign]

Awesome! Will send invite soon!@@lukehereart

[@hardboiled2000]

This is a really great video, thank you. But could you please just do one small video on explaining some use cases of the alias layer I.e examples of problems that you might run across cuz I'm still not getting it

[@UICollectiveDesign]

Thanks!! I would check out our token/variable naming and setup guide video. This will go more in-depth!

[@RémiCourtillon]

Hi ! From an user standoint i'd rather add a description to the base variables themselves instead of doing an infinite amount of alisases, because once you're multiple months into the use of a design system, you'll have to scroll indefinetly in between the "brand" variables and all the aliases just to find the token you want to apply. Until figma does an update in wich you can choose wich set of variables are visible or not from the drop-downs menus, it's just too much noise and complexity and doesn't serve the purpose of making designing easier. That's my take on it :) nice video anyways

[@UICollectiveDesign]

Hey Remi! You can actually color scope your variables, so you won't end up seeing brand and alias when selecting your variables. Two finger tap on a group of variables and then hit edit to do so :)

[@ytRap007]

thanks im waiting for this.

[@UICollectiveDesign]

Glad it helped! Please subscribe and share this vid where you can :) The support goes a long way