Design systems
·
4 min
Maintaining consistency in digital design can be extremely difficult. Whether it’s a website, mobile app, or desktop platform, making sure everything looks the same can be challenging.
Imagine having to change each color or button one by one—it’s easy to make mistakes and get frustrated. This frustrates designers and developers and and also affects user experience, and this is where design tokens come in!
Design Tokens are small building blocks that store important design information, like colors, fonts, and spacing. Instead of changing every element one by one, you just update the token, and everything updates instantly!
So, in this blog, we’ll explore what design tokens are, why they are essential for big projects and teamwork, and much more!
By the end, you’ll know exactly how to use design tokens to keep your design organized and consistent, making your work much easier and faster.
What Are Design Tokens?
Design tokens might sound like something complex, but they are actually pretty simple! They are like small containers that hold design information, such as colors, fonts, or sizes, and make sure everything looks the same across your project.
Let’s break this down so it’s easy to understand.
Design tokens are reusable pieces of design information that help keep everything consistent across different apps or websites. Imagine you have a color you want to use for all the buttons in your design.
Instead of changing each button’s color one by one, you can just use a design token to store that color, and it will update everything automatically.
Features of Design Tokens
Here are the main features that make design tokens super helpful:
Consistency: They ensure that your design looks the same everywhere, whether it’s on a phone, computer, or tablet.
Scalability: If you need to change something, like a font size, you only need to do it once, and the whole design updates.
Flexibility: They work for any type of design, so you don’t have to start from scratch for different platforms.
Documentation: They also act like a guidebook for designers and developers, helping them stay on the same page.
Here are some Design Token examples:
Token Name Value Usage --primary-color #007bff Main button background color --font-size-base 16px Default font size for text --border-radius-small 4px Border radius for small buttons
Where Design Tokens Came From?
Design tokens were first introduced by Salesforce, a big technology company, to solve the problem of keeping their designs the same across many different products. Before tokens, it was hard to keep everything consistent, especially when designs needed to be updated.
Salesforce came up with design tokens as part of their Lightning Design System to make this process easier. Since then, many other companies have started using tokens because they help a lot with design consistency.
“Design tokens are the atoms of design systems. They help maintain consistency and improve workflow efficiency.” - Salesforce Design Team.
By understanding what design tokens are, where they come from, and why they matter, you can make your designs more consistent, scalable, and easier to manage!
Next, let's talk about the Core Styles and Token Types.
Design Token Types and Styles
To create a consistent and cohesive design system, it’s important to understand the different core styles and token types that make up your design. So, let’s dive into these elements and see how they work together.
First, let's take a look at Core Styles.
Core Styles
Colors:
Primary Colors: These are the main colors that represent your brand and create a visual identity
Secondary Colors: Complementary colors used for accents, buttons, and interactive elements.
Neutral Colors: Backgrounds, text, and borders that help in balancing the overall design.
Here are examples of colors with their token name, value, and usage:
Token Name Value Usage --primary-color #007bff Main button background color --secondary-color #6c757d Button hover effect --background-color #f8f9fa Background of the UI
Font Sizes:
Base Font Size: Default size for body text.
Headings: Sizes for different levels of headings (H1, H2, H3, etc.).
Small Text: Sizes for captions and secondary information.
Here are examples of font sizes with their token name, value, and their usage:
Token Name Value Usage --font-size-base 16px Body text --font-size-heading 24px Main headings --font-size-small 12px Captions
Spaces:
Margins: Space around elements to separate them from other elements.
Padding: Space inside elements to create breathing room around content.
Here are examples of spaces with their token name, value, and their usage:
Token Name Value Usage --margin-small 8px Small space around elements --padding-base 12px Space inside components
Animations:
Duration: How long the animation lasts.
Easing: How the animation moves.
Delays: Time before an animation starts.
Here are examples of animations with their token name, value, and their usage:
Token Name Value Usage --animation-duration 300ms Button hover effect --animation-ease ease-in Loading spinner animation --animation-delay 100ms Delay for tooltip appearance
Types of Design Tokens
Design tokens come in various types, each serving a specific role in maintaining design consistency. Here’s an overview of the different token types:
1. Spacing Tokens: Spacing tokens help us control the space or gaps between different parts of a design. They make sure everything looks neat and organized, whether it's the space between two buttons or the padding inside a box.
Examples of Spacing Tokens:
Token Name Value Description --spacing-small 8px Small space for margins --spacing-medium 16px Medium space for padding --spacing-large 24px Large space for layout gaps
Imagine you're putting stickers on a page. You wouldn’t want them too close or too far apart. Spacing tokens help keep them evenly spaced!
2. Color Tokens: Color tokens are responsible for making sure the colors used in the design are consistent. This helps maintain the brand's look and feel, so everything always uses the correct shades.
Examples of Color Tokens:
Token Name Value Description --color-primary #007bff Primary color for branding --color-secondary #6c757d Accent color for other elements --color-background #ffffff Background color for the UI
Just like coloring a picture, color tokens ensure we always stay within the lines and use the right colors for different parts of our designs.
3. Typography Tokens:
Typography tokens handle the look of the text, such as the size of letters, the weight (bold or regular), and the space between lines. This makes sure that all the text in a design looks clean and readable.
Examples of Typography Tokens:
Token Name Value Description --font-size-base 16px Base font size for general text --font-weight-bold 700 Bold weight for headings --line-height-base 1.5 Spacing between lines of text
Typography tokens are like choosing different fonts and sizes when writing a story to make it easy to read and look good.
4. Object Styles Tokens: Object styles tokens define how certain elements look, like buttons, cards, or images. This includes things like borders, shadows, and rounded corners.
Examples of Object Styles Tokens:
Token Name Value Description --border-radius 4px Rounded corners for buttons --shadow-small 0 1px 3px rgba(0,0,0,0.2) Small shadow for elements --shadow-large 0 4px 8px rgba(0,0,0,0.3) Larger shadow effect
Think of this like decorating a box—object styles control whether the edges are sharp or rounded, and whether there’s a shadow underneath to make it pop.
5. Global Tokens: Global tokens are used everywhere in a design. They define basic rules that apply to everything, like the main color of a brand or the default size of text. These tokens are universal and help keep the design consistent across all areas.
Examples of Global Tokens:
Token Name Value Description --color-primary #007bff Primary color used everywhere --font-size-base 16px Base font size across the design
Global tokens are like rules that everyone has to follow, making sure no matter where you look, the design feels the same.
6. Semantic Tokens:
Semantic tokens are a way of defining design tokens based on meaning or purpose, rather than specific values. Instead of directly referencing a color, size, or font, semantic tokens refer to how or where that token is used within a design system.
This allows for more flexibility and scalability when changes are needed. Let’s say you have a button in your design system:
A non-semantic token would define the button’s color as #FF5733, which directly ties the token to a specific value.
A semantic token, on the other hand, might define the button’s color as primaryButtonBackgroundColor. This name reflects the token’s role or function in the system, rather than the specific color value.
This way, if the button color needs to change from #FF5733 to another color, you only need to update the value of primaryButtonBackgroundColor, and it will update everywhere the token is used.
Examples of Semantic Tokens:
Token Name Value Description --color-button #28a745 Color for the save button --font-size-body 14px Font size for body text
These tokens are like labels that say, "This color is used for a special purpose," such as making a button stand out.
7. Component Tokens: Component tokens are used for individual parts of a design, like buttons, cards, or navigation bars. They control the look and feel of each component separately, allowing for more detailed and specific styles.
Examples of Component Tokens:
Token Name Value Description --button-border-radius 4px Border radius for buttons --card-shadow 0 2px 4px rgba(0,0,0,0.1) Shadow for card components
Difference between Common Nomenclatures
In design systems, there are three primary layers of design tokens: Global Tokens, Semantic Tokens, and Component Tokens.
Each layer serves a specific purpose, helping maintain consistency, flexibility, and clarity in design. Let’s break down each type, their differences, and how they work together.
1. Global Tokens: Global Tokens are the foundation of your design system. They define the core styles and values that apply universally across all components and elements. These tokens represent the most basic design properties such as colors, typography, and spacing. They are not tied to any specific context or component.
Purpose: Provide the base values used across the entire design system.
Scope: Universal—used everywhere in the design.
Global Tokens are like the main ingredients in a kitchen that you use in almost every recipe.
2. Semantic Tokens: Semantic Tokens, also called “Alias,” are generally mapped to Global Tokens. They build on top of Global Tokens but add meaning based on the design context.
These tokens define how and where styles should be applied, such as a button color or a text size for headers.
Purpose: Define style based on its context or purpose.
Scope: Used for specific functions, like buttons or alerts.
If Global Tokens are ingredients, Semantic Tokens are specific dishes you prepare with those ingredients, like a salad or a pasta.
3. Component Tokens: Component Tokens are the most specific. They control styles for particular parts of individual components, offering granular customization. These tokens are tied to individual UI elements like buttons, cards, or inputs, allowing them to behave or look differently in various scenarios.
Purpose: Style specific parts of a component.
Scope: Applied to specific UI elements like buttons, cards, etc.
Component Tokens are like the seasoning or garnish you add to individual dishes to give them a unique flavor or presentation.
In short, Global Tokens set the foundation, Semantic Tokens add meaning based on context, and Component Tokens allow for detailed control of specific elements. Together these three layers make up your complete design tokens.
Here’s the comparison table between Global, Semantic, and Component Tokens
Token Type Purpose Scope Examples Global Tokens Define universal base styles Used throughout the entire design system --color-primary, --font-size-base Semantic Tokens Apply context-specific styles Used for specific functions like buttons --color-button-primary, --font-size-body Component Tokens Style individual parts of a specific component Used for individual UI components --button-border-radius, --card-shadow
Woah, we know that’s a lot to take in. There are just so many elements and things you need to take care of—colors, fonts, layouts, and whatnot… That’s why, when it comes to maintaining a cohesive design system, having the right tools makes all the difference.
That’s where a product like Figr Identify comes in. Figr Identify helps you:
Easily set and adjust fundamental styles, ensuring that your design stays consistent across all elements.
Directly manage context-based tokens in Figma, allowing for quick updates.
Customize tokens for individual components with ease, making your design system more adaptable and organized.
With Figr Identity, you can also create reusable design pieces quickly, saving you time to focus on being creative. Plus, it works seamlessly with Figma, fitting right into your workflow and keeping your designs on-brand.
Figr Identity makes designing easier and more efficient so that you can build better, consistent designs with minimum effort.
Token Naming Conventions: The Key to Seamless Design
Credit: [Oscar Gonzalez, WAS](<https://medium.com/@ogonzal87?source=post_page-----927fc1404099-------------------------------->)
When working with design systems, naming design tokens properly helps keep everything clear, consistent, and easy to update.
Let’s explore how to name tokens in a way that makes sense, stays organized, and the different layers of tokens.
1. Predictability and Flexibility in Naming
Token names should be easy to understand (predictability) and flexible enough to handle future changes (flexibility). Here’s how you can achieve that:
Consistency: Always use the same pattern for naming tokens.
Descriptive: Make sure names clearly describe what the token is for.
Scalable: Use names that can handle future updates or additions without becoming outdated.
Example:
Predictable Naming: -color-primary for the main brand color.
Predictable Naming: -font-size-heading for heading font size.
Flexible Naming: Avoid overly specific names that might not fit future design changes, e.g., -button-background instead of -color-blue-button.
2. Naming Structure
A well-structured naming convention typically includes three main components:
Context: What category does the token belongs to, like color or spacing.
Common Unit: What the token is about, like size or usage.
Clarification: Extra details to tell similar tokens apart.
Example Naming Structure:
Context: -color, -font-size, -spacing
Common Unit: primary, heading, small
Clarification: -color-primary, -font-size-heading, -spacing-small
Here are some examples of how you can name your design tokens:
Token Name Description --color-primary Primary brand color --font-size-heading Font size for main headings --spacing-small Small spacing for margins
How to use Design Tokens Effectively
This section will explore how you can use design tokens to save time, leverage them effectively through automatic updates, and how you can integrate them into design components and resources.
Automatic Updating of Design Tokens via Tools
Automatic updating of design tokens ensures that changes are reflected across your entire design system instantly. This saves you from having to manually update each part of your design.
And the tools that help you do this can streamline your workflow and maintain consistency across different platforms.
Benefits of Automatic Updating:
Consistency: All your design elements get updated together.
Efficiency: You don’t have to waste time making changes by hand.
Accuracy: You won’t make mistakes since the updates happen automatically.
Tools for Automatic Updating
Figr Identity
A product like Figr Identity makes it incredibly easy to make design tokens and it also automates the process of updating design tokens in Figma. This keeps all your designs up-to-date without needing to manually change each element.
Here’s How to create Design Tokens using Figr Identity (you’ll be shocked how simple it is):
STEP 1: Launching the Plugin
To use Figr Identity, open figma and you simply open a new file and launch the Figr Identity plugin. Once it’s open, you’ll be prompted to enter your project name, and from there, you’re ready to go!
STEP 2: Setting Up Design Tokens
In Figr Identity, setting up Design Tokens is extremely quick and simple.
Colors: You can set up your primary color, and the system will automatically generate various shades (or variants) of that color for you to use. If you need more control, you can add extra variants or even define secondary and accent colors. The product handles all the color generation instantly, so you don’t have to do it manually.
Typography: With Figr Identity, you can define your main (primary) and secondary fonts, and the product will automatically create a full typography system for you. This includes different font sizes, weights (like bold or regular), and line heights, which control how much space is between each line of text. You can always add more text styles if you need them.
Spacing and Grid: Figr Identity provides pre-configured values for spacing and grid systems, but you can fully customize them to fit your project’s needs.
Dynamic Component Updates
Here’s one of the best parts: as you change your design tokens, Figr Identity updates your components automatically. For example, if you want a sharper look, you can set the corner radius to zero, and all the components will instantly reflect that change. It’s like having an assistant who instantly makes updates for you, saving you tons of time.
STEP 3: Exporting the Design System:
Once you’ve set everything up and are happy with your design system, you can export it straight into your Figma file. Figr Identity will generate a full document that includes your style guidelines—things like colors, typography, shadows, grids, and spacing rules. This means you’ll have a clear and organized document that you can refer to or share with others.
Figr Identity also comes with a library of commonly used components—like buttons, inputs, and cards. You can easily import these into your project. Just search for the component you need, and it will appear in your design. This speeds up the process because you won’t need to build everything from scratch.
If you’re ready to make your design process faster and more efficient, give Figr Identity a try. Head over to Figr Identity or search for Figr Identity in the Figma Community.
Figr Identity gives you more time to focus on being creative while taking care of the repetitive work for you.
Theo:
THEO is a tool developed by Salesforce, available as a GitHub repository, for transforming and formatting design token files (usually in YAML or JSON format) into various platform-specific formats such as CSS, SCSS, JavaScript, Android XML, and more.
Theo is commonly integrated into build processes, such as Gulp, Webpack, or CI/CD pipelines, ensuring that design tokens are consistently updated and transformed as part of a project’s workflow.
This enables teams to maintain consistent design tokens (such as colors, spacing, and typography) and automatically convert them into formats that are compatible with different platforms.
Integrating Tokens into Components, UI Kits, and Resources
Design tokens are integral to creating a cohesive and flexible design system. They help to keep all parts of your design system working together.
Here’s how you can use them in components, UI kits, and other resources:
Components:
Consistency: Use tokens for things like colors and spacing in each component so they all look the same across the design system.
Flexibility: When you need to make changes, you can do it easily by updating the token.
Example: For a button, you can use -color-primary for the background and -font-size-base for the text size.
UI Kits:
Standardization: Tokens ensure that all the pieces in your UI kit follow the same design rules.
Modularity: Tokens make it easier to create modular and reusable UI elements.
Example: Use -spacing-small for padding and -color-secondary for secondary buttons.
Resources
Documentation: Include tokens in your style guides and documents to make sure everyone knows how to use them.
Design Systems: Tokens help build design systems that are easy to maintain, scale and update.
Design Tokens Best Practices
Design tokens make digital design more organized and efficient. Following these best practices ensures that your design system stays clear, flexible, and easy to manage.
1. Choose Tokens for Their Meaning, Not Just Their Values
When creating design tokens, name them based on what they do, not just their specific color or size.
Why It’s Important:
Clarity: It’s easier for designers and developers to understand the token’s purpose. For example, calling a token primary-button-background tells you it’s for the background of primary buttons.
Flexibility: If the color or size changes later, the token name stays the same, so you don’t have to change every instance.
Example:
Incorrect: blue-500 (just a color value)
Correct: primary-button-background (based on function)
This makes your design system more understandable and adaptable.
2. Use Global Tokens and Semantic Token for Consistency
It's important to distinguish between global and semantic tokens to enhance scalability and flexibility. Global tokens represent core design values such as colors, spacing, and typography that remain constant throughout the system. Semantic tokens, on the other hand, map these core values to specific uses, ensuring contextually appropriate application.
Global Token Example: --color-red-500: #e74c3c;
Semantic Token Example: --color-error: var(--color-red-500);
By separating global and semantic tokens, you can easily adjust the design system without needing to update every component manually. For example, if the error color changes, you only need to update the --color-error token and it will apply wherever that token is used, maintaining consistency across your entire design.
3. Don’t Create Tokens Just Because Colors Match
It’s important not to create tokens just because things look similar. Tokens should serve a clear purpose.
Why It’s Important:
Purposeful Design: Each token should have a job, like link-text-color, which is specifically for link text.
Avoid Clutter: Too many unnecessary tokens can make your design system harder to manage.
Example:
Incorrect: blue-light (just a random lighter shade of blue)
Correct: link-text-color (specifically for the color of links)
This ensures your design system stays clean and functional.
By using these best practices, you’ll make your design system clearer, more flexible, and easier to maintain. To improve your workflow in minutes, check out Figr Identity; a product that helps you manage design tokens and keep everything consistent.
Potential and Future Developments In Design Tokens
The world of design tokens is growing fast, with new technologies making design systems smarter and more efficient. Let’s explore some exciting changes that could shape the future of design tokens and improve how we create and manage designs.
Design tokens are becoming an essential part of design systems, and connecting them with the tools designers already use is key for smooth workflows. Here’s a look at how integration with popular tools is evolving:
Figma Integration
Figma Plugin: You can use the most valuable plugins while using Figma for your design needs. You might ask how? well, It’s possible through the finest plugin like Figr Identity, which simplifies the management of design tokens by enabling seamless synchronization across projects and allowing for real-time updates without disrupting design workflows.
Future Prospects: Figr Identity will likely to keep improving all design-related aspects to make sure you get faster implementation of your design tokens.
Benefits: Designers will enjoy faster workflows and better consistency in their projects while keeping everything aligned.
Sketch Integration
Sketch is a popular design tool known for its intuitive interface and powerful features. Integrating design tokens into Sketch enhances consistency and flexibility across projects, allowing designers to maintain brand alignment effortlessly.
Current Status: Sketch has some integration, but it’s limited.
Future Prospects: Expect better plugins and support, which will allow you to import and sync design tokens directly into Sketch.
Benefits: This will let designers make updates easily and keep designs consistent across platforms.
Adobe XD Integration
Current Status: Right now, Adobe XD supports design tokens through basic plugins.
Future Prospects: In the future, we’ll see improved integration, meaning automatic updates and smoother synchronization with your design system.
Benefits: It will reduce the time spent manually updating designs across different Adobe tools.
Advanced Synchronization and Future Improvements
In the future, managing design tokens will become even smarter and more sophisticated with advanced synchronization and better technology. Here’s what we might see:
Automated Token Updates
Current Status: Most updates are manual, or done with basic tools.
Future Prospects: Soon, advanced systems will allow real-time updates and automatic synchronization of tokens across all platforms.
Benefits: This will save time and keep designs consistent, without needing manual updates.
Cross-Platform Compatibility
Current Status: Design tokens can’t easily be shared across different design tools.
Future Prospects: New tools will make it easier to use tokens across multiple platforms, allowing for smoother transitions between tools like Sketch, Adobe XD, and Figma.
Benefits: Unified design systems, no matter which tool you’re using.
AI-Driven Token Management
Current Status: Some basic tools offer limited AI support.
Future Prospects: AI could soon manage tokens by predicting adjustments, analyzing trends, and even making design decisions automatically.
Benefits: Smarter design systems that adapt to user needs and changing trends, making the design process faster and more responsive.
This showcases how future design systems could automatically synchronize updates in real-time, making design work more efficient and stress-free.
These potential developments mean exciting things for the future of design systems. With better integration, automation, and AI-driven management, design tokens will become even more powerful tools for creating consistent, scalable, and intelligent designs.
Conclusion
Design tokens are revolutionizing how we create digital products by making it easier to keep everything consistent and organized. By turning design choices into reusable tokens, designers and developers can work more efficiently and adapt their designs across different platforms.
With design tokens, managing and scaling designs becomes simpler as your project grows, and automatic updates cut down on manual changes and errors. Advanced tools and AI will soon enable design tokens to adjust based on context, making designs more user-friendly.
Ready to elevate your design process?
Design tokens are not just a passing trend—they are essential for creating efficient and consistent design systems.
Start using design tokens now to enjoy streamlined workflows and improved collaboration. For an easy way to manage your design tokens, check out Figr Identity, the perfect product for creating and maintaining design systems right inside Figma.
Transform your design process and stay ahead with design tokens! Ready to Figr it all out? Contact us today!
