Scalable design system for a nonprofit website, consolidating existing components into a reusable library.
OVERVIEW
Simplifying a shared design system for a growing website.
I helped build the design system from the original component library for the Data Science Alliance website, based on an established visual direction and design.
ROLE
UI/UX designer
TOOLS
Figma
IMPACT
Co-built the component library the DSA website was developed from: 124 component sets across 7 breakpoints.
CHALLENGE
124 component sets across 7 breakpoints.
The original component library was built to support the website's responsive layouts and established visual guidelines. Creating separate variants for different screen sizes made it possible to design and adjust each layout individually, but it also introduced repeated components and styling values that were harder to maintain consistently. By revisiting the library, the goal was to preserve the existing design while reducing duplication, applying component properties, and organizing shared values into variables and text styles.
AUDIT
Similar components were maintained separately instead of using shared variants and properties.
The original library used separate component sets for similar designs across buttons, navigation, and content sections. The audit identified opportunities to consolidate these into reusable components using variants, component properties, and nested instances.
01
02
03
04
05
FOUNDATIONS
Establishing a shared foundation with design tokens.
We started by organizing the website’s existing colors, typography, and spacing into 144 Figma variables across three collections: Primitives, Theme, and Responsive. Semantic tokens in the Theme collection reference shared primitives, while Responsive variables manage values across screen sizes. This preserved the existing visual design while making components easier to update consistently.
COMPONENT ARCHITECTURE
Applying properties to make components easier to configure.
Similar components were maintained separately for different content and layouts. By applying variants, editable properties, and nested components, designers could change text, images, layouts, and button styles within reusable components.
VARIANTS IN PRACTICE
RESPONSIVE DESIGN
Reducing 44 navigation variants to responsive layouts.
The original navigation used separate configurations across multiple screen widths. By combining repeated layouts into four Nav bar variants and two Nav menu variants, the refactor reduced duplication while supporting all seven original screen widths.
RESULTS
A more consistent, scalable foundation for future website updates.
By applying shared variables, text styles, and component properties, the refactor reduced duplicated components and simplified responsive layouts, making the library easier to maintain and extend as the website evolves.
The refactored library includes 11 reusable components and 73 variants. Each rectangle represents a component, sized by its number of variants.
REFLECTION
Designing for the people who maintain the system.
This project helped me think more carefully about the decisions behind a component library, including which differences need variants, which properties should remain editable, and which values belong in shared foundations. It also reinforced the importance of preserving an existing design language while improving how the system is organized and maintained.