Figma Component Design Systems
As part of my efforts to design at scale, I organized and built out master component sets in Figma that combined all related assets and elements into one centralized document. As a member of our design systems committee, I helped build out component sets for our MLB logos, NBA logos, in-product competition badges and more so that our entire organization could start utilizing them. For example, it helped our product designers and engineers integrate the team logos into our collections page within the product and helped brand designers like myself build out social templates that could be easily updated by our social team.
Client
Sorare
Year
2022 - 2023
MLB Logo Component Set:
Prior to launching our new partnership with MLB, team members across the organization weren’t very familiar with the MLB team logos and branding. Common challenges were that finding the logos was hard and knowing which to choose was also unclear. Therefore, I built our first MLB logo component system where all the logos and team colors were organized in one central and easy to find location within Figma. We then published the set so everyone on our team could pull it into their projects from the asset library.
This animation shows some of the steps I took to build out this system: (1) downloaded every team’s official logo guide to ensure the most accurate information (2) isolated and transferred all the relevant vector assets from Illustrator to Figma. (3) organized the assets into categories. (4) created component sets for all the different logos across all MLB teams.
In-Product Application, Team Collection Pages:
When product design and engineering wanted to launch our collection page, the design they agreed on featured each team’s logo in the background, however they needed to know which official logos to use and turned to me. Based on their mock-up, we agreed on the one-color primary logo component set. Since I had already isolated and organized these assets, I was able to quickly export all the logos in .svg format to hand-off to our engineering team.
Social Media Application, Frequently Updated Graphics:
Easy-to-update within Figma
Examples of Sorare: MLB social graphics that utilized the component set to quickly create new weekly variations of content.
Sorare: NBA Competition Badge Component Set:
Working alongside a talented product designer, Tulga Saikhan, I helped build out our MLB and NBA competition badge sets so that it could fit within our larger design system. Part of this process included ensuring each badge was the same size, set to scale, all color styles were linked up, and that we had all the correct variations. This new system worked great as it became the new home base for product designers, brand designers, and engineering to pull our assets.
Overall, as our U.S. design team expanded from just myself to 20+ people, I was able to learn a lot of best practices and techniques for setting up a successful and organized design system.
NBA Competition Badge Design System
Example of a Sorare: NBA social post that utilized the component set