🚧 This mini project case study is currently being written, please request more information directly about this project.
Components
A deep dive into how we kicked off components and the thought process behind how we approach component craft and governance.
Component craft principles
Scalable
…
Keep it simple
…
Name it
…
Design tokens must be flexible cross platform
…
Collaboration is key to fully understanding context
. . .
Proof of concept
Early proof of concept showcasing how we use design tokens as Figma variables to quickly modify theming and modes within the appearance settings in Figma on the screen level. Figma variables enable our design teams to rapidly create design variations that map directly with our design tokens.
Types of design tokens
-
Primitive tokens map a value (hex code or pixel value) to a generic name, which can be used almost anywhere but has no meaning/context in use. Primitive tokens are not meant to be used in high fidelity / delivery for implementation.
When we think about primitive tokens, we group them into two categories, “global” aka brand agnostic, and “brand” aka brand specific. Global tokens can serve as placeholders when we don’t have brand values and brand values are specific and defined by the brand.
-
Theme tokens are role based tokens that map based on a brand’s visual language. Roles are the first step to creating meaning with our values and allow us to curate design decisions specifically through the lens of a brand.
-
Semantic tokens are more specific in nature and are contextual. This type of token applies design decisions directly to a design element within context of it’s intended use. Semantic tokens can be informed by global primitive tokens or theme tokens.
If the token must be dynamic or swappable to different brands, then we must use a theme token as the reference. If we have a static color, often the case with neutrals, we may use a global primitive token for this use. How we approach utilizing global primitive tokens as references for semantic tokens depends on what the intended use is with the token.
-
Component tokens are by far the most specific in nature and are rarely used. This type of token allows the greatest amount of control, which could be meaningful for us when we need that level of clarity. However, component tokens are not reusable. We utilize these tokens when we need to create overrides or we need to support additional clarity in design with interactive states.