Sistemas de Diseño

¿Qué es un sistema de diseño?

Imagina que tienes un equipo de 5 diseñadores trabajando en el mismo producto. Cada uno diseña los botones de manera diferente — uno hace las esquinas redondeadas y otro cuadradas, uno usa sombra y otro no, cada uno elige una tonalidad diferente de azul. ¿El resultado? Un producto que parece 5 aplicaciones diferentes.

Un sistema de diseño es la única fuente de verdad que resuelve este problema. Es un conjunto de reglas, componentes y estándares que garantizan que todos en el equipo diseñen y construyan de la misma manera.

Sistema de diseño = Componentes reutilizables + Reglas de uso + Documentación

Sistemas de diseño populares

• Material Design (Google): El sistema de diseño más famoso — utilizado en todos los productos de Google
• Human Interface Guidelines (Apple): Los estándares de diseño de Apple para iOS y macOS
• Carbon (IBM): Un sistema de diseño de código abierto
• Ant Design: Un sistema de diseño muy popular en aplicaciones empresariales
• Atlassian Design System: El sistema detrás de Jira, Confluence y Trello
• Chakra UI / shadcn/ui: Sistemas populares en el mundo de React

¿Por qué necesitas un sistema de diseño?

1. Consistencia (Consistency)

Cada botón, cada tarjeta, cada formulario del producto se ve y se comporta de la misma manera. El usuario no necesita aprender nuevos patrones en cada página.

2. Velocidad (Speed)

En lugar de diseñar cada componente desde cero, utilizas componentes listos y probados. Un diseño que antes tomaba una semana puede terminarse en un día.

3. Calidad (Quality)

Los componentes del sistema de diseño están probados y revisados. Tienen accesibilidad incorporada, diferentes estados (hover, focus, disabled) y cumplen con los estándares de rendimiento.

4. Escalabilidad (Scalability)

Cuando el producto crece y se unen nuevos diseñadores y desarrolladores, el sistema de diseño los hace productivos desde el primer día sin un largo período de formación.

5. Comunicación entre diseñadores y desarrolladores

Componentes con los mismos nombres y propiedades tanto en el diseño como en el código. El diseñador dice "usa Button/Primary/Large" y el desarrollador entiende exactamente qué significa.

Los tokens de diseño (Design Tokens)

Los tokens son los átomos sobre los que se construye el sistema de diseño. Son valores nombrados que expresan propiedades visuales.

Tipos de tokens

1. Tokens globales/primitivos (Global/Primitive Tokens)

Los valores fundamentales sobre los que todo está construido:

• Colores: blue-500: #3B82F6, gray-100: #F3F4F6
• Fuentes: font-sans: "Inter", font-size-base: 16px
• Espaciados: space-4: 16px, space-8: 32px
• Radios: radius-sm: 4px, radius-lg: 12px
• Sombras: shadow-sm: 0 1px 2px rgba(0,0,0,0.05)

2. Tokens semánticos/alias (Semantic/Alias Tokens)

Valores con nombres funcionales que hacen referencia a los tokens globales:

• color-primary: {blue-500} — el color principal
• color-error: {red-500} — color de errores
• color-text-primary: {gray-900} — color del texto principal
• color-background: {white} — color de fondo
• font-size-heading: {font-size-xl} — tamaño de los títulos

3. Tokens de componentes (Component Tokens)

Valores específicos de un componente particular:

• button-padding-x: {space-6} — espaciado horizontal dentro del botón
• button-border-radius: {radius-lg} — radio de las esquinas del botón
• card-shadow: {shadow-md} — sombra de la tarjeta

¿Por qué son importantes los tokens?

Cuando necesitas cambiar el color principal de todo el producto, cambias el valor de un solo token en lugar de cambiar 500 lugares diferentes. Y cuando necesitas implementar Dark Mode, solo cambias los valores de los tokens semánticos.

Tokens en Figma

Figma tiene un sistema de Variables que realiza la misma función que los tokens:

1. Crea una nueva Collection (por ejemplo, "Colors")
2. Añade variables con nombres funcionales (primary, background, text)
3. Define diferentes valores para cada Mode (Light, Dark)
4. Usa las variables en tu diseño en lugar de valores directos

Los componentes (Components)

Los componentes son los bloques de construcción del sistema de diseño. Cada elemento visual reutilizable es un componente.

Clasificación de componentes

1. Átomos (Atoms)

Los elementos más pequeños que no pueden dividirse más:

• Botón (Button)
• Campo de entrada (Input)
• Icono (Icon)
• Etiqueta (Label/Tag)
• Indicador de carga (Spinner)

2. Moléculas (Molecules)

Componentes construidos a partir de dos o más átomos:

• Campo de entrada + etiqueta + mensaje de error = Form Field
• Icono + texto + flecha = Menu Item
• Imagen + nombre + descripción = Avatar + Name

3. Organismos (Organisms)

Componentes más grandes construidos a partir de moléculas:

• Barra de navegación (Navbar)
• Tarjeta de producto (Product Card)
• Formulario de inicio de sesión (Login Form)
• Tabla de datos (Data Table)

4. Plantillas (Templates)

Diseños de páginas completas construidos a partir de organismos:

• Página de inicio (Home Page)
• Página de configuración (Settings Page)
• Panel de control (Dashboard)

Construir un componente en Figma

Construyamos un componente de botón completo:

Paso 1: Estados (States)

Cada botón necesita estos estados como Variants:

• Default: el estado normal
• Hover: cuando el ratón está sobre él
• Pressed/Active: cuando se hace clic en él
• Focused: cuando se navega a él con el teclado
• Disabled: cuando no está disponible
• Loading: cuando está cargando

Paso 2: Tipos (Types)

• Primary: color principal — para acciones principales
• Secondary: color neutro — para acciones secundarias
• Outline/Ghost: sin fondo — para acciones menos importantes
• Danger/Destructive: rojo — para acciones peligrosas (eliminar)

Paso 3: Tamaños (Sizes)

• Small: altura 32px — para espacios reducidos
• Medium: altura 40px — el tamaño predeterminado
• Large: altura 48px — para acciones importantes

Paso 4: Contenido flexible

• Solo texto
• Icono + texto
• Texto + icono
• Solo icono

Component Properties en Figma

En lugar de crear una Variant para cada combinación posible (que puede llegar a cientos), usa Component Properties:

• Boolean Property: mostrar/ocultar un elemento (por ejemplo: mostrar icono)
• Instance Swap: cambiar un icono por otro
• Text Property: cambiar el texto sin desconectar el componente

La documentación (Documentation)

Un sistema de diseño sin documentación es solo una biblioteca de componentes. La documentación es lo que lo convierte en un sistema real.

¿Qué debe documentarse?

Para cada componente:

• Descripción: qué es el componente y cuándo se usa
• Tipos y estados: todos los Variants y estados disponibles
• Directrices de uso: cuándo usarlo y cuándo no
• Do's and Don'ts: ejemplos correctos e incorrectos
• Accesibilidad: estándares de acceso — colores, contraste, navegación por teclado
• Ejemplos en vivo: ejemplos interactivos de la aplicación real

Herramientas de documentación

• Storybook: el más común — documenta los componentes de código de forma interactiva
• Zeroheight: conecta Figma y el código
• Sitio web dedicado: algunas empresas construyen su propio sitio de documentación
• El propio Figma: páginas de documentación dentro del archivo de Figma

Construir un sistema de diseño desde cero

Fase 1: Auditoría (Audit)

Antes de construir cualquier cosa, estudia el estado actual:

1. Toma capturas de pantalla de cada pantalla del producto
2. Reúne todos los botones en un mismo lugar — encontrarás 10 estilos de botón diferentes
3. Reúne todos los colores — encontrarás 20 tonos de gris en lugar de 5
4. Reúne todos los tamaños de fuente — encontrarás un caos

Esta auditoría revela la magnitud del problema y define las prioridades de construcción.

Fase 2: Fundamentos (Foundations)

Empieza con los tokens:

1. Paleta de colores: color principal + secundario + neutro + colores semánticos (éxito/error/advertencia/información)
2. Escala tipográfica: tamaño, peso, altura de línea para cada nivel
3. Escala de espaciado: sistema de 8 puntos
4. Radios y sombras: valores unificados
5. Breakpoints: cuándo cambia el layout

Fase 3: Componentes principales

Empieza con los componentes que cada página necesita:

1. Button (con todos sus tipos y tamaños)
2. Input / Text Field
3. Select / Dropdown
4. Checkbox & Radio
5. Toggle / Switch
6. Card
7. Avatar
8. Badge / Tag
9. Modal / Dialog
10. Toast / Notification

Fase 4: Componentes compuestos

Después de los componentes principales:

• Navbar / Header
• Sidebar
• Table
• Form layouts
• Page templates

Fase 5: Documentación y publicación

1. Documenta cada componente
2. Publica la biblioteca en Figma (Team Library)
3. Asegúrate de que el código esté sincronizado con el diseño
4. Forma al equipo sobre el uso del sistema

Mantenimiento del sistema de diseño

Un sistema de diseño no es un proyecto que termina — es un organismo vivo que requiere mantenimiento continuo.

Gobernanza (Governance)

• ¿Quién toma las decisiones de diseño? Define un equipo o persona responsable
• ¿Cómo se añaden nuevos componentes? Un proceso claro — propuesta → revisión → construcción → documentación → publicación
• ¿Cómo se reportan los problemas? Un canal claro de retroalimentación
• ¿Con qué frecuencia se actualiza el sistema? Un calendario de actualización regular (semanal o mensual)

Versionado (Versioning)

• Usa Semantic Versioning: Major.Minor.Patch
• Major (1.0 → 2.0): cambios importantes que pueden romper la compatibilidad
• Minor (1.0 → 1.1): nuevos componentes o mejoras
• Patch (1.0.0 → 1.0.1): corrección de errores

Medir el éxito

¿Cómo sabes si el sistema de diseño es exitoso?

• Tasa de adopción: cuántos diseñadores y desarrolladores lo están usando realmente
• Velocidad de diseño: ¿el diseño se ha vuelto más rápido?
• Consistencia del producto: ¿las pantallas se ven más consistentes?
• Satisfacción del equipo: ¿diseñadores y desarrolladores están contentos con el sistema?

Errores comunes en los sistemas de diseño

1. Construir antes de que sea necesario

No construyas un sistema de diseño completo desde el primer día. Empieza pequeño y crece según sea necesario. Un sistema pequeño que se usa es mejor que un sistema grande que se ignora.

2. No involucrar a los desarrolladores

Un sistema de diseño no es solo para diseñadores. Los desarrolladores son socios esenciales — deben ser parte de las decisiones desde el principio.

3. Complejidad excesiva

Un componente con 50 Variants no puede usarse correctamente. La simplicidad es más importante que la exhaustividad.

4. Ignorarlo después del lanzamiento

Un sistema de diseño que no se actualiza muere. Dedica tiempo semanal al mantenimiento y las actualizaciones.

5. Sin documentación

Un componente sin documentación se usará incorrectamente o no se usará en absoluto.

Ejercicio práctico

Construye un Mini Design System para una aplicación de gestión de tareas:

1. Fundamentos: define una paleta de colores (3 colores + colores funcionales), escala tipográfica (5 tamaños) y escala de espaciado
2. Construye 5 componentes: Button, Input, Card, Badge, Avatar — cada uno con sus tipos y estados
3. Crea Variables en Figma para todos los tokens
4. Construye una página usando solo los componentes — una lista de tareas simple
5. Documenta un componente completamente — Do's and Don'ts + directrices de uso
6. Crea Dark Mode cambiando solo las Variables

Este ejercicio te hará entender que construir un sistema de diseño no es fácil — pero cuando funciona correctamente, cambia la forma en que trabaja todo el equipo.