¿Cómo construyes un sistema de diseño?

Respuesta directa

Qué debe cubrir una buena respuesta

Cómo funciona

Un sistema de diseño se construye a partir de lo que el producto repite, no de una lista de deseos. Empieza por los fundamentos, tokens de color, tipografía, espaciado y movimiento, definidos con contraste accesible y escala incorporados, y compartidos entre herramientas de diseño y código para que un cambio de token fluya a ambos. Los componentes se añaden cuando un patrón aparece en tres sitios, diseñados con todos los estados, comportamiento responsivo y guías de contenido documentados, y construidos una vez en código con el fichero de diseño como espejo. La propiedad es compartida entre diseño e ingeniería con un proceso de contribución, los cambios se versionan con notas de migración, y se miden adopción y tasas de defectos para que el sistema demuestre su valor en lugar de asumirlo.

Ejemplo

Un equipo auditó el producto y encontró once variantes de botón y cuatro escalas de espaciado; la primera versión del sistema definió tokens, un botón con todos los estados y campos de formulario, publicados como biblioteca de Figma y paquete React con los mismos nombres. Una guía de contribución permitió a los equipos de producto proponer componentes, la adopción se midió contando componentes del sistema frente a personalizados por pantalla, y en dos trimestres la proporción pasó del 30 al 80 por ciento mientras los defectos de interfaz por release se redujeron a la mitad.

Errores frecuentes

• Construir cincuenta componentes antes de que algún equipo de producto los necesite.
• Dejar que el fichero de diseño y el código diverjan hasta que no se confía en ninguno.
• Publicar el sistema sin vía de contribución, de modo que los equipos lo bifurcan.

Una estructura útil para responder

Responde desde tu propia experiencia.

No memorices un guion: usa solo ejemplos que puedas explicar con honestidad en preguntas posteriores.