Designing a scalable design system for a fast-growing startup in Figma

Working at one of the fastest growing AI startups in the world, team collaboration between designers becomes a great challenge. There was a huge need for quick ideation and design of digital products with changing requirements and scaling teams.
Building a scaling design system for the company was one of the strategic goals to solve these problems. I was assigned to collaborate with the design team and build a scalable design system to reach the following goals :

Project Goals

Business goals : Reduce the ideation, and development time and improve the team collaboration process.

UX goals :  Improve the user experience across multiple products by using familiar design patterns, accessible design, and

DX goals : Reduce iteration time to build UIs while keeping quality.

Team structure

I worked within a team of 4 UI designers 4 front end engineers while in collaboration with the companies COO, Design and Engineering managers.

My role was to plan and create the design for the system and collaborate with the engineers to make sure all the strategic goals and met.

Our Process

The process was to go from the most simple foundational components to the more complex ones, all within an iterative process where each milestone is tested and validated.

Each of the steps in the project starts with a research and ideation phase, then a design phase and finally a testing phase.

Designing Primitives

The design process starts with planning the building block of the system, which are the primitives. These small elements serve as the basics for more complex elements, and they include

• Colors (Primary, accents and neutrals),

• Typography (Text styles for desktop and mobile)

• Iconography

• Inputs (Like buttons, switches, select menus, sliders and drop-down menus)

Accessibility was an important consideration for designing primitives, it involved a lot of collaboration between developers and designers to make sure all elements are accessible. Our process included the following steps :

• Evaluating contrast levels of our color palettes.
• Making sure typography follows correct HTML structure, this makes screen readers.
• Collaborating with engineers to have inputs work with screen readers/ keyboard navigation.

Complex elements

Complex elements are mostly made up with combining primitives to create multiple common design patterns. Using the powerful features of Figma, I used nested components in combination with auto-layout to make smart components that are highly customizable by simply swapping a few primitives.

Making use of variants

One of the important feedback from engineers was to start from a base component and create variants. Each complex element was designed starting from a base variant, and then other variants from the elements were added.

An example is the card component, by default, the components is a card containing an image, a title, and a description. Then, by swapping the card contents, we have a blog card, a user/profile card, a social media card.

In Figma, this was doe using variants, as a result designers can quickly drag and drop components and switch from multiple states and variants.

Developers, however, used a similar approach by implementing each component and a default one, and then adding options to switch variants quickly.

Testing

To test the design system UI, I collaborated with engineers to build a simple UI flow of an app. My goal was to evaluate the system in action and gather feedback by testing the simple app with users.

The criteria of acceptance of each component includes accessibility checks, usability testing with users, testing the workflow with designers and developers and making sure the developer and designer experience is good.

Results and final thoughts

Design systems were a great time investment, and a challenge to implement and test. However, we immediately learned that after using it, not only we harmonized the user experience of the multiple products offered by the company, but we also reduced the time it takes to ship and iterate on new functionalities.