title: “Principios de Diseño para Ingenieros de Software: La Guía Completa” description: “Domina los fundamentos del diseño visual para construir mejores interfaces. Psicología Gestalt, tipografía, teoría del color, sistemas de espaciado, principios de animación y lecciones de leyendas del diseño como Dieter Rams. Incluye estudios de caso de 16 productos excepcionales.” date: 2026-01-14 updated: 2026-01-17T13:30:00 author: Blake Crosley category: Design & Development tags: [Design, UI, UX, Typography, Color Theory, Gestalt, Animation, CSS, SwiftUI] url_slugs: - design-principles-software-engineers-complete-guide-2026 - visual-design-fundamentals-developers

Principios de Diseño para Ingenieros de Software: La Guía Completa

Actualizado el 17 de enero de 2026

Actualización de enero 2026: Esta guía consolida principios de diseño atemporales con patrones de implementación modernos para desarrollo web e iOS. Cubre psicología Gestalt, sistemas tipográficos, teoría del color, jerarquía visual, espaciado y animación—además de lecciones de Dieter Rams. Consulta Estudios de Diseño para análisis profundos de 16 productos excepcionales.

He pasado años estudiando diseño mientras construía software, absorbiendo principios de leyendas como Dieter Rams y diseccionando interfaces de productos como Linear, Stripe y Raycast. Esta guía destila ese conocimiento en la referencia completa que desearía haber tenido cuando empecé a preocuparme por cómo se veía y se sentía mi software.

El diseño no es decoración. Es comunicación. Cada píxel comunica función, jerarquía y significado. La diferencia entre software que se siente amateur y software que se siente profesional es entender estos principios y aplicarlos consistentemente.

Esta guía asume que ya sabes escribir código. Te enseña a ver—a entender por qué algunas interfaces se sienten sin esfuerzo mientras otras se sienten caóticas, y más importante, cómo construir las primeras.

Tabla de Contenidos

Parte 1: Fundamentos

1. Psicología Gestalt
2. Tipografía
3. Teoría del Color
4. Jerarquía Visual
5. Espaciado y Ritmo
6. Principios de Animación

Parte 2: Filosofía de Diseño

1. Dieter Rams: Diez Principios

Parte 3: Implementación

1. Patrones Web 2025
2. Sistema de Design Tokens
3. Modo Oscuro Bien Hecho
4. Flujos de Extracción de Figma

Parte 4: Referencia

1. Tablas de Referencia Rápida
2. Lista de Verificación de Diseño
3. Estudios de Diseño

Psicología Gestalt

“El todo es diferente a la suma de sus partes.” — Kurt Koffka

La psicología Gestalt, desarrollada en la Alemania de los años 1920, explica cómo los humanos perciben la información visual. El cerebro no ve píxeles individuales—organiza elementos en patrones significativos. Domina estos principios para controlar cómo los usuarios perciben tus interfaces.

Proximidad

Los elementos cercanos entre sí se perciben como un grupo.

Este es el principio Gestalt más poderoso en el diseño de UI. El espacio comunica relación más que cualquier otra propiedad visual.

INCORRECTO (espaciado igual = sin agrupación):
┌─────────────────┐
│ Label           │
│                 │
│ Input Field     │
│                 │
│ Label           │
│                 │
│ Input Field     │
└─────────────────┘

CORRECTO (espaciado desigual = grupos claros):
┌─────────────────┐
│ Label           │
│ Input Field     │ ← Ajustado (4px) - relacionados
│                 │
│                 │ ← Amplio (24px) - separando grupos
│ Label           │
│ Input Field     │ ← Ajustado (4px) - relacionados
└─────────────────┘

Implementación CSS:

.form-group {
  margin-bottom: 24px;  /* Between groups: wide */
}

.form-group label {
  margin-bottom: 4px;   /* Label to input: tight */
  display: block;
}

Implementación SwiftUI:

VStack(alignment: .leading, spacing: 4) {  // Tight within group
    Text("Email")
        .font(.caption)
        .foregroundStyle(.secondary)
    TextField("[email protected]", text: $email)
        .textFieldStyle(.roundedBorder)
}
.padding(.bottom, 24)  // Wide between groups

Similitud

Los elementos que comparten características visuales parecen relacionados.

Cuando los elementos se ven igual, los usuarios asumen que funcionan igual. Por eso los sistemas de diseño usan estilos de botón consistentes, tratamientos de tarjetas y tipografía.

Ejemplo de Navegación:
┌───────────────────────────────────┐
│ [Dashboard] [Projects] [Settings] │  ← Mismo estilo = misma función
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Card │  │Card │  │Card │         │  ← Mismo estilo = mismo tipo de contenido
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ New Project]                   │  ← Estilo diferente = función diferente
└───────────────────────────────────┘

Figura-Fondo

El contenido debe separarse claramente del fondo.

El cerebro necesita distinguir la “figura” (en qué enfocarse) del “fondo” (el trasfondo). Las malas relaciones figura-fondo crean confusión visual.

Técnicas: - Contraste (figura clara sobre fondo oscuro, o viceversa) - Sombras (elevar la figura sobre el fondo) - Bordes (delinear los bordes de la figura) - Desenfoque (desenfocar el fondo, enfocar la figura)

/* Strong figure-ground relationship */
.card {
  background: var(--color-surface);     /* Figure */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  /* Elevation */
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);  /* Dim ground */
  backdrop-filter: blur(4px);      /* Blur ground */
}

Región Común

Los elementos dentro de un límite se perciben como agrupados.

Encerrar elementos dentro de un contenedor visual (tarjeta, caja, área bordeada) señala que pertenecen juntos.

Continuidad

El ojo sigue caminos, líneas y curvas.

Usa la alineación y el flujo visual para guiar la atención a través de tu interfaz.

CONTINUIDAD EN LA ALINEACIÓN:
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Alineados en eje horizontal
├────────────────────────────────┤
│                                │
│ Headline                       │
│ ─────────────────────────────  │  ← El ojo sigue el borde izquierdo
│ Paragraph text continues       │
│ along the same left edge       │
│                                │
│ [Primary Action]               │  ← Todavía en el borde izquierdo
└────────────────────────────────┘

Cierre

El cerebro completa formas incompletas.

Los usuarios no necesitan que se dibuje cada píxel—completarán mentalmente formas familiares. Esto permite diseños más minimalistas y elegantes.

/* Horizontal scroll with partial card (closure) */
.card-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-right: 48px;  /* Show partial card = scroll hint */
}

.card-carousel .card {
  flex: 0 0 280px;  /* Fixed width, partial visible */
}

Referencia Rápida de Gestalt

Tipografía

“La tipografía es el arte de dotar al lenguaje humano de una forma visual duradera.” — Robert Bringhurst

La tipografía es la base del diseño de interfaces. El texto comunica funcionalidad, jerarquía y marca. Una mala tipografía hace las interfaces más difíciles de usar; una gran tipografía es invisible—simplemente funciona.

Escala Tipográfica

Una escala consistente crea armonía visual. Usa una proporción matemática.

La Escala 1.25 (Recomendada para UI):

:root {
  /* Base: 16px (1rem) */
  --text-xs: 0.64rem;    /* 10.24px - use sparingly */
  --text-sm: 0.8rem;     /* 12.8px - captions, labels */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.25rem;    /* 20px - lead text */
  --text-xl: 1.563rem;   /* 25px - h4 */
  --text-2xl: 1.953rem;  /* 31.25px - h3 */
  --text-3xl: 2.441rem;  /* 39px - h2 */
  --text-4xl: 3.052rem;  /* 48.8px - h1 */
}

Altura de Línea (Interlineado)

La altura de línea afecta dramáticamente la legibilidad. Diferentes contenidos necesitan diferente interlineado.

Longitud de Línea (Medida)

La longitud de línea óptima previene la fatiga visual y mejora la comprensión lectora.

• Óptimo: 45-75 caracteres por línea
• Objetivo: 50-65 caracteres
• Máximo absoluto: 85 caracteres

p {
  max-width: 65ch;  /* ch unit = width of '0' character */
}

.article-body {
  max-width: 70ch;
  margin: 0 auto;
}

Selección de Fuentes

Primero las fuentes del sistema. Cargan instantáneamente, coinciden con la plataforma y están optimizadas para pantallas.

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
               'JetBrains Mono', Consolas, monospace;
}

Usa fuentes personalizadas para: - Diferenciación de marca (sitios de marketing) - Sensación editorial/de publicación - Intención de diseño específica no alcanzable con fuentes del sistema

Peso de Fuente para Jerarquía

Usa el peso para establecer jerarquía, no solo el tamaño.

h1 { font-weight: 700; }  /* Bold */
h2 { font-weight: 600; }  /* Semibold */
h3 { font-weight: 600; }  /* Semibold */
.lead { font-weight: 500; }  /* Medium */
p { font-weight: 400; }   /* Regular */
.meta { font-weight: 400; color: var(--text-muted); }

Referencia Rápida de Tipografía

Teoría del Color

“El color es un poder que influye directamente en el alma.” — Wassily Kandinsky

El color comunica más rápido que las palabras. Establece el ambiente, guía la atención, señala significado y construye reconocimiento de marca.

La Regla 60-30-10

La distribución de color más confiable para interfaces equilibradas.

┌──────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 60% - Dominante (Fondo)
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 30% - Secundario (Tarjetas, secciones)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Acento (Botones, enlaces)
└──────────────────────────────────────────┘

Construyendo una Paleta de Colores

Toda interfaz necesita estos colores semánticos:

:root {
  /* Brand */
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 45%);

  /* Semantic */
  --color-success: hsl(142, 76%, 36%);  /* Green - positive */
  --color-warning: hsl(38, 92%, 50%);   /* Amber - caution */
  --color-error: hsl(0, 84%, 60%);      /* Red - danger */

  /* Neutrals */
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(220, 14%, 96%);
  --color-border: hsl(220, 13%, 91%);

  /* Text */
  --color-text: hsl(220, 13%, 13%);
  --color-text-secondary: hsl(220, 9%, 46%);
  --color-text-muted: hsl(220, 9%, 64%);
}

Psicología del Color

Contraste para Accesibilidad

Herramientas: WebAIM Contrast Checker, selector de color de Chrome DevTools

Jerarquía Visual

“El diseño es el embajador silencioso de tu marca.” — Paul Rand

La jerarquía visual controla lo que los usuarios ven primero, segundo y tercero. Sin una jerarquía clara, los usuarios deben esforzarse para encontrar información. Con ella, las interfaces se sienten sin esfuerzo.

Las Seis Herramientas de la Jerarquía

1. Tamaño — Los elementos más grandes atraen la atención primero

.hero-title { font-size: 3rem; }      /* Dominant */
.section-title { font-size: 1.5rem; } /* Secondary */
.body-text { font-size: 1rem; }       /* Baseline */

2. Peso — Lo negrita destaca hacia adelante, lo ligero retrocede

h1 { font-weight: 700; }
.lead { font-weight: 500; }
p { font-weight: 400; }

3. Color y Contraste — Alto contraste = atención

.title { color: var(--color-text); }  /* Near black */
.meta { color: var(--color-text-muted); }  /* Gray */

4. Posición — Las posiciones clave importan

F-PATTERN (content pages):     Z-PATTERN (landing pages):
████████████████████████      1 ──────────────────► 2
████████                            ↘
████                                     ↘
██                                            ↘
                                   3 ──────────────────► 4

5. Espacio en Blanco — El aislamiento crea importancia

.hero { padding: 120px 48px; }  /* Generous space */
.data-table { padding: 12px; }  /* Dense content */

6. Profundidad y Elevación — Los elementos que sobresalen hacia adelante demandan atención

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

La Prueba de Entrecerrar los Ojos

Entrecierra los ojos mirando tu diseño. ¿Aún puedes ver la jerarquía? Si es así, es fuerte.

Espaciado y Ritmo

“El espacio en blanco es como el aire: es necesario para que el diseño respire.” — Wojciech Zieliński

El espaciado es la estructura invisible del diseño. Un espaciado consistente crea ritmo visual—la sensación de que los elementos pertenecen juntos en un sistema coherente.

La Cuadrícula de 8px

La cuadrícula de 8px es el estándar de la industria porque: - Se divide de manera uniforme (8, 16, 24, 32, 40, 48…) - Funciona con densidades de pantalla comunes (1x, 1.5x, 2x, 3x) - Crea un ritmo consistente sin matemáticas

:root {
  --space-1: 4px;    /* Tight: icon gaps */
  --space-2: 8px;    /* Compact: inline elements */
  --space-3: 12px;   /* Snug: form fields */
  --space-4: 16px;   /* Default: most gaps */
  --space-6: 24px;   /* Spacious: card padding */
  --space-8: 32px;   /* Section gaps */
  --space-12: 48px;  /* Major sections */
  --space-16: 64px;  /* Page sections */
  --space-20: 80px;  /* Hero spacing */
}

Espaciado Interno vs Externo

Interno (padding): Espacio dentro de un elemento Externo (margin): Espacio entre elementos

Regla: El espaciado interno generalmente debe ser mayor que el espaciado externo dentro de grupos relacionados.

.card {
  padding: 24px;        /* Internal: spacious */
  margin-bottom: 16px;  /* External: less than padding */
}

Patrones de Espaciado de Componentes

Tarjetas:

.card { padding: 24px; border-radius: 12px; }
.card-header { margin-bottom: 16px; }
.card-title { margin-bottom: 4px; }  /* Tight to subtitle */

Botones:

.btn { padding: 12px 24px; border-radius: 8px; }
.btn--sm { padding: 8px 16px; }
.btn--lg { padding: 16px 32px; }
.btn-group { display: flex; gap: 12px; }

Formularios:

.form-row { margin-bottom: 24px; }
.form-label { margin-bottom: 4px; }
.form-help { margin-top: 4px; }
.form-actions { margin-top: 32px; display: flex; gap: 12px; }

Referencia Rápida de Espaciado

Principios de Animación

“La animación no es el arte de dibujos que se mueven sino el arte de movimientos que se dibujan.” — Norman McLaren

La animación da vida a las interfaces. Bien hecha, guía la atención, comunica estado y crea conexión emocional. Mal hecha, frustra y distrae.

El Principio Central

La animación debe sentirse inevitable, no decorativa.

Buena animación: 1. Comunica algo que el diseño estático no puede 2. Reduce la carga cognitiva mostrando relaciones 3. Se siente natural y esperada 4. Desaparece de la conciencia

Mala animación: 1. Existe solo porque “se ve genial” 2. Ralentiza al usuario 3. Llama la atención sobre sí misma 4. Crea ansiedad o impaciencia

Principios Clave para UI

1. Anticipación — Prepara a los usuarios para lo que viene.

.button {
  transition: transform 0.1s ease-out;
}

.button:active {
  transform: scale(0.97);  /* Slight press before action */
}

2. Seguimiento — Deja que el movimiento se complete naturalmente con un asentamiento tipo resorte.

.panel {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    isOpen = true
}

3. Ease-In, Ease-Out — Nada en la naturaleza se mueve a velocidad constante.

4. Puesta en Escena — Dirige la atención a lo que importa. Solo una cosa debe moverse a la vez a menos que esté coreografiado como grupo.

5. Escalonamiento — Los elementos deben llegar en secuencia, no todos a la vez.

.list-item {
  animation: fadeSlideIn 0.3s ease-out both;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
.list-item:nth-child(4) { animation-delay: 150ms; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Guías de Temporización

Rendimiento: La Regla de Oro

Solo anima transform y opacity — estos están acelerados por GPU y no disparan recálculo de layout.

/* BAD: Animating layout */
.panel { transition: left 0.3s, width 0.3s; }

/* GOOD: Using transform */
.panel { transition: transform 0.3s; }

Cuándo NO Animar

1. El usuario tiene prefers-reduced-motion habilitado css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

2. La animación no añade información — spinners gratuitos, elementos rebotando

3. Los usuarios tienen prisa — estados de error, validación de formularios, resultados de búsqueda
4. La animación ralentizaría acciones repetidas — los atajos de teclado deben omitir la animación

Referencia Rápida de Animación

:root {
  /* Durations */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* Easings */
  --ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0);
  --ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Dieter Rams: Diez Principios

“Menos, pero mejor.” — Dieter Rams

Dieter Rams es el diseñador industrial más influyente del siglo XX. Como director de diseño en Braun de 1961 a 1995, creó productos que permanecen atemporales décadas después. Su trabajo inspiró directamente el lenguaje de diseño de Apple.

Los Diez Principios del Buen Diseño

1. El buen diseño es innovador No copies. Combina la tecnología avanzada con el diseño innovador.

2. El buen diseño hace útil a un producto Cada elemento debe servir un propósito. La forma sigue a la función.

3. El buen diseño es estético La belleza no es superficial—es esencial. Los productos que usamos diariamente afectan nuestro bienestar.

4. El buen diseño hace comprensible a un producto Los usuarios no deberían necesitar instrucciones. La interfaz se enseña a sí misma.

5. El buen diseño es discreto El diseño debe apoyar, no abrumar. El contenido del usuario es la estrella, no tu UI.

/* Obtrusive: UI competes with content */
.editor {
  background: linear-gradient(135deg, purple, blue);
  border: 3px dashed gold;
}

/* Unobtrusive: UI recedes, content shines */
.editor {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

6. El buen diseño es honesto No uses patrones oscuros. No prometas de más. Sé transparente sobre las limitaciones.

7. El buen diseño es duradero Evita tendencias que se quedarán anticuadas rápidamente. Clásico sobre trendy.

TRENDY (will date):           TIMELESS:
- Extreme glassmorphism       - Clean typography
- Neon colors, glitch effects - Subtle elevation
- Aggressive gradients        - Neutral palette with considered accent

8. El buen diseño es minucioso hasta el último detalle Nada debe ser arbitrario. Estados de carga, estados vacíos, estados de error—todo diseñado.

9. El buen diseño es respetuoso con el medio ambiente El rendimiento es ambiental. Respeta la atención del usuario. Código eficiente.

10. El buen diseño es el menor diseño posible Elimina todo lo que no sea necesario. El mejor diseño es invisible.

Patrones Web 2025

El diseño web moderno aprovecha las capacidades nativas de CSS que eliminan la necesidad de JavaScript en muchos casos.

Container Queries

Dimensiona los componentes según su contenedor, no según el viewport.

.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

.card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

@container card-grid (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
  }
}

@container card-grid (min-width: 600px) {
  .card {
    padding: 32px;
    gap: 24px;
  }
}

El Selector :has()

Selección de padres basada en hijos—anteriormente imposible sin JavaScript.

/* Card with image gets different padding */
.card:has(img) {
  padding: 0;
}

.card:has(img) .card-content {
  padding: 20px;
}

/* Form group with error */
.form-group:has(.input:invalid) .form-label {
  color: var(--color-error);
}

/* Highlight navigation when on that page */
.nav-item:has(a[aria-current="page"]) {
  background: var(--color-surface);
}

Anidamiento CSS

Anidamiento nativo sin preprocesadores.

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;

  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
  }

  & .card-body {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }

  @media (min-width: 768px) {
    padding: 32px;
  }
}

Integración con HTMX

Interactividad dirigida por el servidor sin frameworks pesados de JavaScript.

<!-- Load content on click -->
<button hx-get="/api/more-items"
        hx-target="#item-list"
        hx-swap="beforeend"
        hx-indicator="#loading">
  Load More
</button>

<!-- Form with inline validation -->
<form hx-post="/api/contact"
      hx-target="#form-response"
      hx-swap="outerHTML">
  <input type="email" name="email"
         hx-post="/api/validate-email"
         hx-trigger="blur"
         hx-target="next .error" />
  <span class="error"></span>
</form>

Sistema de Design Tokens

Un sistema completo de tokens para mantener consistencia en toda tu aplicación.

:root {
  /* Colors */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;

  --color-border: #e5e7eb;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
}

Modo Oscuro Bien Implementado

No solo inviertas—rediseña para contextos oscuros.

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrals */
    --color-background: hsl(220, 13%, 10%);
    --color-surface: hsl(220, 13%, 15%);
    --color-surface-elevated: hsl(220, 13%, 18%);
    --color-border: hsl(220, 13%, 23%);

    /* Text (inverted) */
    --color-text: hsl(220, 9%, 93%);
    --color-text-secondary: hsl(220, 9%, 70%);
    --color-text-muted: hsl(220, 9%, 55%);

    /* Adjust saturation for dark mode */
    --color-primary: hsl(220, 80%, 60%);
    --color-success: hsl(142, 70%, 45%);
    --color-error: hsl(0, 80%, 65%);

    /* Shadows in dark mode need adjustment */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Principios del modo oscuro: - Reduce la saturación en superficies grandes - Aumenta la luminosidad de los colores de acento - Fortalece las sombras (necesitan más contraste) - Diseña el modo oscuro intencionalmente, no como una ocurrencia tardía

Flujos de Extracción desde Figma

Transformar archivos de diseño en código de producción requiere una extracción sistemática de design tokens—colores, tipografía, espaciado y efectos que definen tu lenguaje de diseño.

Exportación de Variables de Figma

La funcionalidad nativa de Variables de Figma proporciona la ruta de extracción más limpia:

Pasos de Exportación: 1. Abre el archivo de Figma → panel de Variables Locales 2. Haz clic en el menú de colección → “Export to JSON” 3. Guarda como figma-variables.json

Estructura JSON de Tokens:

{
  "colors": {
    "primitive": {
      "blue-500": { "value": "#3b82f6", "type": "color" },
      "blue-600": { "value": "#2563eb", "type": "color" }
    },
    "semantic": {
      "primary": { "value": "{colors.primitive.blue-500}", "type": "color" },
      "primary-hover": { "value": "{colors.primitive.blue-600}", "type": "color" }
    }
  },
  "spacing": {
    "1": { "value": "4px", "type": "spacing" },
    "2": { "value": "8px", "type": "spacing" },
    "4": { "value": "16px", "type": "spacing" }
  }
}

Transformación de Tokens a CSS

CSS Custom Properties:

:root {
  /* Primitive colors (direct values) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-900: #1e3a8a;

  /* Semantic colors (reference primitives) */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);

  /* Spacing (8px grid) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Typography */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Tokens para Modo Oscuro:

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-900);
    --color-surface: var(--color-gray-800);
    --color-text: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Transformación de Tokens a SwiftUI

Extensión de Color:

import SwiftUI

extension Color {
    // MARK: - Primitive Colors
    static let blue50 = Color(hex: "eff6ff")
    static let blue500 = Color(hex: "3b82f6")
    static let blue600 = Color(hex: "2563eb")

    // MARK: - Semantic Colors
    static let brandPrimary = Color.blue500
    static let brandPrimaryHover = Color.blue600

    // MARK: - Surface Colors
    static let surfaceBackground = Color(light: .white, dark: Color(hex: "0f172a"))
    static let surfaceElevated = Color(light: Color(hex: "f8fafc"), dark: Color(hex: "1e293b"))
}

extension Color {
    init(hex: String) {
        // Standard hex parsing implementation
    }

    init(light: Color, dark: Color) {
        self.init(UIColor { traits in
            traits.userInterfaceStyle == .dark ? UIColor(dark) : UIColor(light)
        })
    }
}

Constantes de Espaciado:

enum Spacing {
    static let xs: CGFloat = 4    // --space-1
    static let sm: CGFloat = 8    // --space-2
    static let md: CGFloat = 16   // --space-4
    static let lg: CGFloat = 24   // --space-6
    static let xl: CGFloat = 32   // --space-8
}

// Usage
VStack(spacing: Spacing.md) {
    // ...
}
.padding(Spacing.lg)

Lista de Verificación para Entrega de Diseñador

Lo que los Diseñadores Deben Exportar:

Criterios de Control de Calidad:

• [ ] Todos los colores definidos como variables (sin hex hardcodeado)
• [ ] La tipografía usa estilos de texto definidos
• [ ] El espaciado sigue el sistema de cuadrícula (base 8px)
• [ ] Variantes de modo oscuro proporcionadas
• [ ] Estados interactivos documentados (hover, activo, deshabilitado)
• [ ] Breakpoints responsivos anotados
• [ ] Requisitos de accesibilidad indicados (ratios de contraste)

El Desarrollador Recibe:

1. Archivos de tokens (JSON/CSS/Swift dependiendo de la plataforma)
2. Especificaciones de componentes con medidas
3. Exportaciones de recursos en los formatos requeridos
4. Documentación de interacciones (estados, animaciones)
5. Anotaciones de accesibilidad

Tablas de Referencia Rápida

Principios Gestalt

Tipografía

Roles de Color

Escala de Espaciado

Lista de Verificación de Diseño

Antes de publicar cualquier interfaz, verifica:

Gestalt

• [ ] Los elementos relacionados están más cerca que los no relacionados (Proximidad)
• [ ] Las funciones similares tienen estilos similares (Similitud)
• [ ] Clara separación entre primer plano y fondo (Figura-Fondo)
• [ ] El ojo fluye naturalmente a través del diseño (Continuidad)

Tipografía

• [ ] El tamaño de fuente base es al menos 16px
• [ ] La altura de línea es 1.5+ para texto de cuerpo
• [ ] La longitud de línea es menor a 75 caracteres
• [ ] La jerarquía es clara (3 niveles distinguibles)
• [ ] Escala consistente usada en todo el diseño

Color

• [ ] Todo el texto pasa contraste 4.5:1 (WCAG AA)
• [ ] El color no es el único indicador (iconos/etiquetas también)
• [ ] Modo oscuro diseñado intencionalmente
• [ ] Distribución 60-30-10 seguida

Jerarquía Visual

• [ ] Se puede identificar el elemento #1 más importante
• [ ] El ojo fluye en el orden previsto
• [ ] Un CTA claro por sección
• [ ] Escala tipográfica consistente

Espaciado

• [ ] Todo el espaciado usa la escala definida (sin números mágicos)
• [ ] Tarjetas/componentes tienen padding consistente
• [ ] El espaciado móvil es cómodo
• [ ] Alineación de cuadrícula consistente (base 8px)

Verificación de Dieter Rams

• [ ] ¿Se puede eliminar algo?
• [ ] ¿Cada elemento cumple una función?
• [ ] ¿Se vería anticuado en 5 años?
• [ ] ¿He diseñado cada estado?

Recursos

Libros: - As Little Design as Possible de Sophie Lovell (Dieter Rams) - The Elements of Typographic Style de Robert Bringhurst

Herramientas: - WebAIM Contrast Checker - Type Scale Generator - Figma Tokens Studio — Gestión de tokens de diseño

Sistemas de Diseño: - Apple HIG - Material Design 3 - Radix UI - shadcn/ui

Estudios de Diseño

Análisis profundos de 16 productos excepcionales, documentando patrones y principios dignos de adoptar.

Herramientas para Desarrolladores

iOS Nativo (Ganadores del Apple Design Award)

Productividad e IA

Esta guía crece a través de la práctica. Los principios de diseño son atemporales, pero su aplicación evoluciona con la tecnología y la comprensión.