Atlas
Problem & Objective
Atlas is a web application designed to empower everyone with the ability to access their data and control their privacy. Like most brands, Atlas was initially built using a set of styles that are used consistently for different functions. However, making changes to the styles across all screens and platforms was a time consuming process lending itself to human error and inconsistencies. To achieve a more flexible design process and a simpler development experience, I found it important to implement a token-based system.
Using Styles forces me to have to find and select every layer with this text color to update its color. This is a time consuming task with a high chance of human error, especially if designs live in multiple files.
A variable can vary in value or take on multiple values.
With Figma's latest update, we now have the capability to store reusable values such as color codes or numerical values, which can be applied to various design properties. I initiated this process by starting with color values.
Using a number scale helps establish a clear hierarchy within the system.
It's especially useful when you have various shades or tints of a single color. The numbers signify the intensity or value of the color, making it easy to understand the relationship between different shades. I went through and established a variable for each color Style.
Using a number scale helps establish a clear hierarchy within your design system. It's especially useful when you have various shades or tints of a single color.
Semantic names expresses how an element should be used.
Variables in the primitives collection lack semantic names as they don’t express a function or intent. Instead I created a new collection of variables that reference the primitive values and give those variables semantic names.
Semantic naming anticipates potential changes in design or branding direction. Tokens named according to their role are more adaptable to shifts in color schemes, branding updates, or design trends.
It's time to use the same method for number variables
I used number variables to create a system for spacing and radii values. Because Atlas uses an eight-point grid system I set the variables based on multipliers of 8. I then created tokens that reference the primitive values.
Because Atlas uses an eight-point grid system I set the variables based on multipliers of 8.
T-shirt sizing in a design system simplifies the categorization and organization of design elements based on complexity, making it easier to create and maintain a consistent and scalable design language across various projects.
Using modes for easy theme creation.
Now that all my styled elements have been converted into variables, I created additional modes. I can then switch modes on layers and elements to quickly change designs for different contexts. This allows me to implement different themes, like dark mode, seamlessly.
Conclusion
Converting to a token-based design system offers numerous advantages that contribute to a more streamlined and effective design and development process. By abstracting design properties into tokens, Atlas can now achieve consistency, efficiency, and scalability while fostering collaboration and maintaining a cohesive brand identity across various platforms and touchpoints.