How to Build a Figma Design System for 50+ Sports Brands

By Sneak Peek Design

Categories: Design, Product

Summary

A Figma design system supports 50+ sports brands with fully customizable components and dark/light mode. The system separates designer and engineer views for optimal usability.

Key Takeaways

1. Separate design and engineer views in the Figma design system to optimize usability for different roles.
2. Create highly customizable components that automatically adapt to different team brands, including colors, logos, and imagery.
3. Build a modular design system with atoms, molecules, and organisms to easily compose complex UI elements.
4. Leverage Figma's prototyping and states features to create button components with interactive hover, press, and dark mode states.
5. Provide clear documentation and guidance for engineers to understand and use the design system components.
6. Adopt a design system approach to scale a cohesive brand and UI across 50+ sports teams and products.

Topics

• Design Systems
• Figma
• Branding
• Sports Tech
• Product Design

Transcript Excerpt

I feel like the problem that you have, Cornelius, is that you have to create like a singular design system that can work with 50 different sports brands, right? >> Yeah, totally. >> I just want to see how you're switching between different teams and brands. >> So, this is where it gets fun. So, we just made this flow. Now, it's it's all wired up. So, theoretically, say I want to change this whole flow to be Bucknell, which is a college basketball team. So, I can hit Bucknell Bison. And now it's ...