About
Finding a simple solution to Figma Variables. A continuation and simplification of Variables V1
Definition
Variables are Figma’s feature for design tokens. We are utilizing this to standardize our approach to color. Creating efficiency in design and development while enabling more beautiful, and accessible designs.
Problem Statement
Design tokens can be solved in many ways. How do we create a system that can be used by both designer and developer in an intuitive manner.
My Aim
My goal was to create a system of tokens that would be approachable for anyone who was not intimate with my rule set. This meant pushing the complexity behind the curtain and utilizing naming conventions that were simple.
Color Pallet
I found it essential to have a robust color pallet that could be tokenized. I used http://Leonardo.io to create a pallet based on the brand color already used. I multiplied the colors by ten, making a scale of different levels of exposure. Covering all possible UI types color would be applied.
Layering States
Text styles were approached with opacity. This way there is a clear hierarchy, and designers are able to apply this hierarchy however they deem fit. This approach also works well with blending the background color into the text for a more cohesive design.
Blending Text
Text styles were approached with opacity. This way there is a clear hierarchy, and designers are able to apply this hierarchy however they deem fit. this approach also works well with blending the background color into the text for a more cohesive design.
Light and Dark Modes
Light and dark modes are built differently primarily because shadows cannot be utilized in dark mode. Light mode tends to alternate layer colors while dark mode gets lighter with each additional layer.
Some elements should not be changed when translating from light mode to dark mode. A navigational element that utilizes dark surfaces should stay dark in dark mode. It’s jarring to simply see an inverse of those components.
To keep complexity down, and to solve for this issue; I separated base elements from brand, and semantic colors. Base elements are given four surfaces all in light mode. For components needing a dark appearance, dark mode would be switched on.
Brand and semantic colors were given a weak, and a strong surface as a recognition that these colors are use to draw your eye’s towards them. Here instead of having a reverse; the strong surface would act as the reverse.
Theming
Lastly, instead of swapping the Global/Primitives colors from a light color pallet to a dark color pallet, I mapped this change at the Alias level. This way we draw from the same global set, and we allow for multiple themes.
Result
Designers were able to use the system right away without any hiccups
Creating a template of tokens and color light stops used with Leonardo Color made it possible to create a set up a file quickly
Development said it would be easy to implement, and nothing would break. (only a few tweaks to their existing generator).
Next Case Study
Ford Scan