Design System

Library of components in Figma


Product designer




2 months


When I first joined Abound, they had a barebone foundation for a design system consisting of typography, colors, and a few components. However, they had no actual documentation of this design system to act as a source-of-truth & facilitate knowledge sharing across the company.

To allow the design team to continue working fast & maintain consistency as our company grew, I was tasked with building our design system! Some of my goals were:

Building the design system


I had never created a design system before, so I started this project with some research:

Documented my research in Notion

Plan of Attack

After my internet research, I had my plan for creating the design system:

  1. Interface audit (screenshot and categorize all the unique UI patterns)
  2. Share findings with design team (discuss any inconsistencies and areas for redesign if needed)
  3. Build components & all their variants in Figma
  4. Write usage guidlines for each component
  5. Share new design system with product, design & engineering

Interface Audit

I went through our site & screenshotted all the components and patterns we were utilizing. When I shared this audit with the design team, I brought up inconsistencies we should mend & discussed component use cases and how we might consolidate the number of stylings/variations we were using (because we were using a lot πŸ‘€)

The Component Library

Based on my initial exploration of other design systems, I decided to put each component on a separate page in Figma. This organization makes it easy for other designers to find the components they need & reduces clutter on pages.

Variable Components

The bulk of my time for this project went to making the actual components in Figma. I created 25 components ranging from simple ones, such as avatars, buttons, and pills, to more complex ones like cards and modals. And for each component, I included all their variations (size, shadow, state, etc.) I also utilized auto layout whenever I could so they'd be as responsive as possible to make it easier for the design team when creating mockups.


A big priority for me when building this design system was accessibility. I wanted to make sure that each element in our design system considered all of our users. So designing with close attention to WCAG standards, I was able to build components that were highly accessible & maintained Abound's branding.

Usage Guidelines

For each component, I included a definition, types, styles, when to use & when not to use, and screenshot examples for desktop and mobile.


Check out some other projects: