NETGEAR DESIGN SYSTEM
OVerview
In Q4 of 2021, I lead NETGEAR's design team to make the transition to Figma as our primary prototyping tool. This change provided an opportunity to create a comprehensive design system that not only facilitated more precise prototyping but also substantially improved efficiency. Moreover, the tool allowed external agencies to quickly familiarize themselves with our branding, design language, and internal technical capabilities. These benefits enhance our collaboration with such agencies by accelerating their work and reducing feedback loops.
Problem & Solution
At NETGEAR, designers face two significant challenges: limitations within the CMS and a shortage of web development resources. As a result, designers must work within the confines of pre-built CMS components, as custom HTML components often necessitate additional funding and resources. This was justification for creating this system, as it maximizes our ability to iterate on the aforementioned CMS components in an efficient way.
Mirroring the CMS
The utility of the design system relies heavily on the precise replication of CMS components. Therefore, a comprehensive set of states and properties has been assigned to each Figma component to match the options presented to our developers in the CMS. This additionally provides designers with an accurate depiction of how assets will integrate into the website, allowing for a more thoughtful consideration of text placement, readability, and image choice.
Full Scope
The development of this system has been thorough and comprehensive, ensuring that it covers all of the components included available to the team. This meant developing 37 components and 2741 component variants. This level of detail not only enhances the system's overall usefulness but also deepens my understanding of the CMS components and identifies areas for future improvement. Additionally, this experience has provided me with a strong basis to develop, manage, and refine design systems in the future, while also significantly increasing my proficiency in Figma as a whole.