How to create Design Tokens in Figma with Figma Tokens - Tutorial with Jan Six

9m Link to video
Tags Design tokens Figma tokens
Speakers Jan Six
Edit on GitHub

#Figma #designsystem #designtokens #figmatips #figmatokens ⚡️Full workshop Recording: https://bit.ly/figmatokens-workshop ⚡️ Plugin: https://www.figmatokens.com/

💥Learn how to create a token-based Design System in #Figma with Jan Six, Creator of the Figma Tokens Plugin 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