/
About this Workshop
This Workshop will help you understand the key concepts of design tokens. It will teach you how to implement design token systems for different use cases in Figma and introduce you to using style dictionary to transform design tokens to code.
Who is it for?
People who are working on / interested in implementing design tokens into their design system or who want to improve the current implementation.
You should know the basics of using Figma and have at least some basic understanding of design tokens (or be quick at picking up knew knowledge).
What you’ll learn
You'll learn best practices for creating design token systems that work for your company are are easy to use for your colleagues
You'll learn how to implement a complex design token strategy using Figma variables and styles
You'll learn how to bring your design tokens from Figma to code so that developers at your company can use them
Agenda
1. Introduction to the basic of design tokens (~30min)
2. Advanced design token concepts and models, best practices, organization & naming (design token ux)
3. Hands-on exercise to test knowledge and put concepts into practicse 4. Bonus: Discuss some real world examples/questions sent in by workshop participants 5. Figma implementation: Setting up design tokens including color modes and complex multi-brand systems 6. How to export design tokens from Figma 7. Short excursion: Figma API - What is possible in regards to design tokens using the Figma API 8. Bonus: Discuss some questions sent in by participants 9. Introduction to style dictionary and how design tokens can be transformed as well as customising the way style dictionary transforms your tokensMar 9, 10:43 PM
Lukas Oppermann is a Staff Systems Designer at GitHub specialising in design systems & design tokens. He is a user experience professional, speaker and writes about design and design system related topics on medium.
Currently he works on GitHub’s ‘Primer Design System’. Previously Lukas built products and design systems at Telekom, RTL and Daimler. Working on topics like accessibility, design token pipelines or Figma workflows and integrations.