Design Tokens
The Dev Lifecycle of a Design Token
CEST
9:00 PM
BST
8:00 PM
EDT
3:00 PM
PDT
12:00 PM
How does a Design Token go from design to development? How can we use the flexibility of a tool like Style Dictionary to import our tokens into code in a performant manner? How do we automate this process?
What you will learn:
- What steps a design token goes through in Style Dictionary, Style Dictionary's architecture
- How to manipulate a design token, from token to platform output
- Some best practices for loading design tokens on Web platform
- How to do client-side theme switching with your tokens as CSS variables
- How to use GitHub actions to automate bringing your changed design tokens to code
Who is this for:
Design system designers and developers who want to make the most out of Figma variables to improve the user experience for the product teams, and who wants to learn about perceptual colour models and optical adjustment of typography and spacing on the way.
Presented by:
Joren Broekema
Developer Design Systems Tools
I'm a web developer with about 7 years of experience in developer tooling around Design Systems. As an Industrial Designer, code appealed to me a lot and I naturally navigated into the web development space, but always gravitated towards topics around design.
In one way or another, I've always been involved with Design Systems, either crafting them, both in startup and enterprise environments, or creating developer tooling related to it.
The last 3 years, my focus has been on Design Tokens, and I am currently the core maintainer of Amazon's Style Dictionary library: the go-to parser, transformer and multi-platform formatter for Design Tokens.
My projects:
• Style Dictionary
• code-workshop-kit
• Tokens Studio
• Open Web Components
• Modern Web
• Lion Web Components
• Dark-Theme Utils
I am a big fan of all kinds of music, love live concerts and festivals of all types, and I have been playing the guitar since I was young; mostly acoustic.I'm a climber and most of my free time is spent bouldering or rope climbing. Majority of my holidays are spent in the mountains.
Open Source is very important to me. I prefer collaboration and solving problems at the root over workarounds, forks and spin-offs. There's a reason why I contacted Amazon to collaborate on Style Dictionary instead of creating our own product. There's something magical about working with total strangers towards a common goal.
Design Tokens
The Dev Lifecycle of a Design Token
MAY 28
9:00 PM
to
10:00 PM
CET
How does a Design Token go from design to development? How can we use the flexibility of a tool like Style Dictionary to import our tokens into code in a performant manner? How do we automate this process?
What you will learn:
- What steps a design token goes through in Style Dictionary, Style Dictionary's architecture
- How to manipulate a design token, from token to platform output
- Some best practices for loading design tokens on Web platform
- How to do client-side theme switching with your tokens as CSS variables
- How to use GitHub actions to automate bringing your changed design tokens to code
Who is this for:
Design system designers and developers who want to make the most out of Figma variables to improve the user experience for the product teams, and who wants to learn about perceptual colour models and optical adjustment of typography and spacing on the way.
Presented by:
Joren Broekema
Developer Design Systems Tools
I'm a web developer with about 7 years of experience in developer tooling around Design Systems. As an Industrial Designer, code appealed to me a lot and I naturally navigated into the web development space, but always gravitated towards topics around design.
In one way or another, I've always been involved with Design Systems, either crafting them, both in startup and enterprise environments, or creating developer tooling related to it.
The last 3 years, my focus has been on Design Tokens, and I am currently the core maintainer of Amazon's Style Dictionary library: the go-to parser, transformer and multi-platform formatter for Design Tokens.
My projects:
• Style Dictionary
• code-workshop-kit
• Tokens Studio
• Open Web Components
• Modern Web
• Lion Web Components
• Dark-Theme Utils
I am a big fan of all kinds of music, love live concerts and festivals of all types, and I have been playing the guitar since I was young; mostly acoustic.I'm a climber and most of my free time is spent bouldering or rope climbing. Majority of my holidays are spent in the mountains.
Open Source is very important to me. I prefer collaboration and solving problems at the root over workarounds, forks and spin-offs. There's a reason why I contacted Amazon to collaborate on Style Dictionary instead of creating our own product. There's something magical about working with total strangers towards a common goal.
Time:
CEST
9:00 PM
BST
8:00 PM
EDT
3:00 PM
PDT
12:00 PM
Frequently
Asked
Questions
What does Personal Access mean? Can I share my access with others?
With your personal conference ticket you will get exclusive access to the live conference and all of our recordings. The personal access allows for single-session logins per account, preventing simultaneous access from multiple devices.
How can I generate an invoice?
How do I get access to the live stream?
When will the recordings be available?
Frequently Asked Questions
What does Personal Access mean? Can I share my access with others?
With your personal conference ticket you will get exclusive access to the live conference and all of our recordings. The personal access allows for single-session logins per account, preventing simultaneous access from multiple devices.
How can I generate an invoice?
How do I get access to the live stream?
When will the recordings be available?
Design Tokens
The Dev Lifecycle of a Design Token
CEST
9:00 PM
BST
8:00 PM
EDT
3:00 PM
PDT
12:00 PM
How does a Design Token go from design to development? How can we use the flexibility of a tool like Style Dictionary to import our tokens into code in a performant manner? How do we automate this process?
What you will learn:
- What steps a design token goes through in Style Dictionary, Style Dictionary's architecture
- How to manipulate a design token, from token to platform output
- Some best practices for loading design tokens on Web platform
- How to do client-side theme switching with your tokens as CSS variables
- How to use GitHub actions to automate bringing your changed design tokens to code
Who is this for:
Design system designers and developers who want to make the most out of Figma variables to improve the user experience for the product teams, and who wants to learn about perceptual colour models and optical adjustment of typography and spacing on the way.
Presented by:
Joren Broekema
Developer Design Systems Tools
I'm a web developer with about 7 years of experience in developer tooling around Design Systems. As an Industrial Designer, code appealed to me a lot and I naturally navigated into the web development space, but always gravitated towards topics around design.
In one way or another, I've always been involved with Design Systems, either crafting them, both in startup and enterprise environments, or creating developer tooling related to it.
The last 3 years, my focus has been on Design Tokens, and I am currently the core maintainer of Amazon's Style Dictionary library: the go-to parser, transformer and multi-platform formatter for Design Tokens.
My projects:
• Style Dictionary
• code-workshop-kit
• Tokens Studio
• Open Web Components
• Modern Web
• Lion Web Components
• Dark-Theme Utils
I am a big fan of all kinds of music, love live concerts and festivals of all types, and I have been playing the guitar since I was young; mostly acoustic.I'm a climber and most of my free time is spent bouldering or rope climbing. Majority of my holidays are spent in the mountains.
Open Source is very important to me. I prefer collaboration and solving problems at the root over workarounds, forks and spin-offs. There's a reason why I contacted Amazon to collaborate on Style Dictionary instead of creating our own product. There's something magical about working with total strangers towards a common goal.
Design Tokens
The Dev Lifecycle of a Design Token
MAY 28
9:00 PM
to
10:00 PM
CET
How does a Design Token go from design to development? How can we use the flexibility of a tool like Style Dictionary to import our tokens into code in a performant manner? How do we automate this process?
What you will learn:
- What steps a design token goes through in Style Dictionary, Style Dictionary's architecture
- How to manipulate a design token, from token to platform output
- Some best practices for loading design tokens on Web platform
- How to do client-side theme switching with your tokens as CSS variables
- How to use GitHub actions to automate bringing your changed design tokens to code
Who is this for:
Design system designers and developers who want to make the most out of Figma variables to improve the user experience for the product teams, and who wants to learn about perceptual colour models and optical adjustment of typography and spacing on the way.
Presented by:
Joren Broekema
Developer Design Systems Tools
I'm a web developer with about 7 years of experience in developer tooling around Design Systems. As an Industrial Designer, code appealed to me a lot and I naturally navigated into the web development space, but always gravitated towards topics around design.
In one way or another, I've always been involved with Design Systems, either crafting them, both in startup and enterprise environments, or creating developer tooling related to it.
The last 3 years, my focus has been on Design Tokens, and I am currently the core maintainer of Amazon's Style Dictionary library: the go-to parser, transformer and multi-platform formatter for Design Tokens.
My projects:
• Style Dictionary
• code-workshop-kit
• Tokens Studio
• Open Web Components
• Modern Web
• Lion Web Components
• Dark-Theme Utils
I am a big fan of all kinds of music, love live concerts and festivals of all types, and I have been playing the guitar since I was young; mostly acoustic.I'm a climber and most of my free time is spent bouldering or rope climbing. Majority of my holidays are spent in the mountains.
Open Source is very important to me. I prefer collaboration and solving problems at the root over workarounds, forks and spin-offs. There's a reason why I contacted Amazon to collaborate on Style Dictionary instead of creating our own product. There's something magical about working with total strangers towards a common goal.
Time:
CEST
9:00 PM
BST
8:00 PM
EDT
3:00 PM
PDT
12:00 PM
Frequently Asked Questions
What does Personal Access mean? Can I share my access with others?
With your personal conference ticket you will get exclusive access to the live conference and all of our recordings. The personal access allows for single-session logins per account, preventing simultaneous access from multiple devices.
How can I generate an invoice?
How do I get access to the live stream?
When will the recordings be available?
