Navigating the Future of Design Tokens: Insights from Supernova's 2024 Webinar
Dive into the key takeaways from Supernova's expert panel on the state of design tokens in 2024. Explore insightful discussions on collaboration, token management, layout theming, and more.
Design tokens have revolutionized the way we build and maintain design systems. They offer a structured way to manage design decisions across different platforms and teams. Recently, Supernova released its "State of Design Tokens for 2024" report, offering valuable insights into current trends and challenges. To explore these findings, Supernova hosted an insightful webinar featuring a panel of design system experts:
- Donnie D'Amato, Founder and Chief Architect at Design Systems House
- Jacob Miller, Product Manager at Figma
- Kathleen McMahon, Design System Engineer, Spec Editor for the Design Token Community Group
- Jocelyn Hsu, Head of Community at Supernova
Let's dive into the key takeaways from their conversation.
Collaboration is key to breaking down silos
The report highlighted a significant lack of engineering involvement in the design token space. Panelists emphasized that the true success of design tokens lies in strong collaboration between design and engineering teams.
“The first thing my mind went to was: Is there a conversation happening between teams?... Are teams collaborating? Are teams siloed?" — Kathleen McMahon
Bridging the gap between these disciplines ensures a seamless handoff, enhances the design system's functionality, and ultimately delivers a superior user experience.
Code should ultimately be the token source of truth
Panelists discussed the ongoing debate around the ideal single source of truth for design tokens. While acknowledging that designers prefer the convenience of working within their familiar design tools (like Figma), they also stressed the importance of code as the ultimate source of truth since that's what users directly interact with.
"I believe the source of truth should be code... The user actually sees code. They're going to be interacting with code." — Donnie D'Amato
The panel highlighted the potential of the W3C Design Token specification (which Kathleen is actively involved in) to become the unifying standard. This spec aims to create a common language and format for design tokens, enabling seamless integration across design and development tools.
Figma maintains a strong influence on design tokens
The widespread adoption of Figma variables, a feature released in 2023, was a notable finding of the report. Designers expressed a preference for staying within their design tool for managing tokens. The panel discussed how Figma's growing role in design token management could shape the future of this practice.
"The adoption of Figma variables it's been out for ten months now and the fact that I think it was like 74% or something of people were using some sort of Figma variable in some way was just like crazy to see there.” — Jacob Miller
Token naming standardization is still a while away
The webinar addressed the ongoing challenge of naming conventions for design tokens. While attempts at standardization exist (like Style Dictionary), the panel noted that most teams create their own naming systems based on their unique needs.
"If your team doesn't understand your naming convention, they're not going to use your tokens." — Kathleen McMahon
They acknowledged the difficulty in achieving universal standardization but encouraged designers and developers to strive for a shared understanding of token patterns within their systems.
Layout theming to replace Z-indexing
One surprising finding of the report was the use of Z-Index as a design token. The panel questioned the validity of this practice, arguing that it might be counterproductive to modern web development approaches like the CSS 'top layer' specification. Donnie advocated removing Z-Index tokens to better align with web functionalities.
"Get rid of your Z indexing... It's only going to be a problem every single time." — Donnie D'Amato
The panel also explored the exciting potential of using tokens for layout theming. This involves using tokens to switch between different layout configurations, allowing for greater flexibility and customization, especially within multi-brand systems.
Component tokens might be a thing of the past
The use of component-specific tokens sparked a lively debate. Jacob cautioned against their overuse, as they can quickly bloat your token system and often lack reusability. He recommended using component tokens only in extreme cases of multi-brand systems with significant visual differences.
"I'm a fan of not using component tokens... creating these tokens which will never be reused again." — Jacob Miller
Donnie’s preference was to avoid component tokens altogether, suggesting localized modes as a more effective way to achieve brand expressions.
Kathleen acknowledged the use case for component tokens but stressed the importance of strictly scoping them for their respective components.
Resources from the panel
- Design engineering, a working definition
- Design Engineer IO
- Office Hours Podcast #53: Design Technologists, Again
- X thread from @disco_lu
- Optimize Design-to-Developer Collaboration with Design Systems
- Lightning Design System — Z-index
- W3 Schools — HTML popover
- Firefox — Toplayer
- HTML Spec — Popover
- Open UI — Popover
- X thread by @UNA
- X thread by @UNA
- Inside Design Tokens: Definitions & Traits
- The Universal Color Palette
- Mode.place
Let's keep the conversation going! Share your own design token practices and thoughts on X(Twitter).
