Tokens, componentes, patrones. Cómo un sistema cuidado pone a diseño y código en el mismo idioma.
Categoría · Frontend y UI
Un lenguaje común para diseño y código.
Un design system es más que una biblioteca de componentes. Consta de tres niveles: tokens (colores, espaciados, tipografía como valores con nombre), components (botón, input, card como piezas reutilizables) y patterns (cómo combinarlos en layouts y flujos).
Lo esencial es que los mismos tokens rigen en Figma y en el código: un azul es, en todas partes, exactamente el mismo azul.
Qué aporta en operación.
En productos que evolucionamos y operamos durante años, un sistema bien mantenido es la palanca contra la deriva. Las nuevas funciones se ven como lo existente, los cambios de diseño se aplican a través de los tokens en un único lugar, y el onboarding de nuevos desarrolladores dura días en lugar de semanas.
El precio honesto.
Un design system es una inversión que solo se rentabiliza a partir de cierto tamaño y vida útil. Para un proyecto único no compensa construirlo. Y un sistema que nadie mantiene se convierte rápidamente en una colección de componentes obsoletos que confunde más de lo que ayuda.