Description
Tu producto parece cinco productos distintos, porque seis personas dibujaron seis versiones del mismo botón y nada las mantiene sincronizadas. Cada pantalla nueva vuelve a resolver problemas que la pantalla anterior ya había resuelto, así que el equipo es rápido al arranque y más lento cada mes. Entonces alguien dice que hace falta un sistema de diseño, armás una página de componentes en Figma que nadie adopta, ingeniería igual entrega su propia versión aparte, y seis meses después el sistema es un cementerio que describe un producto que ya no existe. Un sistema de diseño de verdad no es una biblioteca de componentes, es una fuente de verdad que dos equipos comparten y mantienen viva, y casi a nadie le enseñan las partes difíciles: dónde empieza (no con los componentes), cómo nombrar las cosas para que la gente las encuentre, cómo diseñar la API de un componente, cómo evitar que Figma y el código se separen, y quién tiene permiso para cambiarlo. Sin eso, un sistema se lanza, se pudre y se abandona en silencio.
Esta guía te enseña a construir un sistema de diseño que sobrevive a su propio éxito, la fuente de verdad sobre la que se apoyan un producto que crece y un equipo que crece, y a volverte la persona que es dueña de él. Trabaja un solo producto de ejemplo, Harbor, una consola de operaciones que se desparramó hacia la inconsistencia, y lo reconstruye en un sistema desde los cimientos para arriba: arrancando con tokens en lugar de componentes, nombrando las cosas para que la gente de verdad las encuentre, diseñando la API de un componente para que un botón cubra todos los casos sin excepciones, evitando que Figma y el código se separen, construyendo color, tipografía y espaciado que sobreviven a un rebranding, y horneando la accesibilidad en vez de atornillarla al final. Después las partes que nadie enseña: patrones compuestos para cuando un solo componente no alcanza, documentación que la gente de verdad usa, y gobernanza, quién puede cambiar el sistema, cómo se versiona, cómo se deprecia, y cómo lo mantenés vivo y medís si alguien lo adopta. Casi nada de teoría, y muchísimo sobre las decisiones que hacen que un sistema dure. Para el diseñador que quiere ser la palanca sobre la que una empresa escala.
Escrito para vos si
Esta guía es para: diseñadores y desarrolladores frontend que rehacen el mismo botón una y otra vez, cuyo producto parece cinco productos distintos cosidos con hilván, y a los que les dijeron que armen un sistema de diseño sin saber por dónde empezar ni cómo mantenerlo vivo después del lanzamiento.
El secreto de este libro
Los 6 pasos para ser dueño del sistema sobre el que se construye todo un producto. El método para construir un sistema de diseño que sobrevive a su lanzamiento y se convierte en la fuente de verdad que dos equipos comparten, para que todo el producto hable un solo idioma y cada pantalla nueva salga más rápido en vez de más lenta. La mayoría de los sistemas se pudre hasta quedar en una biblioteca de componentes abandonada; así es como construís uno que sigue vivo, que se adopta, y que te convierte en la palanca sobre la que escala una empresa que crece.
- Arrancá con tokens, no con componentes
- Diseñá la API del componente: una pieza, todos los casos
- Evitá que Figma y el código se separen
- Patrones para cuando un componente no alcanza
- Documentación y accesibilidad que la gente de verdad usa
- Gobernalo: quién lo cambia, cómo se mantiene vivo
Qué incluye este libro
- Capítulo 1: El producto que parecía cinco productos
- Capítulo 2: Dónde empieza en serio un sistema de diseño
- Capítulo 3: Nombrar la cosa para que la gente la encuentre
- Capítulo 4: Un botón, todos los casos, sin excepciones
- Capítulo 5: Bien en Figma, mal en el código
- Capítulo 6: Color, tipografía y espaciado que sobreviven a un rebranding
- Capítulo 7: Accesibilidad que no atornillás al final
- Capítulo 8: Cuando un componente no alcanza
- Capítulo 9: La doc que nadie leyó y la doc que todos usan
- Capítulo 10: Quién tiene permiso para cambiar el sistema
- Capítulo 11: Mantenerlo vivo después del lanzamiento
- Capítulo 12: De cinco productos de vuelta a uno
