Building a themeable design system in Figma
Reading time: 2 minutes.
Building a themeable design system in Figma
Reading time: 2 minutes.
Can we create a single design system that serves multiple brands? This approach would greatly enhance efficiency and productivity by maintaining a unified token library in Figma, shaping the UI across different brands.
Can we create a single design system that serves multiple brands? This approach would greatly enhance efficiency and productivity by maintaining a unified token library in Figma, shaping the UI across different brands.
Can we create a single design system that serves multiple brands? This approach would greatly enhance efficiency and productivity by maintaining a unified token library in Figma, shaping the UI across different brands.
Setting up different themes using Figma variables
Setting up different themes using Figma variables
Setting up different themes using Figma variables
Using Figma variables, we can create foundational tokens that serve as design decisions for different themes (brands). This is achieved by utilizing the ‘Modes’ feature in Figma variables. I decided to name my design tokens semantically, removing any brand identity from the token itself and making it easier to integrate different brand style guides.
Using Figma variables, we can create foundational tokens that serve as design decisions for different themes (brands). This is achieved by utilizing the ‘Modes’ feature in Figma variables. I decided to name my design tokens semantically, removing any brand identity from the token itself and making it easier to integrate different brand style guides.
Using Figma variables, we can create foundational tokens that serve as design decisions for different themes (brands). This is achieved by utilizing the ‘Modes’ feature in Figma variables. I decided to name my design tokens semantically, removing any brand identity from the token itself and making it easier to integrate different brand style guides.
Semantic naming describes the intent of the color; for example, instead of naming a token “Starbucks-green” for Starbucks primary color, I use “color-primary” instead. This token is then linked to another tier of tokens called “theme-color-primary” and mapped to the relevant UI elements.
Semantic naming describes the intent of the color; for example, instead of naming a token “Starbucks-green” for Starbucks primary color, I use “color-primary” instead. This token is then linked to another tier of tokens called “theme-color-primary” and mapped to the relevant UI elements.
Semantic naming describes the intent of the color; for example, instead of naming a token “Starbucks-green” for Starbucks primary color, I use “color-primary” instead. This token is then linked to another tier of tokens called “theme-color-primary” and mapped to the relevant UI elements.
Card component example
Card component example
Card component example
Here is a more complex example to demonstrate theming: a card component with different elements that are all themeable. A card component typically includes an image, title, description and an action, which are common across different brands. Adding content to the card component, it adapts to match the brand’s visual identity. Below, we have the same card component structure, but with different content. One brand uses it for an e-commerce site delivering flowers, while another uses it for a news website.
Ending note
Ending note
Ending note
I find it fascinating how a component can look and behave differently across various brands while maintaining the same internal tokens structure. For multi-brand organizations, this type of design system can significantly increase efficiency by allowing themeable components to be shared across different brands, all while preserving each brand’s unique visual identity.
I find it fascinating how a component can look and behave differently across various brands while maintaining the same internal tokens structure. For multi-brand organizations, this type of design system can significantly increase efficiency by allowing themeable components to be shared across different brands, all while preserving each brand’s unique visual identity.
I find it fascinating how a component can look and behave differently across various brands while maintaining the same internal tokens structure. For multi-brand organizations, this type of design system can significantly increase efficiency by allowing themeable components to be shared across different brands, all while preserving each brand’s unique visual identity.