Transition your existing design system with Figma’s new variable functionality to supercharge your DesignOps.
As engineering, product, and design teams moved to remote and hybrid work models, the evolution of design systems became essential to achieving successful cross-team collaboration and alignment. Design systems serve as the bedrock for streamlined workflows, offering standardized guidelines, shared principles, and a cohesive structure. When built on a foundation of consistent design tokens (essentially the smallest parts of a design system, such as colors, typography, and spacing), an effective design system can create cohesion across your products and foster a unified language for product designers and developers alike.
Figma, one of the biggest players in design collaboration, has pushed the design system functionality one step further. This year, Figma introduced a game-changing feature known as variables, which essentially is their version of design tokens. This pivotal addition makes the creation of robust token libraries and sophisticated design systems notably more accessible.
But what do variables mean for your design system? Let’s find out.
Understanding Figma Variables
At its core, variables act as an innovative solution to create design tokens within Figma, allowing UX or product designers to store and reuse values essential for designing and prototyping tasks.
Figma variables are made up of four main values:
Color: Documenting standards such as primary and secondary colors, backgrounds, borders, and more. By utilizing color styles, designers can swiftly update colors across their entire design by modifying the variables, ensuring coherence and consistency.
String: Responsible for storing text content such as UX copies and page content. By utilizing string value, designers can achieve localization, state updates, and more to create a more dynamic prototype.
Float: Available for storing numbers and decimal points, which allows designers to reuse the same value for consistency and future-proofing any major updates.
Boolean: Provides options for building out a series of logic gates, which allows designers to build complex prototypes with a minimal amount of frames.
Variable values are then organized within distinct collections and groups, providing a structured framework for streamlined management and use.
Transitioning from Components to Variables
Historically, product designers have used components (basic reusable UI elements) to create and manage consistency across screens. Features associated with components (e.g. style syncing and variants) all contribute to the success of a robust design system. However, updating these styles for traditional components is tedious and costly. Component styles like colors and size are enclosed within components, meaning that even a single color change triggers the time-consuming task of navigating through each component and variant.
By leveraging variables, designers can modularize component styles, treating them as interchangeable puzzle pieces to construct their designs. This approach allows designers to swiftly update style changes to all components by simply adjusting values at a ‘root’ level where the style declarations live. As a result, variables can accelerate the design process, enable responsive design, and most importantly create a design environment that supports dynamic styling.
The Power of Figma Variables
Now that we know what variables are, what is it that makes them so transformative?
Variables have established new best practices around how design systems should be structured and managed. These best practices result in three key benefits:
Scale Your Design System: Variables empower the creation of dynamic designs by connecting an initial collection of base styles that are linked to different components. This functionality organizes a comprehensive design system, syncs across platforms for a unified product line, and accommodates diverse theming and sub-brands.
Enhance Efficiency and Consistency: The variable feature boosts efficiency in crafting designs, managing comprehensive design systems, and building intricate prototypes. Product designers can streamline workflows, maintain consistency effortlessly, and implement changes across projects with unprecedented ease.
Connect Design with Development: A defining trait of variables is that they are organized similarly to how many existing CSS libraries organize their styles. Utility CSS breaks down every style into its own class. Variables emulate this process by storing one single value in each variable. By mirroring CSS functionality, which is commonly used in development practice, designers and developers will have a mutual framework to seamlessly collaborate on.
Putting it into Practice: How to Transition Your Design System
The Neuron Team recently migrated a large enterprise’s design system to be compatible with Figma variables to improve the client’s DesignOps. The result is a future-proofed design system and streamlined workflow between UX design and development.
Here’s how we did it:
1. Foundational Assessment and Audit
In every design system modernization project, our first step involves a comprehensive review and mapping of the current organizational design structure. This exercise helps to gain a better understanding of potential confusion within the variables system and the existing nomenclature structure, which is crucial for preventing a cumbersome experience for designers down the line.
During this client’s audit, our primary focus was optimizing the structure to accommodate separate collections for variables. It is worth noting that moving variables between collections is not yet possible. Therefore, we shifted gears to explore grouping variables within folders. While this interim solution isn't the final iteration, it marks a significant breakthrough in our understanding of the variable feature and its limitations.
2. User Analysis
Designing a next-gen design system with Figma variables was an exciting task, especially considering our target users were fellow designers. Through constant dialogue with the client’s design team, we were able to discover insights and transform the current system to fit their needs—simplified and seamless usability.
One of the most significant hurdles encountered was the sheer volume of variables and duplicate entries within their existing design system, resulting in extensive scrolling to locate desired variable settings. While implementing permission filters was an option to regulate displayed content, it contradicted our primary aim of simplification. As a result, we proposed a structural overhaul that consolidated the variable framework into two distinct collections. This strategic move substantially reduced duplications and streamlined the entire system.
Despite the additional effort required to realign components with their respective variables, this initiative established the benchmark for what we consider best practices. Resolving the client’s challenges involved tackling the myriad variables hindering their design team—causes ranged from organizational issues to ineffective search functionalities and inconsistent naming conventions.
3. Structural Realignment
Since the design system serves as the source of truth for all stakeholders, establishing a unified structure and naming convention becomes critical.
During the initial audit phase, we broke down the proposed structures into visual diagrams to give the Client clarity and a tangible grasp of various options. This approach allowed us to clearly illustrate our strategy to the Client’s design team, to optimize the conversation for precise feedback.
4. Implementation and Refinement
Throughout the transition process, our team removed unused variables and reconfigured all the components to adhere to the newly established variable system. Although it was tedious, creating a solid foundation is essential to streamlining the design workflow and future-proofing design decisions.
Our base collection holds all the raw styles, including colors, line widths, sizes, radii, and screen widths. This serves as a cornerstone for a base style guide, where we started connecting and organizing them into design tokens for the end user—the designer—to use for creating new or editing existing components. The tokens are categorized into different usages for better accessibility and discoverability. For example, colors are divided into brand, border, text, icon, etc., which will help designers pinpoint the exact color they’re looking for and prevent duplicate tokens.
Once the new collections were created, we then went through each component in the design system and relinked all the elements that were connected to the old collection to the new one.
5. Design and Development Synergy
The final step of the transition process involved addressing the time-consuming transfer of knowledge and the associated miscommunication between the client’s design and development teams when updating or making changes to the product interface’s design.
While the now elaborate design token library created in Figma holds significant power, we wanted to elevate their design system further by leveraging the REST API. This API integration allows direct synchronization between design and development, enabling teams to automate the transfer of the design system into the codebase. Essentially, it transforms Figma variables into style sheets, fostering a conflict-free workflow and streamlining collaboration between design and development teams.
As a result, the client can implement automated design workflows that will significantly reduce manual labor, inconsistent designs, and repetitive back-and-forth interactions between designers and developers.
Setting a Standard for DesignOps
Creating a scalable design system that mirrors developers' workflows is pivotal for elevating the design maturity of product teams. This new workflow enables early detection and resolution of issues like style alignment, compatibility, and more during the design stage, thus averting future surprises in development.
By incorporating variables, this system not only fosters a conducive environment for designing, collaborating, and delivering assets efficiently, but it also bridges the gap between product designers and developers.
Moving Forward with Variables
Figma’s variable offering represents the future of design and engineering workflows. We at Neuron, are incredibly excited about what the future holds for DesignOps and will continue to explore and experiment with the capabilities of variables.
If your team is looking to create a next-gen design system using Figma’s variables, reach out to our team or email us at hello@neuronux.com to learn how we can help.
Glossary
Variables: a feature from Figma that allows designers to store and reuse values essential for design properties and prototyping tasks.
Components: basic reusable UI elements, to create and manage consistency across projects.
Design Token: a small, repeated design decision that forms a design system’s visual styles.
Collection(s): The top-level folder of how designers organize their variables.
Mode(s): A way to assign or add additional data to one single variable to allow automatic updates based on state, screen size, and more.
Group: An organization method offered from Figma variables to categorize variables. Essentially, think of them as small folders that enclose a series of variables.
Base: The root level collection that contains variables with raw style declarations bound.