Fundamentos de Código para Diseñadores

¿Por qué un diseñador necesita saber código?

Hay un viejo debate en la comunidad de diseño: ¿los diseñadores deben saber escribir código o no? La respuesta corta: deben conocer los fundamentos al menos. No para convertirse en desarrolladores, sino para diseñar cosas que sean factibles y comunicarse mejor con los desarrolladores.

Cuando conoces los fundamentos de HTML y CSS:

• Diseñas con realismo: entiendes que algunas cosas son fáciles de implementar y otras son difíciles, por lo que tomas decisiones de diseño más inteligentes
• Te comunicas mejor con los desarrolladores: en lugar de decir "quiero que este botón se vea así", puedes decir "quiero border-radius: 12px y padding: 16px 24px"
• Entiendes las restricciones: la web tiene restricciones — como el texto que se expande y las pantallas de diferentes tamaños. Cuando entiendes esto, tu diseño se vuelve mejor
• Puedes crear prototipos reales: a veces un prototipo en código es mejor que un prototipo en Figma
• Aumentas tu valor en el mercado: un diseñador que entiende el código cobra un salario más alto y tiene más oportunidades

Empecemos con los fundamentos.

Fundamentos de HTML: estructura de la página

HTML (HyperText Markup Language) es el lenguaje que construye la estructura de una página web. Piensa en él como el esqueleto — define qué elementos existen en la página y su orden.

Elementos esenciales:

<!-- Encabezado principal -->
<h1>Bienvenido a nuestro sitio</h1>

<!-- Subencabezado -->
<h2>Nuestros Servicios</h2>

<!-- Párrafo de texto -->
<p>Somos una empresa especializada en diseño de productos digitales.</p>

<!-- Enlace -->
<a href="https://example.com">Visita nuestro sitio</a>

<!-- Imagen -->
<img src="photo.jpg" alt="Descripción de la foto" />

<!-- Botón -->
<button>Haz clic aquí</button>

<!-- Lista -->
<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
</ul>

Elementos contenedor:

<!-- Contenedor general -->
<div>Contenido aquí</div>

<!-- Elementos semánticos - transmiten significado -->
<header>Encabezado de la página</header>
<nav>Menú de navegación</nav>
<main>Contenido principal</main>
<section>Una sección específica</section>
<article>Un artículo o contenido independiente</article>
<footer>Pie de la página</footer>

¿Por qué son importantes los elementos semánticos?
Cuando usas <header> en lugar de <div>, le estás diciendo al navegador y a los lectores de pantalla que esto es el encabezado de la página. Esto importa para la accesibilidad y el SEO. Como diseñador, necesitas saber que cada parte de tu diseño se traduce en un elemento HTML específico.

Fundamentos de CSS: dar estilo a la apariencia

CSS (Cascading Style Sheets) es lo que determina la apariencia de los elementos — colores, tamaños, espaciado y todo lo visual.

Propiedades básicas:

/* Colores */
color: #333333;              /* color del texto */
background-color: #f5f5f5;   /* color de fondo */

/* Tamaño */
width: 300px;
height: 200px;
max-width: 100%;             /* importante para responsive */

/* Fuente */
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 700;            /* negrita */
line-height: 1.6;            /* espaciado entre líneas */

/* Espaciado */
padding: 16px;               /* espaciado interior */
margin: 24px;                /* espaciado exterior */

/* Bordes */
border: 1px solid #e0e0e0;
border-radius: 12px;         /* esquinas redondeadas */

/* Sombras */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

La diferencia entre Padding y Margin:
Esta es una de las cosas que más confunde a los diseñadores. Imagina un elemento HTML como una caja:

• Padding: el espacio entre el contenido y los bordes de la caja (por dentro)
• Margin: el espacio entre la caja y los elementos que la rodean (por fuera)
• Border: el propio borde de la caja

Esto se llama el Box Model, y es la base de todo el layout en CSS.

Unidades en CSS

Una de las cosas que el diseñador debe entender son las diferentes unidades de medida:

px (Píxeles): una unidad fija. 16px son 16px en cualquier pantalla. Adecuada para cosas como border-width y font-size base.

rem: relativa al tamaño de fuente base de la página (normalmente 16px). Así que 1rem = 16px, 1.5rem = 24px. Muy adecuada para el diseño responsive porque cambia con el tamaño de la fuente.

% (Porcentaje): relativa al elemento padre. width: 50% significa la mitad del ancho del contenedor. Muy importante para el diseño responsive.

vw y vh: relativas al tamaño de la pantalla. 100vw es el ancho completo de la pantalla, 100vh es la altura completa de la pantalla.

Consejo para diseñadores: en Figma, diseñas en px. Pero el desarrollador convertirá muchos valores a rem o %. Por eso debes diseñar con números divisibles entre 8 o 4 (es decir, 8, 12, 16, 24, 32, 48, 64) — esto facilita la conversión.

Flexbox: organizar elementos en fila o columna

Flexbox es un sistema de layout en CSS que organiza los elementos en una sola fila (horizontal) o una sola columna (vertical). Es lo más parecido al Auto Layout de Figma.

.container {
  display: flex;
  flex-direction: row;        /* horizontal (predeterminado) */
  /* flex-direction: column;  vertical */

  justify-content: center;    /* alineación en el eje principal */
  align-items: center;        /* alineación en el eje secundario */
  gap: 16px;                  /* espacio entre elementos */
}

La relación con Figma:

• Auto Layout en Figma = display: flex en CSS
• Horizontal en Figma = flex-direction: row
• Vertical en Figma = flex-direction: column
• Gap en Figma = gap en CSS
• Padding en Figma = padding en CSS
• Fill Container en Figma = flex: 1 o width: 100% en CSS
• Hug Contents en Figma = tamaño predeterminado en CSS

Cuando entiendes esta relación, tus diseños en Figma se vuelven más fáciles de implementar porque estás pensando con la misma lógica.

Valores comunes de justify-content:

• flex-start: elementos al principio
• center: elementos en el centro
• flex-end: elementos al final
• space-between: elementos distribuidos con espacios iguales entre ellos
• space-around: espacios iguales alrededor de cada elemento

CSS Grid: diseños bidimensionales

Grid te permite organizar elementos en filas y columnas simultáneamente. Perfecto para layouts grandes.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 columnas iguales */
  gap: 24px;
}

/* Un elemento que ocupa dos columnas */
.wide-item {
  grid-column: span 2;
}

Flexbox vs Grid:

• Flexbox: para organización en una dimensión (fila o columna). Adecuado para barras de navegación, grupos de botones, filas de tarjetas
• Grid: para organización en dos dimensiones (filas y columnas). Adecuado para layouts de página, galerías de imágenes, dashboards

En Figma: Auto Layout funciona como Flexbox. Actualmente no hay un Grid layout directo en Figma, pero puedes simularlo usando Auto Layout anidado.

Diseño Responsive

Una de las cosas más importantes que un diseñador debe entender. Las pantallas son diferentes — móvil, tablet, portátil, escritorio — y el diseño debe adaptarse a cada tamaño.

Media Queries:

/* Estilo para móvil (predeterminado) */
.container {
  padding: 16px;
  flex-direction: column;
}

/* Estilo para tablet y más grande */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    flex-direction: row;
  }
}

/* Estilo para escritorio */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Breakpoints comunes:

• 320px - 480px: móvil pequeño
• 481px - 768px: móvil grande / tablet pequeña
• 769px - 1024px: tablet
• 1025px - 1200px: portátil
• 1201px+: escritorio

Consejo: diseña Mobile First. Empieza diseñando para móvil y luego amplía para pantallas más grandes. Esta es la misma lógica que CSS fomenta mediante las media queries min-width.

Por qué el Developer Handoff es importante

El Developer Handoff es el proceso de entregar el diseño al desarrollador para que lo implemente. Aquí es donde tu conocimiento del código marca la mayor diferencia.

Problemas comunes del handoff:

• El diseñador usa espaciados aleatorios (13px, 17px, 22px) en lugar de un sistema regular
• El diseño no es responsive — el diseñador hizo solo un tamaño de pantalla
• No hay documentación de los estados hover, error states, loading states
• Los colores y las fuentes no son consistentes
• El diseño tiene cosas difíciles de implementar sin que el diseñador lo sepa

Cómo mejorar el handoff:

• Usa un Design System: colores, fuentes y componentes consistentes
• Usa Auto Layout: cada frame debe tener Auto Layout — esto se traduce directamente a Flexbox
• Usa números regulares: cíñete a múltiplos de 4 u 8 en todos los espaciados
• Diseña todos los estados: normal, hover, active, disabled, error, loading, empty
• Escribe notas: aclara el comportamiento esperado para cada interacción
• Usa Dev Mode en Figma: muestra al desarrollador los códigos y los valores directamente

Herramientas de código para diseñadores

No necesitas aprenderlo todo a la vez. Hay herramientas que facilitan el comienzo:

Para aprender:

• freeCodeCamp: cursos gratuitos completos
• Codecademy: aprendizaje interactivo
• CSS-Tricks: una excelente referencia de CSS
• MDN Web Docs: la referencia oficial y más completa

Para experimentar:

• CodePen: escribe HTML y CSS y ve el resultado inmediatamente en el navegador
• VS Code: un editor de código gratuito y potente
• Chrome DevTools: ábrelo con F12 y puedes editar temporalmente cualquier sitio web y ver su código

Ejercicio práctico:

1. Abre CodePen
2. Escribe HTML simple (heading, paragraph, button)
3. Añade CSS para darle estilo (colores, fuente, padding)
4. Prueba Flexbox para organizar los elementos
5. Intenta cambiar los valores y ve el resultado

Usar Chrome DevTools:
Esta es una de las herramientas más potentes para el diseñador. En cualquier sitio web:

1. Presiona F12 o clic derecho > Inspect
2. Selecciona cualquier elemento y ve su CSS
3. Edita los valores y ve el efecto inmediatamente
4. Esto te enseña mucho sobre cómo se construyen los grandes sitios web

CSS Variables y Design Tokens

Las CSS Variables (o Custom Properties) te permiten definir valores una vez y usarlos en todas partes — exactamente como los Design Tokens en Figma.

:root {
  /* Colores */
  --color-primary: #6366f1;
  --color-text: #1f2937;
  --color-background: #ffffff;

  /* Espaciado */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Esquinas */
  --radius-md: 12px;
  --radius-lg: 16px;
}

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
}

Cuando entiendes esto, puedes diseñar un Design System en Figma con la misma lógica y se vuelve muy fácil para el desarrollador convertirlo a código.

Resumen

No se te exige como diseñador que seas desarrollador. Lo que se requiere es que entiendas los fundamentos para poder diseñar inteligentemente y comunicarte con eficacia.

Empieza con estos pasos:

1. Aprende HTML básico — los elementos y la estructura de la página
2. Aprende CSS — colores, espaciado, fuentes
3. Entiende Flexbox — porque es la misma lógica que Auto Layout en Figma
4. Prueba Chrome DevTools en los sitios que te gustan
5. Diseña en Figma e intenta implementarlo en código en CodePen

Cuanto más sepas de código, mejores serán tus diseños y más fácil será su implementación, y la comunicación con los desarrolladores se volverá más fluida. No necesitas ser un experto — solo necesitas hablar el mismo idioma.