Saltar al contenido

Caso de estudio

Librerías de componentes React adoptadas por 90 equipos de producto

Convertí sistemas de diseño de Figma en librerías de componentes React listas para producción, adoptadas por 90 equipos de producto, mientras era mentor de 12 ingenieros de nivel medio en TypeScript, accesibilidad y Core Web Vitals.

Empresa
Publicis Global Delivery (PGD) · Publicis Sapient
Periodo
nov 2023 – actualidad
Mi rol
Ingeniero de sistema de diseño y mentor

Trabajo para un cliente: no se menciona su nombre ni hay capturas de pantalla, así que la arquitectura se describe con palabras.

El problema

Los sistemas de diseño de Figma debían convertirse en componentes React listos para producción que muchos equipos de producto pudieran adoptar.

Enfoque y arquitectura

Trabajo conjunto con diseño y producto: design tokens como única fuente de verdad, primitivas accesibles primero y criterios de aceptación de accesibilidad y rendimiento para cada componente.

Arquitectura

  • Design tokens como única fuente de verdad, exportados desde Figma y consumidos por CSS y TypeScript.
  • Primitivas accesibles primero (WCAG 2.2), que cada equipo compone en componentes propios de su producto.

Decisiones clave y sus compromisos

  • Librería headless donde fue posible para que los equipos pudieran adaptar el tema sin hacer un fork.
  • Cada componente con criterios de aceptación de accesibilidad y rendimiento antes de publicarse.

Resultado

Adoptadas por 90 equipos de producto; 12 ingenieros de nivel medio acompañados como mentor en el proceso.

Datos clave

  • 90 equipos de producto la adoptaron
  • 12 ingenieros acompañados como mentor

Tomados del CV, sin estimaciones.

Mi rol

Ingeniero de sistema de diseño y mentor

Stack

  • React
  • TypeScript
  • Figma
  • Design tokens
  • Storybook
  • Tailwind CSS