I was just looking for a series like this to help me expand my brands design system. Thank you

I was just looking for something like this and it was uploaded almost in response to my wishful thinking. Thank you guys!

Waiting for this to up. thanks, very insightful video. love to see, how figma token work with style dictionary workflow.

I couldn't attend yesterday, so thank you for the Upload.

At the moment I do not agree that design tokens reduce cognitive load for me personally. Getting this set up, naming everything and make sense of the logic feels difficult. Especially since setting up design systems in figma it always felt like I had to duplicate colors and just renaming them to fit token systems of FE. All the long names and folders still confuse me when working in other design systems, but I guess that's the learning curve. It feels messy although it's organised. Mainly because the amount of colors multiply in figma. I do like global tokens and systemizing everything but naming it in figma and naming it in frontend still has me confused, I lose oversight easily by all the nesting and naming.

Question about semantic and component tokens. If you have semantic Brand A (light/dark) and Brand B (light/dark) and you have component token sets that differ from Brand A and Brand B, should you combine the component set under each brand so Brand A (light/dark/components)? In your example you have the semantic brand sets and the components separated.

You know the topic is brainpower intensive when the Quickstart is 1.5hr 😅

Great talk. Could you send the link to check the Tailwind issue as asked at 01:08:28 please?

Could someone explain to me why you would use a multi-level systems for tokens instead of just having one level? I'm really struggling to see the point of adding all of that complexity and repetition. I'm speaking about systems that only need to support one brand and 2 themes, light and dark

@menieber

Жыл бұрын

If you define "primary color" as a semantic token, then you no longer need to remember what color must be used for primary buttons. If you also define "help button color" as a component token, then you no longer need to remember that help buttons use the primary color. Everything will be prescribed by your tokens.

Also wondering this... At the rootiest of root levels, should my organization have a library of ALL primitive colors?

@TokensStudio

11 ай бұрын

It is advised to have a core set where all your primitive colors are defined, so you can reference to these core colors within other sets. At 31:28 Eric is showing his color ramps in his core set.

So figma tokens are going to be native soon you say at the start? And won't need to rely on the plugin?

@TokensStudio

Жыл бұрын

They are indeed going to support native tokens soon, however since it's going to be their first commencement, the plugin will not be redundant as it offers complex features; we will also be tying in closely to their native toke support system.

The script output what is that?

I'm trying to figure out what happens when you have a component inside another component (atom in molecule or molecule in orgamism). I looked up the file and as far as I understand in bigger components you might have tokens refering smallar components (for example in the card you have card bg and border, but the button inside keeps its tokens and by changing card tokens you affect only the bg and border), right? I red somewhere that every component should have every single value in it tokenized with its name (that being said having card button tokes) but I can't find the article again. I also have issues with states. Let's say that you have a dropdown and need a bg color for the selected option. That token could be named "dropdown-default-bg-selected" but then the bg of the other options that ate not selected don't have a proper name cuz they keep their color :D They are the same as "dropdown-default-bg-active" but the state of the whole component is "selected" and that buggs me. Anyone with the same issue?

@TokensStudio

9 ай бұрын

Typically folks using component specific tokens will apply them at the component level. So the button in your example would have button specific tokens. They would remain regardless of any parent elements they live within. So you mentioned a card as a parent with buttons as children elements. The card container and children unique to the card would have card specific token names, and the actions would keep the button component specific tokens. Tokens are expressions of design decisions, so for interaction design of states like hover, you would typically define that at the component level with variants. The hover variant of the component would have specific tokens for that state, like background color for example. In your dropdown example, we could have a component called list-item which would have variants for default and hover. If we decide in our system the default and hover variants have unique background colors, then we would have unique tokens to help express that design design. Hopefully that helps! - Sam

How to see tokens flow? It says this is invite-only thing. How the get that invite? I desperately need some visualisation

Small comment, space is insight, inline and stack (not inset), at least from the article you refer to

This is very comprehensive, but I am simply looking for how to set it up and deploy it across different projects. Seems hard to find a simple video walking you through how to use it.

How can I get access to token flow?

@TokensStudio

Жыл бұрын

You can sign up for the early access of Tokenflow via this form: tokens.studio/tokenflow

This is cool but also confused the hell out of me

Thank you for this! Can I get an invite for tokens flow? 😭

Just guessing but ; are you dutch?? 😅 Q; is this one still relevant? I want to know how to start using figma + token studio 😊

Promo`SM

I have to admit the explanations are unnecessarily confusing, and really not much about using the studio itself. The Notion links are inaccessible as well. I hope the tool is worth it.

@TokensStudio

8 ай бұрын

thanks for sharing that the Notion links didn't work > these should now be fixed and accessible again.