7 · Sistemas de diseño — T1 Usabilidade e Accesibilidade

1¿Qué es un sistema de diseño?

Un Sistema de Diseño es un conjunto completo de estándares, principios, guías de estilo, tokens de diseño y componentes de software reutilizables que actúa como única fuente de verdad organizacional (se cita como referencia la guía corporativa de la Xunta de Galicia).

Design Tokens

Variables atómicas: colores hex, tamaños de fuente, espaciados en px/rem.

Guía de estilo

Documentación sobre identidad de marca, tipografía y logotipo.

Pattern Library

Soluciones para problemas recurrentes (formularios, cabeceras).

Component Library

Componentes programados listos para producción.

2Ejemplos del mercado

Sistema	Empresa	Enfoque
Material Design 3	Google	Personalización dinámica y accesibilidad.
Human Interface Guidelines	Apple	Claridad y respeto al contenido.
Fluent Design System	Microsoft	Luz, profundidad y movimiento.
Carbon Design System	IBM	Open-source, altamente accesible.

3Frameworks de UI modernos

Tailwind CSS Bootstrap Shadcn UI Material UI Flutter Jetpack Compose SwiftUI

✓Para saber si lo has entendido

Sé definir qué es un Sistema de Diseño y por qué es la fuente única de verdad.
Conozco los cuatro componentes de un sistema de diseño.
Sé qué son los Design Tokens y doy un ejemplo.
Distingo Pattern Library de Component Library.
Puedo nombrar al menos 3 sistemas de diseño del mercado y su enfoque diferencial.
Conozco al menos 3 frameworks de UI modernos.

← Anterior6 · Accesibilidad A11Y Siguiente →8 · Mensajes y errores

Adaptado de 7. Guías de estilo, sistemas de diseño y frameworks.