Introduction
As the lead designer, I spearheaded the development of the Beam 3 Theming File—a headless design system within Figma designed to adapt to client branding needs seamlessly. Working alongside one other designer, we created a scalable system that reduced design time for new clients by 75%. This file enabled Beam’s designers to quickly style components for new clients while maintaining consistency and adaptability. It also served as a foundation for Beam 4's token system, showcasing Beam’s commitment to scalability and brand enablement.
Goals
The primary goal of the project was to streamline the design process for new Beam 3 clients by automating branding tasks and reducing manual effort. We aimed to improve design consistency, simplify client change requests, and scale Beam’s design operations to accommodate rapid growth. The theming file integrated with a custom Figma plugin developed in-house, which linked styles directly to Beam’s platform. This ensured designs were not only visually accurate but also reduced developer workload by automating style application during development.
Challenges
Before the theming file, the design process for new clients was time-intensive and inefficient, requiring designers to create custom components for each client. Updating branding elements, such as colors, involved manual edits across the entire file, slowing the process.
This project predated Figma Tokens, so we relied on manual setups like color styles and component variables to create a system flexible enough to accommodate over 15 variations of a single component across clients. Building these nested components while ensuring consistency demanded meticulous planning and problem-solving.
Carousel component
Outcomes
The Beam 3 Theming File dramatically improved the scalability of our design operations. With its implementation:
Design time for new clients decreased by 75%, enabling the team to allocate resources to other priorities like feature development.
Over 40 client Beam sites were successfully created using the system.
Designers found the file easy to use after initial training, and its flexibility allowed for broad customization without increasing developer workload.
The success of this project also informed the development of Beam 4's token system. Expanding on the principles established in the theming file, we introduced hundreds of tokens covering not just colors but also corner radii, type styles, drop shadows, and spacing, further automating and enhancing the design process.
Reflections
This project underscored the power of automation and scalability in design systems, particularly for a growing company like Beam. It highlighted the importance of cross-department collaboration, as I worked closely with developers to ensure seamless integration between design and development.
On a personal level, this project challenged me to deepen my understanding of complex Figma features like nested components, variables, and auto layout. It also strengthened my leadership skills, as I mentored a fellow designer, resolved intricate design challenges, and conducted training sessions for the broader design team to ensure effective use of the file.
As my first major project at Beam, this experience solidified my ability to lead high-impact initiatives, making me well-suited for senior product design roles.
