Creation of multi-brand design system using Figma variables
Role:
Lead Designer
Industry:
Design System
Duration:
January 2024 - Present
Introduction
Key Statistics
Let’s start with some eye-opening figures:
2,200+ variants: This was the overwhelming number of variants in the Altibox and Lyse UI Kit, which is quite astonishing given we only had 80 components—40 for each brand.
10 days: That’s how long it took our developers to update a single color across all components in the event of a change.
With the upcoming Form Version 2.0, we anticipated a significant upgrade, introducing 50 new components, a fresh rebrand, and support for three brands at launch.
Creating User-Friendly Components
A significant issue with Version 1 was its lack of usability and responsiveness. While addressing brand needs, we undertook a substantial upgrade, employing Figma's tips and tricks to create UI components that wouldn’t disrupt the creative flow of our designers.
Results
Reflecting back on our initial statistics: we reduced the number of variants from over **2,200 for two brands to just 350 for three brands. This streamlined approach ensures that the count remains consistent, even if we choose to add new brands in the future.
We also transformed our update process—reducing the time needed to change a color from 10 days to just 10 minutes, allowing our developers to efficiently manage updates and package deployments.
Collaboration
To facilitate a major company-wide rebrand, we partnered with ANTI - Oslo, who provided invaluable support in preparing components while we set up our technical environment and variable architecture. Together, we developed a sleek, modern UI that aligns with our brand vision.
Variables
Our goal was to establish a white-label UI that included themes for Lyse, Konsern, and Altibox, complete with dark and light modes. Creating 12 combinations in a comprehensive table presented a challenge. We initiated the development of our variable levels: Core, Theme, Brand, and Surfaces. The main challenge lay in balancing systemization with brand identity, as ANTI primarily focused on a single brand while we aimed for a multi-brand approach. Open communication and some hard work helped us navigate this complexity.
