Jump To Section
Owing to its recent rise in popularity, you’ve likely heard of design tokens.
As a concept, understanding design tokens is quite simple: A design token is a code-based way to maintain how design systems look.
For a designer, that means:
- Faster design changes
- Improved communication
- Reduced documentation headache
- More cross-platform consistency
- Easier handoffs to developers
And while, for the right teams, design tokens can do wonders, it would be a mistake to get into it and try to implement design tokens without the right knowledge or practices.
What Are Design Tokens?
In essence, design tokens are variables.
Think X = Y, where ‘X’ is a design attribute and ‘Y’ is the value.
It’s important to note that there is much more to these values than reducing them down to “variables”, but for the sake of understanding design tokens better, this analogy will work for our purposes.
For example: ‘borderWidth = 8px’ means that a border’s width will be, you guessed it, 8 pixels. (Pixels are what we see on our devices. These words you are reading right now are being displayed as pixels by your device.)
These variables or “design tokens” can help to speed up the design and development process by automating updates, removing guess work, improving documentation, and documenting design decisions.
For the right teams it can boost productivity and efficiency by removing some of the tedium that comes from maintaining design systems and documentation.
Why Use Design Tokens
I’m sure you can already see how design tokens can improve your design system:
- Rapid design changes: Designers and developers can quickly change the look of the design by manipulating the token’s values.
- Consistency across platforms: Design tokens help ensure consistent design elements across platforms, reducing the need for back-and-forth between designers and developers.
- Reduced documentation headaches: Documentation can be updated automatically with design token changes, reducing the likelihood of errors and inconsistencies.
- Future-proofing your design system: Design tokens provide a flexible, modular foundation for your design system that can be easily updated and adapted over time.
Additionally, design tokens are gaining in popularity.
As I am writing this, there is a W3C community group working to establish a set of standards for the industry to use.
The W3C or The World Wide Web Consortium is responsible for creating and maintaining the standards for the world wide web. It’s thanks to them that teams no longer need to spend hours ensuring web apps appear the same across web platforms.
This is something that you are going to want to consider with your design systems.
Developer Hand-off
Ah, the joys of handing off design tokens to development!
While design tokens offer immense benefits to the design process, communicating and implementing them across platforms can be a daunting task.
The first challenge is understanding and communication.
Designers and developers need to be on the same page when it comes to naming conventions and values to ensure consistency in design. Here’s an interesting video to understand how design systems help improve and speed up the development process.
Secondly, implementing design tokens across platforms can be tricky. Different platforms may require different formats, and converting design tokens can result in discrepancies in values.
And if that wasn’t enough, managing design token changes can be a headache.
With multiple stakeholders involved in the process, keeping track of changes and ensuring everyone is using the most up-to-date design tokens can feel like a game of whack-a-mole.
But fear not, there are ways to overcome these challenges and streamline the handoff process.
For a deeper dive into how designers and developers collaborate, be sure to catch this insightful conversation between our developers and design teams: Ask A Designer Round 2: Questions For Designers, From Developers.
Hold a workshop
- Research! Learn about how design tokens were created and how organizations are adapting them to their needs. Look into the W3C Design tokens community group to understand the standards that are currently being developed.
- Bring together your stakeholders, developers, designers, and other key personnel
- Ensure that everyone understands the goals and intent behind adding design tokens to a design system. Make sure to document your decisions!
- Discuss a naming convention. This step is trickier than you may think. Designers and Developers need to create a common language for discussing the project. If thats not a common practice already, it will take some time to get everyone on the same page.
- Document. Your. Decisions.
- Agree on an implementation plan, start small and with a few components to work out any process gaps. It is easier to adjust 3 variables than it is to adjust an entire design system.
- Consider the future of the project as well, the work you do will have a direct impact on the results in the future.
- Again, make sure you are documenting this work.
Documentation
Documenting the decisions that build the foundation of your design system is ALWAYS the prudent thing to do.
After all, who hates leaving a meeting and realizing you cannot remember key decisions?
This opens the team up for misinformation to creep in and disrupt the flow. Were we using a 8pt system or 10pt system? Designer A says 8pt, Developer 1 says 10pt. It’s anarchy!
Make it easier with documentation tokens
When it comes to documentation, Design Tokens for Figma can expedite the style documentation thanks to its handy documentation tokens.
But what it cannot document is the reasoning and structures that go into creating the style guide.
Adding design tokens to your system gives you and your team an opportunity to look at what is currently serving your design practice and determine if it is still serving you.
Best Practices To Introduce Design Tokens To Your Design System
In order to offer the best chance at organizational adoption, here are a few best practices that will help navigate the nuances of design tokens:
Create and enforce clear naming conventions
- Establishing a common language between all involved in a product isn’t always an easy feat. Even in the design community, you hear different terms for the same design patterns: Modal aka pop-up, overlay, or ********dialogue box.
- Consider the experience a new team member will have onboarding into this system. Use naming conventions that are intuitive and that work for your team. Avoid abbreviations and again, document the decisions that went into it.
- Be kind when reminding someone of correct naming conventions. Habits are hard to break, so as you start implementing design tokens don’t expect 100% adherence from the start.
Maintain a centralized design token library
- Consider using a cloud-based third-party platform such as Storybook as a repository for your design components. This will allow team members to access the design system components from anywhere increasing visual design consistency.
- Create clear guidelines for how design tokens should be organized within the library to ensure naming and organization consistency. This can also help stakeholders and developers navigate through Figma using wayfinding.
Regularly update and review design tokens
- Set a regular review schedule to ensure that design tokens are regularly audited and updated as needed.
- Solicit feedback from team members and stakeholders to identify areas where design tokens may need to be updated or added.
- Document any changes made to design tokens to ensure that all team members are aware of updates and can access the most current version.
If you find that you aren’t making much headway with design token adoption, I find it helpful to take a step back and ask “why”.
Sometimes you will need to tweak your approach or perhaps your organization lacks the design maturity to support design tokens.
Once you have a clearer understanding of the underlying issues, you can begin to address them.
When NOT to use Design Tokens
While design tokens can be a valuable tool for maintaining consistency and efficiency in the design process, they’re not always necessary.
If you’re working on a small project, a project with constantly changing requirements, or a project with highly unique visual elements, it may not be worth the effort to create a full library of design tokens.
In those cases, it may be more efficient to define visual elements on a case-by-case basis.
The key is to evaluate each project on a case-by-case basis and determine if design tokens are the right choice.
Real-World Examples of Design Token Implementation
Design tokens are the secret sauce that many companies are using to create consistent and cohesive design experiences across their products and platforms.
From IBM’s design language to Salesforce’s Lightning Design System, these tokens are being implemented in a wide range of products and services to streamline the design process and ensure visual consistency.
Even companies like Shopify and Airbnb have jumped on the design token bandwagon, using these powerful tools to create a consistent look and feel across their websites and mobile apps.
So if you want to stay ahead of the design curve and ensure a consistent user experience, it’s time to start incorporating design tokens into your design system.
Takeaway
Let’s wrap up this informative piece on design tokens.
Design tokens are like the MVPs of the design world, enabling rapid design changes, consistency across platforms, and future-proofing your design system.
However, implementing design tokens can have its challenges, such as communicating and implementing them across platforms and managing design token changes.
To overcome these challenges, hold workshops, document decisions, establish clear naming conventions, and maintain a centralized design token library.
So, start implementing design tokens like a pro today!
