Tokens Studio for Figma Quickstart

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: https://www.figma.com/community/file/...
Components Cheat Sheet: https://www.notion.so/Components-d386...
Option/Semantic Tokens Cheat Sheet: https://www.notion.so/Tokens-4ccf9456...
Article | Installing & Syncing Figma Design Tokens:
https://bootcamp.uxdesign.cc/installi...
Article | Creating & Crafting a Design Token System: https://bootcamp.uxdesign.cc/creating...

💡 Install on Figma: https://www.figma.com/community/plugi...)
🚀 Subscribe to our channel:    / @tokensstudio  
💬 Join our Slack: https://tokens.studio/slack
📄 Docs at: https://docs.tokens.studio/
ℹ️ More information on https://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?