Cómo diseñar una página web en Figma: del primer frame al sitio en producción

La respuesta corta

Para diseñar una página web en Figma: crea frames en los anchos que vas a construir (por ejemplo 1440 y 390 píxeles), haz los wireframes con contenido real, convierte color, tipografía y espaciado en variables y estilos, arma componentes reutilizables con auto layout, diseña cada página en cada ancho, prototipa y prueba, y entrega el archivo a desarrollo en Dev Mode o publícalo.

Figma Sites puede publicar directo desde Figma. Al 12 de noviembre de 2026 sigue en beta abierta, para publicar hace falta un asiento Full en un plan Professional o superior, y el centro de ayuda de Figma dice que el código no se puede exportar. Abajo va cada paso, con un ejemplo real de este sitio: cómo su escala tipográfica pasa de dos anchos de frame a una sola línea de CSS.

Antes de abrir Figma

• Un mapa del sitio y contenido real. Los diseños hechos con texto de relleno se rompen cuando llegan los titulares de verdad. Ten al menos el inicio, una página de servicio o producto y la de contacto con textos casi finales.
• La ruta de construcción. Decide pronto si el sitio se publica desde Figma Sites, se reconstruye en una plataforma como Webflow o se programa. Cambia lo que tienes que especificar: un sitio en código necesita tokens y estados; Figma Sites necesita las etiquetas HTML en las capas.
• Los asientos correctos. Puedes diseñar en el plan gratuito Starter. Los fragmentos de código de Dev Mode requieren plan pago y asiento Full o Dev; publicar con Figma Sites requiere plan Professional o superior y asiento Full.

Paso 1: prepara el archivo y los anchos

Crea páginas para el mapa del sitio y los wireframes, el sistema de diseño, las páginas diseñadas y el prototipo. Luego elige los anchos en que vas a diseñar. Lo habitual es un ancho de escritorio y uno de teléfono, cada uno con su retícula.

El sitio de Dardo define cada tamaño de título en dos anchos, 1440 y 390 píxeles, y deja que el navegador escale entre ambos. Elijas lo que elijas, diseña en los anchos que desarrollo va a probar y acuerda cómo escalan los tamaños entre ellos antes de diseñar páginas.

Paso 2: wireframes con contenido real

Haz los wireframes en grises con auto layout, un frame por plantilla de página, con los títulos reales de tu documento de contenido. Aquí se prueba la estructura: ¿cada página responde en la primera pantalla a lo que vino a buscar el visitante?, ¿la navegación tiene lugar para todas las páginas del mapa? Corrige la estructura aquí; sale más barato que en los diseños terminados.

Paso 3: convierte las decisiones en variables y estilos

Colores, espaciados, radios y tamaños de letra pasan a ser variables y estilos de texto, nombrados por su función ("Título de página", "Título de tarjeta") y no por su valor ("Serif 92"). Las variables de color pueden tener modo claro y oscuro. Esos nombres son el puente al código: quien desarrolla debería encontrar el mismo nombre en el CSS.

Así funciona en este sitio. Cada rol tiene un tamaño a 1440 y otro a 390 píxeles, y una línea de CSS con clamp() lo escala en línea recta entre ambos:

La cuenta es simple. El título de página crece 48 píxeles en 1.050 píxeles de ancho, o 4,57 píxeles por cada 100 de pantalla (4.57vw), y parte de 26,2 píxeles para caer justo en 44 a 390. El último número es el tope: el título deja de crecer en 104 píxeles en pantallas anchas. En Figma eso son dos estilos de texto por rol, uno por ancho; en código, una línea.

Dos lecciones de la misma escala. Primero, diseña para el largo real del contenido: los títulos de más de 48 caracteres bajan al rol de título largo para no llenar la primera pantalla. Segundo, revisa que la licencia de la tipografía cubra el sitio web y no solo el uso de escritorio; la tipografía de títulos de este sitio es comercial y tiene licencia web.

Paso 4: componentes con auto layout y estados

Convierte en componente todo lo que se repite: botones, enlaces, tarjetas, navegación, pie de página, campos de formulario y avisos. Usa auto layout para que se reacomoden cuando el texto crece o una traducción sale más larga, con anchos mínimos y máximos. Luego agrega variantes para cada estado: normal, hover, foco, presionado, deshabilitado, error y vacío. El estado de foco es el que más se olvida, y quien navega con teclado depende de él.

Paso 5: diseña cada página en cada ancho

Diseña cada plantilla en los dos anchos con contenido real: inicio, una página larga, una corta, un listado, un formulario y el 404. Busca los casos incómodos: el título más largo, una tarjeta sin imagen, un precio con tres líneas de condiciones, una página en tu idioma más largo.

Paso 6: revisa la accesibilidad en el diseño

La mayoría de los problemas de accesibilidad se detectan antes de escribir código:

• Contraste. WCAG 2.2 pide al menos 4,5:1 para el texto y 3:1 para el texto grande.
• Tamaño de objetivo. Los elementos interactivos deben medir al menos 24 por 24 píxeles CSS, o estar separados para que un círculo de 24 píxeles alrededor de cada uno no toque a otro.
• Encabezados. Un H1 por página y luego niveles en orden. Escríbelos en las capas para que desarrollo o Figma Sites los marquen bien.
• Foco y movimiento. Un foco visible en cada control y una versión de cada animación que respete la preferencia de movimiento reducido.

Paso 7: prototipa, prueba y entrega

Conecta los recorridos principales en un prototipo (llegar, comparar, contactar) y mira a unas pocas personas usarlo antes de construir. Luego entrega. En Dev Mode, desarrollo inspecciona capas y obtiene fragmentos de código en CSS, en px o rem; Code Connect muestra el código real de tus componentes en lugar del generado. El servidor MCP de Figma pasa variables y componentes a las herramientas de programación con IA para que el código siga el sistema de diseño.

Paso 8: elige cómo llega el diseño a la web

Qué puede y qué no puede hacer Figma Sites

El centro de ayuda de Figma describe la beta en detalle. Lo que importa antes de poner un sitio real ahí:

• Lo que hace: diseños responsive con breakpoints, las mismas herramientas de Figma Design, copiar y pegar desde Figma Design, interacciones como marquesina y parallax, un CMS con colecciones e importación de CSV, y ajustes de título, meta descripción, idioma, Google Analytics, noindex, contraseña, banner de cookies y código personalizado en head o body.
• Publicar: asiento Full en un plan Professional, Education, Organization o Enterprise. El sitio sale primero en un subdominio figma.site aleatorio y luego en tu dominio si lo agregas; los planes Professional pueden conectar hasta 10 dominios, y Figma dice que esos límites son gratis "hasta 2025" y pueden cambiar.
• Hosting: en Amazon Web Services en Estados Unidos, con dominio y enrutamiento servidos por Cloudflare.
• Código: por ahora no se puede exportar el código del sitio para publicarlo en otro lugar. Si te vas, reconstruyes.
• HTML: casi todas las capas salen como div; las de texto como párrafos y las que tienen enlace como enlaces. Encabezados, regiones y textos alternativos se definen a mano en la sección de accesibilidad.
• Redirecciones: no encontramos ajustes de redirección en la documentación de Figma Sites. Si vas a mudar un sitio que ya recibe tráfico de búsqueda, confirma cómo se redirigirán las URLs viejas antes de cambiar.

Cómo trabaja Dardo

Dardo diseña en Figma y construye en Astro, Webflow, Framer o Next.js, según quién va a editar el sitio y qué tiene que hacer; su base por defecto es Astro en Cloudflare con un CMS headless. Mira los servicios de diseño web y desarrollo web y, si estás eligiendo plataforma, Webflow vs Framer.