Design system: una base común para que los cambios se hagan una sola vez
Cuando un producto o una familia de sitios crece sin un sistema, cada cambio hay que repetirlo pantalla por pantalla. Construyo sistemas de diseño en Figma, con tokens, componentes y documentación de uso, para que diseño y código hablen el mismo idioma.
Señales de que hace falta un sistema
- El mismo botón o formulario se resuelve distinto en cada pantalla.
- Un cambio de estilo hay que repetirlo en cada sitio o módulo.
- Cada sitio o funcionalidad nueva arranca casi de cero.
- Diseño y desarrollo llaman de formas distintas a las mismas piezas.
Qué incluye un design system
- Auditoría de lo que ya existe: qué se repite, qué varía y qué es común a todo.
- Tokens de diseño: la base de color, tipografía y espaciado.
- Librería de componentes en Figma, con sus estados.
- Reglas de uso y documentación para que el equipo lo aplique igual.
- Componentes nombrados igual en diseño y en código.
- Variantes por marca o institución sobre una base compartida.
- Accesibilidad considerada en cada componente, no como una etapa aparte.
Cómo construyo un sistema de diseño
- Inventariar las pantallas y los sitios existentes.
- Separar lo que es común de lo que cambia entre productos, marcas o instituciones.
- Diseñar la base: tokens y los componentes mínimos.
- Probar el sistema sobre flujos reales antes de ampliarlo.
- Documentar el uso y los nombres de cada pieza.
- Acompañar la implementación para que el código respete el sistema.
Cómo se ve en proyectos reales
En Start University, cada sitio tenía su propia versión del portal del estudiante. La respuesta fue un único portal modular, que se adapta a cada institución con cambios mínimos de CSS, y un sistema base compartido con el que se lanzaron los sitios de nuevas universidades socias.
En Deep Creek Solutions, los componentes de UI reutilizables se compartieron entre productos de salud y estética, para no rediseñar lo mismo en cada uno.
Preguntas frecuentes
¿Necesito un design system o me alcanza con una guía de estilo?
Una guía de estilo define cómo se ve la marca. Un design system suma componentes con comportamiento, reglas de uso y nombres compartidos con el código. Si tu problema es que las pantallas se resuelven distinto cada vez, hace falta lo segundo.
¿Lo armás desde cero o a partir de lo que ya tengo?
A partir de lo existente. Primero identifico qué partes se repiten y cuáles cambian entre pantallas o sitios; esa es la base del sistema.
¿Sirve para varios sitios o marcas a la vez?
Sí, es uno de los usos más claros. En Start University, un sistema base compartido permitió que cada institución mantuviera su identidad visual sobre la misma estructura.
¿Lo implementás en código?
El entregable principal es el sistema en Figma. Para llevarlo a código, la página de desarrollo web describe cómo construyo bibliotecas de componentes alineadas al design system.
¿Trabajás con un equipo que ya tiene diseñador?
Sí. Puedo armar el sistema junto al diseñador del equipo o tomar esa parte del trabajo, según cómo te convenga organizarlo.
Proyectos relacionados
Start University: portal del estudiante y sitios educativos
Diseño UX/UI de plataformas educativas: un portal del estudiante unificado y un sistema base para más de 20 sitios de universidades.
Deep Creek Solutions: productos SaaS de salud y estética
Diseño de producto para plataformas de salud como Red Sanitaria y Retia Health, un odontograma interactivo y una app para profesionales de estética.