Project Overview

As a product design contractor at a growing SaaS company, I inherited an outdated, overly complex Figma library that lacked scalability, structure, and alignment with the codebase. There was no governance model, no design tokens, and almost no usable documentation. Despite multiple designers contributing, the system was fragile, inconsistently used, and ultimately slowed product delivery. I led the initiative to transform the design system into a scalable, token-driven, and documented source of truth, establishing shared ownership between design and engineering, introducing Atomic Design principles, and implementing governance processes that brought consistency and efficiency to product development.

Role & Responsibilities

Lead Product Designer (Contract)

Scope

System strategy, audit, architecture, documentation, team process, governance

• Audited the entire design system for structure, usability, and scalability.
• Led the design and documentation of a modular system using Atomic Design methodology.
• Audited the entire design system for structure, usability, and scalability.
• Introduced governance workflows, critique rituals, and branching guidelines to support sustainable evolution.
• Created a centralized documentation hub and contribution model for cross-functional teams.
• Partnered with engineering to align Figma with front-end architecture and initiate a coded component library.

The Challenge

The original design system:

• Contained 100+ undocumented or fragile components
• Had no design tokens or cascading logic, making consistency difficult
• Was not aligned with engineering; Figma and front-end libraries drifted apart
• Grew unstable as more designers began using and modifying it
• Created confusion due to outdated variants, unclear naming, and one-off solutions

Approach

1. Foundational Audit & Analysis

• Categorized components by usage, inconsistency, and repair criticality.
• Collaborated with a front-end engineer to prioritize high-impact components.
• Identified pain points in current structure: no reuse logic, over-stacked properties, detachment culture.

2. Applied Atomic Design for Scalable Architecture

• Restructured the system across five levels: sub-atoms, atoms, molecules, organisms, templates.
• Created reusable patterns with clear logic and naming conventions.
• Introduced slot components to balance flexibility with consistency.

3. Token-Driven Consistency

• Proposed and documented a token system for color, spacing, and typography.
• Enabled cascading logic for global changes, improving system resilience.
• Reduced component complexity by 78% while maintaining flexibility.

4. Documentation & System of Record

• Figma remained the source of truth; I created an internal Wiki to centralize usage, constraints, and contribution rules.
• Each component documented with: Use cases, Detachable vs. fixed parts, Common pitfalls and workarounds.

4. Governance & Cross-Functional Collaboration

• Launched weekly design critique rituals focused on system health
• Created branching guidelines for clean merges and structured contribution.
• Advocated for and helped define a dedicated engineering role for coded component maintenance.

Reflection

This project reinforced that a design system is not a file—it's an ecosystem. The real value comes not from perfectly built components, but from shared standards, intentional structure, and consistent collaboration.

Why design system faills?

Design systems fail when they're treated as static assets. This one succeeded because we built in rituals, roles, and structure to keep it evolving with the product.