Case study
React component libraries adopted by 90 product squads
Translated Figma design systems into production-grade React component libraries, adopted across 90 product squads, while mentoring 12 mid-level engineers on TypeScript, accessibility and Core Web Vitals.
- Company
- Publicis Global Delivery (PGD) · Publicis Sapient
- Period
- Nov 2023 – Present
- My role
- Design-system engineer & mentor
Client work: the client isn’t named and there are no screenshots, so the architecture is described in words.
The problem
Figma design systems had to become production-grade React components that many product squads could adopt.
Approach and architecture
Partnered with design and product teams; design tokens as the single source of truth, accessible primitives first, and accessibility and performance acceptance criteria for every component.
Architecture
- Design tokens as the single source of truth, exported from Figma and consumed by CSS and TypeScript.
- Accessible primitives first (WCAG 2.2), composed into product-specific components by each squad.
Key decisions and trade-offs
- Kept the library headless where possible so squads could theme without forking.
- Paired every component with accessibility and performance acceptance criteria before release.
Outcome
Adopted across 90 product squads; 12 mid-level engineers mentored along the way.
Key facts
- 90 product squads adopting
- 12 engineers mentored
Restated from the resume, with no estimates.
My role
Design-system engineer & mentor
Stack
- React
- TypeScript
- Figma
- Design tokens
- Storybook
- Tailwind CSS