top of page

BUILDING A DESIGN LIBRARY AT BEST BUY

Creating a shared

UI System in Figma

bestbuy-vendor-logo-library

Overview​​​

 

As the digital design team at Best Buy Canada grew and production demands increased, designers were frequently recreating the same UI elements across projects. This led to inconsistencies in visual execution and unnecessary time spent on repetitive work. I led the creation of a shared Figma design library to improve consistency, speed, and scalability across the team’s digital creative.

​​

Problem​

 

Without a shared design library, common UI elements such as buttons, typography styles, layouts, and promotional components were recreated repeatedly. This resulted in visual inconsistencies, increased review cycles, and slower production timelines. Onboarding new designers also required additional time, as patterns and best practices lived primarily in individual files.

​

My Role​

 

As a Product / Digital Designer, I led the creation and maintenance of a shared design library in Figma. My responsibilities included auditing existing designs, defining reusable components and styles, establishing usage guidelines, and iterating on the system based on real-world use.

​

Constraints​​

 

The library needed to support a wide variety of use cases without becoming overly rigid. Production timelines were tight, and designers needed immediate value from the system. The library also had to align with existing brand standards while remaining flexible enough to evolve alongside new campaign needs.

​

Strategy & Process

​

I began by auditing active and recent design files to identify the most frequently used UI elements and recurring patterns. Rather than attempting to systemize everything at once, I focused on high-impact components that would immediately reduce duplication and improve consistency.

​

Components were designed with flexibility in mind, using variants to support common use cases without overcomplicating the system. Text and color styles were standardized to ensure consistent application across projects, and components were built to work across multiple formats and layouts.

​

To support adoption, I documented how and when to use each component and shared guidance with the team. Feedback from designers informed ongoing iteration, allowing the library to evolve based on real production needs rather than theoretical use cases.

Best Buy prototype ui components

Outcomes & Impact

​​

  • Established a shared Figma design library that became the foundation for digital creative across multiple teams and projects.

  • Reduced repetitive design work by enabling designers to reuse standardized components instead of recreating common UI elements.

  • Improved visual consistency across campaigns and platforms, reducing review cycles and alignment issues.

  • Increased design production speed by minimizing setup time and enabling faster iteration.

  • Simplified onboarding for new designers by providing a clear, documented system of reusable patterns.

  • Created a scalable framework that continues to evolve alongside new campaign and platform requirements.

best buy wireframe component examples

What I Learned

​​

Design systems must balance structure with flexibility. Overly rigid systems slow teams down, while lightweight, usage-driven libraries encourage adoption. Iterating based on real-world use is essential to maintaining long-term value.

​

Looking Ahead

​

The design library continues to evolve as new patterns and requirements emerge. It supports faster production today while laying the groundwork for more comprehensive design systems in the future.

© 2026 by Mitch Lum

bottom of page