Figma Design System — Amped (Discogs)

A Figma-native design system built from scratch at Discogs — component architecture, design tokens, React + TypeScript component library, Storybook documentation, and a governance model — cutting design-to-development handoff time by 50%.

amped · figma → storybook → react

// objective

Build a foundational Figma design system at Discogs that closes the gap between design and engineering — component architecture, design tokens, a React + TypeScript component library, and Storybook as the shared source of truth. The goal: a system that scales without constant designer intervention, enforces WCAG accessibility by default, and gives engineers a documented, versioned reference they can build from confidently.

// solution

Figma component architecture — fully structured library with variants, auto-layout, and design tokens; same vocabulary across design + engineering.
Design tokens — scalable token system for colors, type, spacing, UI states; token change in Figma propagates cleanly to React.
React + TypeScript component library — production-grade components built from the Figma system.
Storybook documentation — single source of truth, interactive and testable in isolation.
WCAG-compliant by default — accessibility built into the primitives, not audited in after.
Governance and contribution model — versioning + contribution process so the system scales with the team.

// outcome

50% faster handoffsStorybook + Figma token parity eliminated guesswork at the design-to-engineering boundary.
Figma expert credential, in practiceComponent architecture, variants, auto-layout, tokens, shared libraries — at production scale.
cross-functional adoptionDesigners, engineers, product working from the same component source.
governance that scalesContribution model means the system grows with the team without a single bottleneck.