Cómo diseñar una landing con Figma Sites

En este tutorial enseñé cómo diseñar una landing page en Figma Sites desde cero. Mostré el flujo de trabajo real, con mis ajustes rápidos, mis dudas y esos momentos en los que el diseño te obliga a reaccionar, corregir y avanzar sin perder el control del proyecto.

El enfoque no fue de perfección, sino de proceso real.
De mostrar cómo pensaba la herramienta y cómo trabajábamos los diseñadores UX cuando necesitábamos avanzar sin perder control visual.

Auto Layout y componentes

Lo primero que hice fue construir un botón básico usando Auto Layout, definiendo paddings y una versión con icono.
Eso estableció la base de un componente útil que me permitió seguir avanzando sin frenar.

También aproveché para hablar de cómo organizaba mis componentes en Figma.
Nada rígido, pero sí práctico, para que cualquier estudiante o profesional de UX pudiera aplicarlo.

Header responsive

Después pasé al Header: logo, branding, navegación y estructura responsive para Desktop, Tablet y Mobile.
Ahí Figma Sites mostró diferencias claras frente a Figma Design y exigió dominar constraints y fill container.

Fue un punto crítico para entender el diseño responsive.
Y para ver cómo pequeños ajustes podían romper el Header si no cuidabas los espaciados.

Construyendo el Hero

El hero requirió crear un H1, un H2, ajustar tipografías y colocar la imagen en absoluto para ganar flexibilidad.
El objetivo fue que todo respondiera bien al cambiar entre breakpoints.

Aquí se mezclaron técnica e intuición.
Mucho probar, corregir y volver a probar hasta lograr un ritmo visual limpio.

Reutilizar bloques

A partir de ahí empecé a duplicar bloques para construir la landing más rápido.
Fue el método más eficiente para mantener coherencia visual.

Reutilizar no fue solo velocidad, fue consistencia.
Cada bloque heredó decisiones que mantenían el diseño ordenado.

Social Proof

Creé un bloque de social proof con cards, avatares y testimonios.
Fue un módulo clave para reforzar confianza dentro de la landing.

El diseño combinó contenido real con una estructura clara.
Y demostró cómo mantener coherencia sin romper el layout responsive.

Formulario y CTA

Luego monté un formulario rápido con un text input y un CTA directo.
Ahí los paddings, la microtipografía y el copy fueron esenciales.

El CTA necesitó respirar bien en todos los breakpoints.
Y el input tuvo que mantener proporción y ritmo visual con el resto de la página.

Tipografía y ritmo

Apliqué la regla del 8 para refinar tipografías y espaciados globales.
Fue un atajo eficaz para dar orden visual sin perder flexibilidad.

Estas decisiones ayudaron a que todo respondiera mejor dentro de Figma Sites.
Y reforzaron la base de un sistema de diseño coherente.

Max-widths

Definí max-widths para evitar que el layout se estirara demasiado en pantallas ultra wide.
Eso mejoró la legibilidad y el control visual.

Diseñar con límites no fue una restricción, fue UX.
Y quedó claro por qué muchos principiantes lo descubren solo al verlo en acción.

Footer y pulido final

Cerré la web con un Footer simple y coherente con el resto de la landing.
Y luego llegó la fase de “cariño”: ajustar, corregir, equilibrar y limpiar.

Ese pulido final marcó la diferencia.
Transformó una landing funcional en una landing sólida de verdad.

Template

Te dejo un link para descargues el archivo de Figma Sites con el template de la landing. Si lo compartes cita la fuente juanpol.com, gracias!