SOP: Building & Managing a Component Design System

1. Purpose

To define the process for creating, organizing, and maintaining a component-based design system that ensures consistency, scalability, and developer alignment across all projects.

2. Scope

  • Applies to all UI components, patterns, and tokens.
  • Covers new builds, updates, and shared libraries.
  • Used by designers, leads, and design ops.

3. Step-by-Step Process

Stage A – Setup & Foundation

  1. Define Tokens First
    • Use Visual Token Reference Sheet (Doc 4.1).
    • Lock colors, spacing, typography before components.
  2. Component Categories
    • Buttons, Inputs, Cards, Modals, Navigation, Alerts, Icons.
    • Create a folder/page structure in Figma for each.
  3. Naming Conventions
    • Apply UI Element Naming Guide (Doc 4.4).

Stage B – Building Components

  1. Start with Primitives
    • Base elements: Button, Input, Checkbox, Dropdown.
    • Add states: Default, Hover, Active, Disabled, Error.
  2. Create Variants
    • Use Figma Variants to group related states.
    • Example: Button → {Primary, Secondary, Tertiary} × {Default, Hover, Disabled}.
  3. Document Properties
    • Add resizing rules, padding, constraints.
    • Annotate usage (do’s/don’ts) in Component Documentation Template (Doc 4.6).

Stage C – Maintenance & Hygiene

  1. Weekly Library Check
    • Remove duplicates, unused frames.
    • Verify tokens are applied correctly.
  2. Component Reviews
    • Major updates → log in Component Review Log (Doc 10.8).
    • Approvals via Design Lead.
  3. Version Control
    • Use version tags (v1.0, v1.1).
    • Maintain changelog for transparency.

Stage D – Sharing & Collaboration

  1. Publish Libraries
    • Push approved components into shared libraries.
    • Designers must always use published versions, not local copies.
  2. Cross-Team Sync
    • Sync with dev → export tokens/components in JSON or Storybook.
    • Run monthly design-dev sync to review usage gaps.

4. Roles & Responsibilities

  • Designer Assigned → Build/update components as per brief.
  • Peer Designer → Review for consistency.
  • Design Lead → Approve before library publishing.
  • Dev Lead → Validate dev feasibility for advanced components.

5. Governance

  • No new components may bypass this SOP.
  • Unapproved edits to shared libraries = rollback.
  • Regular audits → report to Delivery Head.