What are Design Tokens in Figma?

#FigmaTokens #DesignTokens #Figma #DesignSystem ⚡️Full workshop with Jan Six (recording): 👉🏻 https://bit.ly/figmatokens-workshop

What’s included in the full workshop: 🎬 What’s new in Figma Tokens 🎬 How to create Design Tokens in Figma:

• Color Tokens
• Spacing Tokens
• Radius Tokens
• References
• Math
• Typography Tokens
• Shadow Tokens

🎬 Token-sets and Theming

• What are Design Tokens?
• Naming Conventions
• Light Theme & Dark Theme
• Simple Tokens Sets
• Complex Token Sets
• Sets vs. Themes in Figma Tokens

🎬 How to create token sets & themes

• How to do cross-file theming
• Getting tokens across files
• Enable GitHub & use tokens

🎬 Component tokens & collaboration

• Component Tokens
• Create & apply component tokens
• Communicating applied design tokens
• Handoff
• Getting tokens to developers
• Exporting Tokens
• Transforming Design Tokens
• Style Dictionary

🎬 Best Practices

• Convert your existing design system
• Use the Multi Inspector
• Create fluid scales
• Create theme independent shadows
• Use branching
• Approval / Review
• How to document
• Encourage contributions

🎬 Q&A with Jan 👉🏻 https://bit.ly/figmatokens-workshop