Glosario de Design Systems

Este glosario reúne los términos que aparecen una y otra vez al trabajar con design systems. Cada definición es breve y práctica; cuando el término lo merece, enlazamos a artículos donde lo desarrollamos en profundidad.

# Fundamentos

# Design system

Conjunto de estándares, componentes reutilizables, design tokens y documentación que alinea a diseño y desarrollo para construir productos digitales coherentes y a mayor velocidad. No es solo una biblioteca de UI: incluye principios, procesos y gobernanza. Lo explicamos en detalle en ¿Qué es un design system?.

# Single source of truth (fuente única de la verdad)

Principio por el cual toda decisión de diseño (colores, tipografías, componentes, patrones) vive en un único lugar de referencia, del que beben tanto los archivos de diseño como el código. Evita duplicidades y versiones contradictorias.

# Guía de estilo (style guide)

Documento que define la identidad visual: color, tipografía, iconografía, tono de voz. Es una parte del design system, no su sinónimo: la guía de estilo describe, el design system además implementa.

# Biblioteca de componentes (component library)

Colección de componentes de interfaz implementados (en Figma, en código, o ambos) listos para reutilizarse: botones, formularios, tarjetas, modales. Es la parte más visible de un design system.

# Pattern library (biblioteca de patrones)

Catálogo de soluciones de interacción recurrentes compuestas por varios componentes: un flujo de registro, una tabla con filtros, un formulario de pago. Los patrones documentan cómo combinar componentes para resolver problemas concretos.

# Atomic design

Metodología creada por Brad Frost que organiza la interfaz en cinco niveles: átomos, moléculas, organismos, plantillas y páginas. Ayuda a razonar sobre la composición y jerarquía de los componentes.

# Design tokens y theming

# Design token

La unidad mínima de decisión de diseño expresada como dato: un color, un espaciado, una tipografía o una sombra con nombre propio (color-primary, spacing-md). Los tokens permiten propagar cambios de diseño a todas las plataformas desde un único origen.

# Tokens primitivos, semánticos y de componente

Los tres niveles habituales de una arquitectura de tokens: los primitivos definen valores brutos (blue-500), los semánticos les dan significado de uso (color-action-primary) y los de componente los aplican a piezas concretas (button-background).

# Theming

Capacidad de un design system para servir varias apariencias (tema claro/oscuro, varias marcas) cambiando los valores de los tokens sin tocar los componentes.

# Multi-brand

Design system que da servicio a varias marcas comerciales desde una única base de componentes, normalmente mediante capas de tokens por marca.

# DTCG (Design Tokens Community Group)

Grupo del W3C que define el formato estándar de intercambio de design tokens, para que herramientas como Figma, Tokens Studio o Style Dictionary hablen el mismo idioma.

# Componentes

# Componente

Pieza de interfaz reutilizable, autocontenida y documentada, con una API definida (propiedades, variantes, estados). Existe en diseño (componente de Figma) y en código (componente de React, Vue, web component…).

# Variante

Cada una de las versiones predefinidas de un componente: tamaño (small/medium/large), jerarquía (primario/secundario), estado (activo, deshabilitado, error).

# Prop (propiedad)

Parámetro que configura un componente desde fuera: el texto de un botón, si muestra icono, su variante. Definir bien las props es diseñar la API del componente.

# Slot

Zona de un componente pensada para recibir contenido arbitrario (texto, iconos, otros componentes). Da flexibilidad sin multiplicar variantes.

# Estados

Las respuestas visuales de un componente a la interacción o al contexto: hover, focus, activo, deshabilitado, cargando, error. Un componente sin estados documentados está incompleto.

# Organización y gobernanza

# Gobernanza (governance)

Conjunto de reglas y procesos que definen cómo evoluciona el sistema: quién aprueba cambios, cómo se proponen componentes nuevos, cómo se comunican las versiones. Sin gobernanza, el sistema degenera en inconsistencia.

# Modelo de contribución

Proceso documentado para que los equipos consumidores propongan mejoras o componentes nuevos al sistema. Los modelos habituales son el centralizado (un equipo dedicado decide), el federado (representantes de varios equipos) y el híbrido.

# Adopción

Grado en que los equipos de producto usan realmente el design system. Es la métrica de éxito más importante: un sistema perfecto sin adopción es un fracaso.

# Versionado semántico (semver)

Convención de numeración de versiones (MAYOR.MENOR.PARCHE) que comunica el impacto de cada cambio: rupturista, funcionalidad nueva o corrección. Imprescindible para que los consumidores actualicen con confianza.

# Deprecación

Proceso ordenado de retirada de un componente o token: se marca como obsoleto, se comunica la alternativa y se da un plazo antes de eliminarlo.

# UI audit (auditoría de interfaz)

Inventario de todas las variantes de interfaz existentes en un producto (¿cuántos azules? ¿cuántos botones distintos?). Suele ser el primer paso antes de construir un design system, como contamos en la guía para crear un design system.

# Herramientas y flujo de trabajo

# Storybook

Entorno de desarrollo que permite construir, documentar y probar componentes de forma aislada. Es el estándar de facto para la parte de código de un design system.

# Design tokens pipeline

Flujo automatizado que transforma los tokens desde su origen (Figma, JSON) a los formatos de cada plataforma (CSS, iOS, Android) con herramientas como Style Dictionary.

# Handoff (entrega diseño-desarrollo)

Proceso de traspaso de un diseño a implementación. Un design system maduro reduce el handoff al mínimo: la mayoría de decisiones ya están resueltas por componentes y tokens compartidos.

# Testing de regresión visual

Comparación automática de capturas de componentes entre versiones para detectar cambios visuales no intencionados (con herramientas como Chromatic).

# Documentación viva

Documentación generada desde el propio código o diseño (ejemplos interactivos, props extraídas automáticamente), que no puede quedarse obsoleta porque se construye con cada versión.

¿Quieres ver estos conceptos aplicados? Explora nuestra colección de más de 100 design systems o consulta los recursos recomendados para profundizar.