Tokens Studio for Figma Quickstart
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- Behind the system: Tokens Studio for Figma Quickstart
In this talk Eric Singhartinger will help you to create your first comprehensive design token system in Figma. It covers best practices around the use of option, semantic and component token sets, how to implement inheritance for multiple brands and themes and lots of tips and a template to speed up your learning curve.
🤝 Resources from this talk:
Template & presentation: www.figma.com/community/file/...
Components Cheat Sheet: www.notion.so/Components-d386...
Option/Semantic Tokens Cheat Sheet: www.notion.so/Tokens-4ccf9456...
Article | Installing & Syncing Figma Design Tokens:
bootcamp.uxdesign.cc/installi...
Article | Creating & Crafting a Design Token System: bootcamp.uxdesign.cc/creating...
💡 Install on Figma: www.figma.com/community/plugi...)
🚀 Subscribe to our channel: / @tokensstudio
💬 Join our Slack: tokens.studio/slack
📄 Docs at: docs.tokens.studio/
ℹ️ More information on www.tokens.studio
Contents
00:00 - Welcome & Intro Behind the System
01:58 - Intro & Examples
12:05 - Steps
12:06 - Step 1. Gather All Components
16:05 - Step 2. Gather All Tokens
19:10 - Step 3. Use Text & Indented Lists
20:23 - Step 4. Finally - Create Tokens
20:45 - Types of Tokens
22:12 - Token Flow
24:40 - 1/3 Option Tokens
33:34 - 2/3 Semantic Tokens
44:05 - 3/3 Component Tokens
45:13 - 3/3 Component Tokens: Color Modifiers
46:38 - 3/3 Component Tokens: Demo & Dissection Time
51:28 - Multi! Brands, Themes, Devices, Sets
56:18 - Wrap Up
57:13 - Q&A: What is the best approach to solve light and dark mode themes? Do you prefer having all the designs in one file?
58:48 - Q&A: Any guidance on creating tokens that connect to both a web design system + a native mobile design system (specifically utilizing Material + Flutter)?
01:00:56 - Q&A: I have observed that a considerable amount of design systems do not include component-level tokens. As an expert in the field, when would you recommend implementing them and when would you advise against it?
01:05:19 - Q&A: How do you deal with text hierarchy tagging - h1, h2 , h3 etc.? Would you document those out, our simply allow the developer to cover that?
01:07:40 - Q&A: Is atomic design suitable for grouping components?
01:08:28 - Q&A: How do you manage base tokes (utility), semantic tokens and component tokens when developers are using Tailwindcss utitly classes only and don’t care about aliases.
01:09:59 - Q&A: What is the best practice for responsive dimensions tokens?
01:12:52 - Q&A: Better to have a single file for tokens, or multi-file (sync)?
01:15:26 - Q&A: How long does it take to populate Tokens Studio in the way you demonstrate? If multi-brand, does that time lessen?
01:17:09 - Q&A: You said that the brand tokens are more like semantic tokens. In a way to be fully headless/multibrand design system shouldn’t brand tokens be on the end like: 1. core 2. comp 3. semantic 4. brand
01:19:00 - Q&A: Do you set tokens/styles via the plugin or using the native Figma styles? I remember the Figma styles are then not displayed as tokens via the debugger.
01:20:56 - Q&A: How can font sizes work as core token in a multi-brand environment?
01:21:55 - Q&A: Where can I find how to sync tokens to iOS and Android ? I didn't find it at the documentation.
01:23:08 - Q&A: Is it possible to organize tokens by folders but not have the folder name be apart of the actual token name?
01:24:45 - Q&A: When creating the color palette from 100 to 900, do you suggest using lch and then dynamically generating the palette from a base color? I’m imagining some designers would like a more granular control of the shades of a single color in the palette.
01:26:25 - Q&A: Can you show a practical example of updating the tokens in a team and then updating it in a file (as someone else) and using that update? Do you need to import styles again? Any common pitfalls?
01:27:46 - Q&A: How he made components and buttons in the side drop down from each other “tree” in the side of figma tokens plugin ?
01:28:16 - Q&A: Would you recommended creating a large base of tokens first. Or would you recommend starting small and adding tokens as needed?
![[TH] VCT Pacific Stage 2 - Playoffs Lower Bracket Final // PRX vs DRX](http://i.ytimg.com/vi/5HwO1bQyAx4/mqdefault.jpg)
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.
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.
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.
Great talk. Could you send the link to check the Tailwind issue as asked at 01:08:28 please?
The script output what is that?
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
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.
How to see tokens flow? It says this is invite-only thing. How the get that invite? I desperately need some visualisation
You know the topic is brainpower intensive when the Quickstart is 1.5hr 😅
Small comment, space is insight, inline and stack (not inset), at least from the article you refer to
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?
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
Also wondering this... At the rootiest of root levels, should my organization have a library of ALL primitive colors?
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?
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.
How can I get access to token flow?
You can sign up for the early access of Tokenflow via this form: tokens.studio/tokenflow
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 😊
This is cool but also confused the hell out of me
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.
thanks for sharing that the Notion links didn't work > these should now be fixed and accessible again.