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.
Starting from the foundation
I established the foundational design standards (typography, color, layout, and effects) to create a unified visual language across the product.
Variables to tokens
Rather than hardcoding values, I created semantic variable collections that separate brand values from implementation.
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.
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.