Multibrand Design System
Multibrand Design System
As the lead on this project, I spearheaded the creation of a design system that’s not only a breeze to understand but also facilitates easy re-branding of screens across 6+ brands. Ensure a seamless introduction of this new design system, keeping the team’s workflow smooth and uninterrupted. Ready for the seamless upgrade?
Fewer Files
Fewer Variants
Productivity Increase
The Grand Plan
Utilize atomic methods to break down the design system into key categories – atoms, molecules and organisms. Build a design system that leverages all the fantastic features Figma has to offer. Property values and variables take the spotlight here for utmost flexibility. Time to craft those pixel-perfect components!
The Process
Starting things off by diving into conversations with the team, we pinpointed the weak spots in the old design system. Together, we ironed out our objectives and charted the course for what we aimed to achieve. Open communication truly sets the stage for success.
A Game Changer
Amid the project, when Figma introduced variables, I took the lead in completely reevaluating the plan. We decided to future-proof the design system by strategically incorporating variables, ensuring adaptability and long-term success.
Variables proved to be a pivotal tool, enabling us to effortlessly reskin our designs for another brand with just one click. This became a massive key in streamlining our workflow, significantly reducing the number of documents required for our six brands.
We transitioned from managing multiple documents, each requiring updates for six brands, to a more efficient approach. Now, with the power of variables, we only need to update one platform version and can seamlessly reskin it across all brands. It’s been a game-changer in simplifying our process.
The HANDOVER
The Final product
