B2B: Sistema de Diseño de Syndigo - Biblioteca de Componentes Unificada y Pipeline de Diseño a Código
Sobre el proyecto
Resumen del proyecto
- Rol: Senior Manager, UX Design en Syndigo — de nov. 2023 hasta la actualidad (más de 10 años de experiencia en UX)
- Solución: Un único sistema de diseño consolidado y conectado con el código que abarca todo el conjunto de productos de Syndigo …. reemplazando bibliotecas de componentes fragmentadas y duplicadas por una única fuente de verdad gobernada, conectada directamente a Storybook, GitHub y las herramientas de prototipado con IA de la empresa.
- Objetivo: Dar a los diseñadores, ingenieros de front-end y product managers un único sistema consistente sobre el que construir, eliminando la deriva, cerrando la brecha entre diseño y código, y permitiendo que toda la organización avance más rápido sin sacrificar consistencia ni accesibilidad. Me incorporé a Syndigo … una plataforma B2B de datos de producto que abarca productos de MDM, PXM y sindicación … como Senior Manager de UX Design. Mi responsabilidad era triple:
Liderar el diseño de producto de principio a fin en los productos clave, incluyendo la plataforma Nutrition Analysis y el Syndication Tracker , mientras supervisaba al diseñador que trabajaba conmigo en ellos.
Hacerme cargo de un sistema de diseño fragmentado y sin gobierno y reconstruirlo en una única fuente de verdad consistente y conectada con el código.
Gestionar y hacer crecer un equipo de más de 8 diseñadores de producto, reportando al VP of Design y colaborando con el Director of Design y la ingeniería de front-end.
Proceso de diseño
Abordé la reconstrucción en etapas claras, cada una fundamentada en la auditoría.
- Auditoría: inventarié cada componente en todos los productos, cotejé Figma contra producción y marqué cada duplicado e inconsistencia.
- Consolidación: reduje cada conjunto de duplicados a un único componente canónico, documenté cada uno con su anatomía, variantes e historial de versiones, e introduje un flujo de trabajo claro — ideación, en progreso, completado — con tickets adjuntos a los frames de diseño.
- Code Connect y Storybook: para los más de 70 componentes, escribí los archivos de Code Connect y de código de componente, y configuré Storybook para mostrar el diseño y la forma programada en vivo lado a lado.
- Integración con GitHub: sin representante de UX en el repositorio, ingeniería me concedió acceso y commiteé los archivos de componentes y de Code Connect directamente en GitHub, cerrando el ciclo de diseño a código.
- Prototipado con IA: fui el primero en la empresa en usar Figma MCP para convertir diseños en prototipos programados y clicables para probar antes del desarrollo, y luego restringí Lovable y Claude Design a los componentes del sistema para que los equipos solo pudieran generar trabajo dentro del sistema.
- Accesibilidad: construí y verifiqué cada componente para cumplir con los estándares WCAG AAA.
Accesibilidad
El sistema se construyó para cumplir con los estándares WCAG AAA. Los componentes se diseñaron para lectores de pantalla — con estructura semántica, roles ARIA y etiquetas claras — y se probaron directamente con software lector de pantalla. El color se gestionó para múltiples formas de daltonismo, de modo que ninguna información dependiera nunca solo del color. La conformidad se verificó con herramientas automatizadas de accesibilidad y se recogió en directrices escritas, para que cada equipo pudiera construir y contribuir al sistema de forma accesible.
Métricas de impacto
Más de 70 componentes consolidados en una única fuente de verdad conectada con el código.
El primer pipeline de diseño a ingeniería de Syndigo, validando diseños con prototipos programados antes de construir.
Prototipado dentro del sistema adoptado en toda la empresa por los equipos de producto y diseño mediante Lovable y Claude Design.
Menor tiempo de ciclo de diseño a desarrollo gracias a componentes consistentes y conectados con el código.
Contexto y planteamiento del problema
El sistema de diseño no tenía estructura y apenas gobierno. El mismo componente solía existir en varias versiones inconsistentes entre productos, y nada conectaba el diseño con el código lanzado: sin Storybook, sin componentes conectados con el código y sin presencia de UX en GitHub.
El resultado era deriva. Diseñadores, ingenieros y product managers interpretaban el sistema de forma distinta, ralentizando la entrega y obligando a los ingenieros a reconstruir la UI a partir de especificaciones inconsistentes.
Análisis de stakeholders
- Ingenieros de front-end: necesitaban componentes que coincidieran con la intención del diseño y se integraran directamente en producción, en lugar de reconstruirlos a partir de especificaciones inconsistentes.
- Diseñadores de producto: mi equipo necesitaba un único kit de componentes gobernado para poder centrarse en resolver problemas en lugar de recrear la UI.
- Product managers: necesitaban prototipar y probar ideas rápidamente sin alejarse del producto real.
Auditoría del sistema
Antes de cambiar nada, audité cómo se usaba realmente el sistema, para que la reconstrucción se fundamentara en evidencia.
- Inventario de componentes: catalogué cada componente en uso e identifiqué los duplicados.
- Mapeo de Figma a producción: comparé las bibliotecas de diseño con la UI lanzada para localizar la deriva.
- Entrevistas con el equipo: hablé con diseñadores e ingenieros sobre dónde ayudaba el sistema y dónde lo esquivaban.
- Plugin UI Relay: construí un plugin propio de Figma para operar el sistema — mapeando componentes al código, rastreando la cobertura y la salud del código, generando y sincronizando el código de los componentes, gestionando tokens y plantillas, y marcando las brechas a corregir — convirtiendo el gobierno y el diseño a código en un flujo de trabajo continuo en lugar de una limpieza puntual.
Retos y soluciones
El reto principal era el eslabón perdido entre diseño y código. Sin presencia de UX en el repositorio, conseguí acceso a GitHub y me hice cargo yo mismo de los archivos de Code Connect y de componentes, para que las decisiones de diseño llegaran a producción con fidelidad en lugar de ser reinterpretadas.
La fragmentación era el segundo. En lugar de vigilar la consistencia a mano, consolidé los duplicados en componentes canónicos y construí el plugin UI Relay para evitar que el sistema volviera a derivar.
La adopción era el tercero. Al conectar el sistema con las herramientas que los equipos ya querían — prototipos programados, Lovable y Claude Design — hice que construir dentro del sistema fuera el camino de menor resistencia.
