Faire: Design System & Governance
As Faire rapidly expanded each quarter, the company and its teams grew at a fast pace. To keep up with the evolving product needs, new design patterns and assets were created on the fly, requiring designers to constantly adapt. Over time, this led to growing inconsistencies and asymmetry in designs. After a year of this, it became clear that stricter standards, rules, and a unified asset library were necessary to maintain design integrity. With a focus on elegance, delicacy, and simplicity, I collaborated with another designer to create a design system that emphasized refined typography and a clean, sparse aesthetic. Together, we built Faire's design system from the ground up, ensuring a cohesive visual experience across all platforms.
My role: System Designer
Duration: 6 months
Output: Successful launch of codified design elements, components, and system documentation
Research
Work on this effort began in the same way any design problem would be approached: with understanding the user and their needs. For us, this meant interviewing product designers, content designers, engineers, and project managers who may need to access designs/components within our Figma files. This proved to be crucial in finding a solution that met the needs of designers as well as ensuring we had a design system members of the team felt they had a hand in creating.
Current Figma Organization Audit
Alongside interviewing members of the team, we looked at how our current Figma files and documentation were laid out, as well as how we saw team members naturally organizing their files. This augmented our interviews, and granted us greater insight into how our design system could best serve the platform and the team’s workflow.
Outside Design System Audit
Auditing design systems from other platforms as well as interviewing their System Design Leads provided a source of inspiration and guidance as we began to develop our own system.
Feature Development Blueprint
We explored different options for how to potentially organize the structure of our Figma files. In order to do this, we mapped out the phases of the design lifecycle into a blueprint which identified the what, who, and where of each phase. This helped us to identify needs over the course of design work.
Figma Organizational Structure Sketches
We sketched out possible design solutions for how the overall structure of Figma should be organized, as well as individual designer’s files.
Architecture and Structure Alignment
Informed by our research and Feature Development Blueprint, we crafted several architectural options and wireframes with pros/cons for ways to potentially organize the structure of our Figma files. We shared these options out during our all-hands meeting for feedback, thoughts, and buy-in. It was agreed that, of the options presented, a hierarchy of Pillars > Features > Design Process aligned best with our current workflows at Faire
Naming Conventions
One of the most crucial steps is establishing clear and intuitive naming conventions. We approached this process with a focus on consistency, scalability, and ease of use, ensuring that both designers and developers can navigate the system effortlessly. By using descriptive, meaningful names for components, styles, and assets, we helped to eliminate ambiguity and improve collaboration.
Styles, States, Anatomy
We approached defining the styles, states, and anatomy of key components with precision. By breaking down each component—whether it was a button, form field, or navigation element—we ensured every state (e.g., hover, active, disabled) and style (e.g., typography, color, spacing) was thoughtfully considered and documented. This level of detail helped create a seamless user experience across all touchpoints. We also focused on the anatomy of each component, defining its structure and behavior to ensure consistency and scalability.
Zeroheight
We leveraged Zeroheight to manage and document its functionality. Zeroheight allowed us to create a centralized, easily accessible hub where the entire team—designers, developers, and stakeholders—could view, understand, and contribute to the system. By using Zeroheight, we were able to seamlessly document everything from component usage and design guidelines to code snippets and interactive examples. This not only ensured that the design system was scalable and up-to-date but also provided clear, user-friendly documentation that streamlined onboarding and collaboration across teams. The result was a well-documented, cohesive system that empowered everyone to work more efficiently and with greater consistency.