Workshop: How to create scalable Design Systems with Design Tokens for multiple brands
Unlock the full potential of your design capabilities with our interactive workshop on Headless Design Systems and Multibrand Strategies powered by Design Tokens!
Whether you're a seasoned designer or a curious enthusiast, this workshop is tailored for you. Dive into the world of Figma and learn how to manage multiple brand styles, create fluid typography systems, and transform design tokens into CSS using Style Dictionary.
Discover the secrets of multidimensional layer architecture, component inheritance, themes, modes, and density in design systems. Master the art of handling breakpoints, responsiveness, and component token sets while learning the best practices for naming design tokens and leveraging AI assistance.
By the end of this workshop, you'll be equipped to design for scalability and multiple platforms, ensuring your creations stand out in a competitive landscape. Plus, we'll share valuable insights on distributing your work to teams and fostering adoption.
LIVE workshop: 🗓️ June, 12th - 1PM - 6:30 PM CEST
Duration: 5:30 hours - including LIVE Q&A
🎟️ Limited LIVE Seats!
Workshop facilitators:
Jan Six, Creator of Tokens Studio
Esther Cheran, Creator of the Headless Design System
Mike Kamminga, Imagining & Engineering the future of Design Tokens
Marco Christian Krenn, Token Evangelist
At the end of this workshop, you’ll have an understanding of:
- Designing for scalability
- Component token sets
- Design for multiple platforms
- Inheritance in components
- (Multidimensional) Themes and Modes
- Density in design systems
- How to deal with breakpoints and responsiveness
- (basic) Naming design tokens
- Use AI to assist: (Priming)
- Multidimensional layer architecture: Token tiers
- How to distribute design tokens to your teams
What you will learn in this workshop:
- Create a Headless Design System
- Deal with multiple sets of brand styles (color, typography, etc)
- Create a fluid typography system for your design system
- Transform design tokens to CSS for multiple brands using Style Dictionary
- & more
Prerequisites:
- You understand design tokens
- You know how to use the Tokens Studio plugin
- You have some understanding of composable component architecture