Introduction to the design system
Designing customizable user experiences poses the challenge of maintaining consistent and synchronized styles across multiple products while iterating on new features for various devices and screens.
My role primarily focuses on enhancing the design system to simplify and optimize the user interface for marketing professionals, following the existing design process. Serpstat aims to reduce the time spent on marketing tasks through innovative features such as competitor analysis, site audits, keyword research, and AI content generation. It's all about saving precious time on marketing chores with tools like spying on rivals, giving your website a check-up, and uncovering the best keywords.
By implementing semantic tokens and variables in Figma, I've ensured that our design tokens are systematically used in new designs. This integration connects designers and developers, allowing for a more seamless design process. This strategic use of design tokens supports aesthetic consistency while also enhancing the functionality and accessibility of our tools. This approach not only aligns with the best practices in the design community but also ensures our design elements are reusable and adaptable across different projects.
Defining Figma variables and design tokens
Design tokens, serving as the atomic design elements, act as a source of truth across UI platforms. By standardizing typography, colour palettes, and more, they ensure UX consistency and enhance accessibility, making design decisions reusable and scalable.
We consider four different categories of design tokens:
Colours: HEX / RGBA values representing color palettes and their applications: color, shadow, opacity, alias, etc.
Typography: Font family/size for headers, body, links, etc. Font, font size, line height, etc.
Spacing: standardised units of spacing inside/between elements for components, patterns, and layouts/grids.
Effects: Defined visual/motion identity: e.g., radius, animation duration, ease curve, etc.
Naming Tokens in the Serpstat Design Systems
This design system tokens colour model approach features two main hierarchy levels: global tokens (also known as primitive palettes), which are named based on their colour and lightness code (e.g., primary-50), and context tokens, which are named theming according to their UI pattern value (e.g., Bgr-Base-Primary). These hierarchy levels ensure the necessary consistency and scalability across design and engineering tools to use in both light and dark modes.
The names should be:
Short: Easy to type and remember.
Meaningful: Clearly describe the design attribute they represent.
Modular: Allow for combinations and variations.
Consistent: Follow a standardized naming convention throughout the system.
Managing Design Tokens
Managing design tokens involves using various tools to create, organize, and distribute them efficiently.
Some useful tools:
Style Dictionary: A powerful tool that transforms design tokens into different platform-specific formats, such as CSS, JSON, and XML (convenient for the semantic tokens approach).
Tokens Studio: An advanced plugin for managing design tokens within Figma, allowing easy switching between themes and token sets in variables in Figma.
Tokenbase: A web-based tool (currently in BETA, 2024) for managing any design tokens (including color token), offering a centralized platform for token management.
Using Figma Variables
Figma variables play a crucial role in managing design tokens workflow within the design tool and could be considered an introduction to design systems. These variables can represent properties like color, typography, and spacing, making it easy to apply and update tokens across different designs.
Setting up Design Tokens in Figma: Begin creating variables within Figma, categorizing them by their purpose, such as colors or sizes. Assign meaningful names to each variable to ensure clarity and consistency.
Linking Figma Variables to Design Tokens: Once the variables are set up, link them to the respective design tokens. This allows for easy updates and ensures that changes to a variable automatically reflect across all instances where the token is used.
My Contribution to Serpstat Design Tokens
My role in developing design tokens in Figma for Serpstat involved a comprehensive process of creating, naming, and managing tokens to use variables. This included collaborating with product managers and developers to ensure the tokens met the needs of the project and aligned with the brand's visual language.
Developing Design Tokens for Serpstat
Initial Setup and Strategy: The first step was to define the scope and strategy for the design tokens. This involved understanding the brand guidelines, identifying key design attributes, and categorizing them into manageable tokens. We used number variables to define min and max values for various design properties, ensuring a structured approach.
Implementation Process: Using Figma, I created and named the design tokens, linking them to the appropriate variables. This step required meticulous attention to detail to ensure each token was correctly defined and applied. Figma’s flexibility allowed us to change the color and other values easily, adapting styles to variables for better integration.
Testing and Validation: Once the tokens were implemented, rigorous testing was conducted to ensure they worked seamlessly across different components and platforms. By creating complex design elements and verifying their behavior in both dark and light modes, we ensured our design tokens were reliable references. This method supported design consistency and scalability, providing a solid foundation for the Serpstat design system.
Best Practices for Design Tokens
To ensure the effectiveness and longevity of design tokens, follow these best practices:
Ensuring Consistency: Maintain a standardized naming convention and structure to avoid confusion and ensure clarity.
Maintaining Scalability: Design tokens should be flexible enough to accommodate future updates and expansions without causing significant disruptions.
Collaboration and Communication: Regularly communicate with all stakeholders, including designers, developers, and product managers, to ensure alignment and address any issues promptly.
Benefits of Using Design Tokens in Serpstat
Implementing design tokens in the Serpstat design system has brought numerous advantages:
Enhanced Consistency: Design tokens are a method to ensure that visual design elements remain consistent across all platforms. By using tokens in Figma, designers and developers can maintain a unified look and feel, reinforcing the brand's identity. Design properties such as color tokens and component tokens are applied uniformly, making the system scalable and reliable.
Improved Efficiency: Centralizing design attributes through Figma variables streamlines the design process. By creating a variable collection, any changes to the base color or design elements (like icon design) can be made swiftly and propagated throughout the system. This reduces the time and effort required for maintenance. Tools like Tokens Studio facilitate this workflow, making it easier to manage and implement design tokens.
Streamlined Updates: When new variables are introduced or existing ones need to change, updates are automatically applied across all instances, ensuring the entire system in Figma stays current. This approach uses global tokens and semantic tokens to manage design decisions, enabling quick adjustments to color styles, spacing, and radius without the need for extensive manual updates. This not only ensures consistency but also supports scalability and flexibility across the design system.
Implementing design tokens with variables in Figma enhances the overall UI, making it easier to manage styles and variables across various components. By following best practices and leveraging tools like Tokens Studio, Serpstat’s design system achieves a seamless integration of design and code, ensuring that all design elements are cohesive and easily reusable across different use cases. This approach sets a solid foundation for future enhancements and maintains the integrity of the brand's visual design across all digital platforms.
Comments