United Masters Design System
Transforming United Masters' style guide into a fully functioning design system in Figma
My first challenge when joining UnitedMasters: their style guide was confined to a static Sketch file with numerous components spread out across other various project files, which limited collaboration and scalability.
I spearheaded the transformation of the static style guide and rogue components into a dynamic, interconnected design system within Figma. This case study outlines the methodology, challenges, and outcomes of this vital transition.
Kickoff the Transition, Setup Communication and Collaboration.
Phase 1: Transition
I kicked off the migration from a Sketch-based style guide to a unified design system in Figma. This included aligning with the design team to audit components and styles in Sketch, then transfer where possible and/or re-building those in a Figma file for the new design system titled; Design System Core.
Phase 2: Collaboration Boost
I launched a dedicated Slack channel, inviting the design and front-end teams to streamline progress sharing and strengthen cross-team collaboration.
Phase 3: Streamlined Processes
During our transition from Sketch to Figma, I established weekly check-ins to keep the design system on track. These meetings continued as new components were added, with each designer taking responsibility for components in their verticals, ensuring collective ownership of the system’s evolution.
From Alignment to Advancement
Syncing with Web and Mobile App Teams
We collaborated closely with the web and mobile app development teams, inviting them into our newly established Figma Design System file to ensure design components were functional and aligned with technical requirements. This collaboration was pivotal in creating a cohesive user experience across platforms.
Creation of Standards and Definitions
We established clear guidelines and definitions for each component, ensuring consistency and clarity. This step was vital in maintaining the integrity of the design system.
Ongoing Maintenance
With our Slack channel and monthly syncs with the front-end team we successfully implemented a sustainable model for the continuous evolution of the design system, incorporating new trends, feedback, and technological advancements.
A boost to design capabilities with a comprehensive Figma design system, driving innovation and efficiency.
The transformation of UnitedMasters’ style guide into a fully functional, interconnected design system in Figma marked a major advancement in the team’s design capabilities, with meticulous auditing, continuous collaboration, and strategic implementation positioning the system as a cornerstone of all mobile and web designs, driving cohesive, efficient, and innovative product development.
Progress:
In the weeks following the new design system in place for both web and mobile apps, It was a breeze to setup a design system for the Marketing team to utilize as they built out pages for the web.
Becoming Minimalist
