What the Hex
An in-depth explanation of my design token system.
Token
A Design Token is a source of truth for designers and developers. It represents design values, and can be used to take granular control of UI at scale.
Global Token
The Global Token represents all possibilities. It provides a name to a raw design value and the foundation for Alias and Component Tokens.
Naming:
sentiment.scale
Example:
primary.600
Alias Token
The Alias Token references a Global Token, and is used fr more specific UI elements such as a surface, border, or content.
Naming:
ui.prominence.sentiment.state
Example:
surface01.medium.neutral.pressed
Note: If part of the name is not needed, that section is removed.
Component Token
The Component Token can reference an alias or global token, and can be applied to a UI element for a component such as a button, toggle, or text.
Naming:
sentiment.component.state
Example:
primary.button.pressed
Color Scale
To define a global set of tokens, a color scale may help. To create a scale, leonardo.io will provide appropriate colors at any brightness level.
These brightness levels create contrast when used appropriately. A 0 - 1000 scale range will have 10 steps. 0 is the lightest, and 1000 is the darkest. The correlation is based on light. 0 is the presence of light and 1000 is the presence of darkness.
The scale helps create a foundation of colors that can be applied to any type of UI.
Sentiments
Sentiments are different Hues. We choose colors based on the experience we want to portray. This provides a semantic meaning to the user, and when named as a token gives a definition to that raw hex value.
4 categories of sentiment will enable a solid foundation for the global set of tokens.
Base: These are the neutral colors and will make up most of the UI. They are the foundational elements, but do not draw attention to themselves.
Main: These are the Primary, Secondary, and Tertiary colors. Used to draw the users attention to key flows throughout the experience.
Semantic: These are the colors used to inform the user of the system status. Danger, Warning, and Success messages for accurate and clear representation.
Extended: These colors help provide a holistic experience, and gives the designer a full pallet for adding color to non main actions while providing visual interest.
Surfaces – 01, 02, i
Surfaces can be thought of as the Z-index. Layering surfaces enables debth and contrast. 2 or more surface types can help. We can build up from the background up through surface-01, and surface-02.
I use a dynamic system where the surface placement matters less, and the surface / content relationship matters more.
The key here is to use UI types associated with the layer. If a surface-01 is used, the content-01 type should be used. A light theme may have more intermixed layering while a dark theme usually has a layering method where surfaces become lighter the higher up they are.
Background: This is the wireframe layer. Usually the lowest on the color scale (0)
Surface-01: The first layer, to be used with Content-01
Surface-02: The second layer, to be used with Content-02
Inverse: The inverse layer. Used to create surfaces with darker appearance, such as a button, and should be used with Content-I.
Note: you can create more surfaces, but you run into the issue of space on the scale as well as a higher cognitive load due to complexity.
Prominence
The prominence is a move up or down the scale and can be used within the same surface. This creates the ability to have a hierarchy in design. Keeping the prominence levels within the appropriate UI types will enable proper contrast and brightness levels.
Weak: A lighter version. A move to the left on the color scale.
Medium: A middle version. In-between the weak and the strong prominence points
Strong: A darker version. A move to the right on the color scale.
These prominences by themselves are not layer specific. Content can have both medium and strong versions of text. This would enable a visual distinction and hierarchy between H1, and H2 over H3, H4, and H5.
States
States can be closely aligned with Sentiment, but we must make a distinction. A State is an alteration of a sentiment. For example, an error state is the danger sentiment, not the alteration of a main or base sentiment. Depending on what application is being designed depends on the states needed.
Here is a full list.
Disabled : Indicates a non interactive state. Move one step left and change to neutral. Or, Move lower in the scale and stay in the same sentiment.
Focus: Shows a highlighted element especially useful for screen readers, or form fields. Move one step to the left in the same sentiment.
Enabled: Communicates an interactive component, such as a button or toggle. No movement needed.
Pressed: Relays a tap. Move one to the right.
Figma Plugin
Figma currently does not support local styles for more than color and typography. Using the Figma Studio plugin, you can have typography, sizing, spacing, color, border radius, border width, opacity, box shadow, font family, font weight, line height, font size, letter spacing, paragraph spacing, and more.
Creating Style:
I would recommend having the global set first. These would reference the raw value. Then, create a new folder called “Alias”. Provide a name and a reference to the global value. Each name needs to be unique.
Applying Style:
Once the style is created in the plugin, click on the element you want the style applied to. Then click the style you want.
Documenting Style:
Right click on the style, select “Documentation Tokens”, and choose from “name”, “raw value”, “value”, and “description”. The applied value will work the same as applying other styles.
Load, Export, and Styles:
On the bottom of the plugin there are options to update the plugin, or update the fima file.
Load:
Provides the ability to have a preset token list, or you can import styles from a JSON file.
Export:
Provides the JSON file you can use for development.
Styles:
Importing styles can be done here. The Figma styles will turn into Tokens. Creating Styles will create Figma styles. This way you can have alias and global token styles.
License Key:
To use your styles in different Figma files, use the License key. A unique key will be provided. Copy and paste into the plugin.
Swapping Themes
Option 1
If colors are named exactly the same in two separate Figma files, you can copy a screen to the second file, and swap the themes. The system will remap the colors in a 1 to 1 manner. If your primary color is #0071D9 (blue) and you want to change it to #4700DF (purple) the name will need to be the same on the figma file. The same can be applied to typography.
File 1 style name: Primary = #0071D9
File 2 style name: Primary = #4700DF
Go to the team library, choose the theme you want to swap in the library, and click “Swap library”.
Option 2
Using the Figma Token plugin, you can turn on or off themes and styles using the checkboxes. The plugin uses a hierarchy with the file on top taking priority over the file on the bottom. If the bottom file is deselected, the plugin will revert to the file on top. Here, the applied style needs to have the same name, but the name in each file will reference different global values.
Example A
✓ 1. File name: Light Theme – primary.background = primary.600
✓ 2. File name: Dark Theme – primary.background = primary.400
In example A, the dark theme would be applied.
Example B
✓ 1. File name: Light Theme – primary.background = primary.600
✘ 2. File name: Dark Theme – primary.background = primary.400
In example B, the Light theme would be applied.
Uploading to Repository
This is a way to keep the source of truth between design and development. Designers will push the JSON file provided with the plugin to a repository such as gitlab or github. The Developers, when ready may pull the styles to be used in the app.
Go to “Settings”, and under “Token Storage” press GitHub or GitLab to push. You may need to first provide credentials.
{Not yet available}
Next Case Study
Solaire Medical