≡En resumen
- Un sistema de diseño reúne reglas y piezas reutilizables, en diseño y en código, para crear interfaces coherentes.
- Sus capas son los principios, los design tokens (color, tipografía, espaciado), los componentes, los patrones y la documentación.
- No es lo mismo que una guía de estilo ni que una librería de componentes: las incluye a ambas y añade reglas de uso y gobernanza.
- Los design tokens tienen desde octubre de 2025 un formato estándar estable, promovido por un grupo comunitario del W3C.
- Una pyme no necesita un sistema como el de Google: basta con un sistema ligero de tokens y componentes bien documentados.
01 ¿Qué es un sistema de diseño?
La idea se popularizó a mediados de la década de 2010, cuando las empresas empezaron a mantener decenas de pantallas, webs y apps a la vez. Una referencia clave fue el enfoque Atomic Design de Brad Frost, que propone construir interfaces desde piezas pequeñas (átomos como un botón o un campo) hasta moléculas, organismos, plantillas y páginas. Hoy es una práctica estándar en equipos de diseño de interfaz (UI) y producto.
02 Partes de un sistema de diseño
Principios
Las ideas que guían las decisiones: «claridad antes que decoración», «accesible por defecto». Sirven para resolver dudas que el sistema no cubre.
Design tokens
Las decisiones visuales guardadas como variables con nombre: color.primario, espacio.m, fuente.titulo. Se exportan a CSS, iOS o Android.
Componentes
Botones, campos, tarjetas, menús o modales, diseñados en la herramienta de diseño y programados en código con el mismo nombre y las mismas variantes.
Patrones
Combinaciones de componentes que resuelven tareas: un formulario de registro, un proceso de pago, un mensaje de error.
Documentación
Guías de uso, ejemplos de lo que sí y lo que no, notas de accesibilidad y fragmentos de código.
Gobernanza
Quién mantiene el sistema, cómo se proponen cambios, cómo se versiona y cómo se comunica a los equipos.
03 Design tokens: el lenguaje común entre diseño y código
Un design token es una decisión de diseño con nombre y valor, independiente de la plataforma. Por ejemplo, color.fondo.alerta = #B00020. Si mañana cambia el tono de rojo, se modifica el token y el cambio llega a la web, la app de iOS y la de Android sin buscar colores sueltos por el código.
| Nivel | Ejemplo | Para qué sirve |
|---|---|---|
| Primitivos o globales | azul-600 = #1A56DB | Paleta completa disponible |
| Semánticos | color.accion.principal = azul-600 | Significado de uso, facilita cambiar temas |
| De componente | boton.fondo = color.accion.principal | Ajustes finos de un componente concreto |
04 Sistema de diseño vs guía de estilo vs librería de componentes
| Concepto | Qué contiene | ¿Incluye código? |
|---|---|---|
| Manual de identidad corporativa | Logotipo, colores y tipografías de marca para todos los soportes | No |
| Guía de estilo (style guide) | Reglas visuales y de tono aplicadas al producto digital | No, o solo ejemplos |
| Librería de componentes | Piezas de interfaz reutilizables en código o en la herramienta de diseño | Sí |
| Sistema de diseño | Todo lo anterior más principios, tokens, patrones, documentación y gobernanza | Sí |
El sistema de diseño parte de la identidad de marca, así que conviene tener antes un buen manual de identidad corporativa. Su parte de código suele apoyarse en una librería de componentes propia o en un framework como Bootstrap, personalizado con los tokens de la marca.
05 Ejemplos de sistemas de diseño
Material Design (Google)
Lanzado en 2014, evolucionó a Material 3 (Material You) en 2021 y a Material 3 Expressive en 2025. Documenta tokens, componentes y guías para Android, web y Flutter.
Carbon (IBM)
Sistema de código abierto con licencia Apache 2.0. Incluye librerías de React y Web Components, estilos Sass, design tokens e iconos.
GOV.UK Design System
Mantenido por el Government Digital Service británico. Reúne estilos, componentes accesibles y patrones para tareas como introducir una dirección o crear una cuenta.
DESY (Gobierno de Aragón)
Presentado como el primer sistema de diseño en abierto de una comunidad autónoma española; su desarrollo empezó en 2020 y sigue criterios WCAG 2 AA.
06 Cómo crear un sistema de diseño paso a paso
-
1
Haz un inventario de interfaz
Captura todos los botones, formularios, colores y tipografías que usas hoy. Verás duplicados e incoherencias.
-
2
Define principios y tokens
Acuerda paleta, escala tipográfica, espaciados, radios y sombras, y guárdalos como tokens con nombres semánticos.
-
3
Construye los componentes básicos
Empieza por los 10-15 más usados (botón, campo, selector, tarjeta, alerta, modal) en diseño y en código a la vez.
-
4
Incorpora la accesibilidad desde el inicio
Contraste, foco visible, tamaños táctiles y etiquetas; revisar después sale mucho más caro.
-
5
Documenta con ejemplos
Para cada componente: cuándo usarlo, variantes, qué no hacer y código para copiar.
-
6
Establece la gobernanza
Un responsable, un canal para proponer cambios, versiones y un registro de novedades.
La accesibilidad no es opcional: la Ley Europea de Accesibilidad obliga desde junio de 2025 a muchos productos y servicios digitales a ser accesibles, y las WCAG 2.2 son la referencia técnica más actual. Un sistema de diseño es la forma más eficiente de cumplir en todas las pantallas a la vez. Los componentes deben funcionar en cualquier tamaño de pantalla, así que el diseño responsive forma parte de su definición.
07 ¿Necesita tu empresa un sistema de diseño?
- ✓Tienes más de un producto digital (web, tienda, app, área de clientes) y quieres que parezcan de la misma marca.
- ✓Varios diseñadores o desarrolladores tocan las mismas interfaces.
- ✓Cada nueva página tarda en maquetarse porque se rehacen piezas que ya existían.
- ✓Has detectado incoherencias: cinco tonos de azul, botones distintos, formularios que se comportan diferente.
- ✓Vas a rediseñar y quieres que el resultado se mantenga ordenado en el tiempo.
Si marcas dos o más, te compensa un sistema ligero. En nuestros proyectos de diseño de interfaces web UI y UX dejamos definidos tokens y componentes para que tu equipo o el nuestro puedan crecer sin romper la coherencia, y en cada proyecto de diseño web a medida los trasladamos a código.
Preguntas frecuentes sobre Sistema de diseño
Es el conjunto de reglas, design tokens, componentes reutilizables y documentación que usa un equipo para diseñar y programar interfaces coherentes.
La guía de estilo define reglas visuales; el sistema de diseño las incluye y añade componentes en código, patrones, documentación de uso y un modelo de gobernanza.
Son decisiones de diseño guardadas como variables con nombre, como un color, un tamaño de letra o un espaciado, que se exportan a cualquier plataforma. Desde octubre de 2025 tienen un formato estándar estable del W3C Design Tokens Community Group.
Material Design de Google, Carbon de IBM y el GOV.UK Design System del Gobierno británico. En España destaca DESY, del Gobierno de Aragón.
Una herramienta de diseño como Figma o Penpot para los componentes visuales, código (React, Web Components o CSS) para la implementación y un sitio de documentación para las guías de uso.
Un sistema ligero con tokens y los componentes básicos puede estar en semanas; uno completo es un producto vivo que se mantiene de forma continua.
Sí. Si los componentes se crean accesibles una vez, todas las pantallas que los usan heredan el contraste, el foco y las etiquetas correctas.
Fuentes consultadas
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.