Building a Scalable Design System
Client
Ortho Molecular Products
Role
UX / Product Designer
Duration
Ongoing
From Photoshop to Figma
Before I joined the team, interfaces were designed in Photoshop, making it difficult to maintain consistency, reuse UI, or collaborate efficiently with engineering. Each new feature often required recreating existing elements, leading to inconsistent experiences and longer development cycles.
As the sole designer, I needed a scalable way to support both current projects and future product growth. I started by auditing the existing website and identifying where inconsistencies were coming from. At the time, developers were working from Photoshop files and often had to estimate padding, spacing, and component behavior. This resulted in similar elements being implemented differently across the site.
Starting from the foundation
The company already had a brand kit with its primary and secondary colors and typography, so I used those as the foundation of the design system. From there, I expanded the brand colors into semantic tokens (such as text, background, border, success, warning, and error colors) so each color had a clear purpose rather than being selected individually for every screen.
I then established consistent rules for typography, spacing, grids, breakpoints, and responsive behavior. Once those foundations were in place, I built reusable Figma components for elements like buttons, inputs, checkboxes, labels, cards, navigation, and status indicators. Each component included the necessary variants and states, such as default, hover, active, disabled, and error.
Reusable components with atomic design
Using the Atomic Design methodology, I organized the design system into layers based on component complexity. Beginning with foundational styles and progressing through atoms, molecules, organisms, and templates, each layer builds upon the previous one to create a consistent, scalable, and maintainable user experience.
This gave designers and developers a shared source of truth. Instead of guessing measurements or rebuilding elements each time, the team could reference standardized components and specifications, creating a more consistent website and a more efficient design-to-development process.
Documentation for cross-functional teams
To make the design system approachable for both designers and engineers, I created a welcome guide that explained not only what each component was, but when and how it should be used. This helped establish a clear standard for maintaining the system, ensuring future additions remained consistent, scalable, and aligned with the design language.
The documentation includes:
System organization and Atomic Design principles
Design token and variable collections
Usage guidelines and best practices
Page templates and workflow-specific components
Impact of the design system
I transformed the team's design workflow by replacing Photoshop wireframes with a scalable Figma design system. The introduction of reusable components, design tokens, Dev Mode, and comprehensive documentation established a shared source of truth for designers and engineers, improving consistency, streamlining handoff, and creating a foundation that supports future product growth.