Cómo usar Figma para diseñar una página web adaptable

Para responder a “cómo usar Figma para diseño web”, no empieces dibujando rectángulos aislados. Comienza con una estructura de página capaz de soportar distintos anchos de viewport, longitudes de contenido y estados de interacción. En este tutorial, el resultado concreto es una página de marketing adaptable de EmviUI: una sección de beneficios “¿Por qué EmviUI?”, tarjetas de clientes, un campo de email y un CTA oscuro “Quiero el kit”.

La referencia final utiliza una página blanca con paneles de contenido verdes, carbón y azules. En desktop, el frame principal tiene 1440px de ancho, 32px de padding lateral, un área de beneficios destacada, bloques de contenido alternos y un grupo de tarjetas. En mobile, el mismo contenido se convierte en una sola columna vertical. El objetivo visual no es reproducir una captura de pantalla mecánicamente, sino modelar las relaciones para que un desarrollador pueda implementar la página sin hacer suposiciones.

Mantén el archivo de trabajo organizado en cuatro páginas o secciones: Exploration, Layout, Components y Prototype. Nombra los frames según su propósito, no según su apariencia: Marketing / Why EmviUI, Section / Benefits y Card / Customer son más útiles que Frame 12.

1. Inspecciona el objetivo antes de abrir Auto Layout

Primero, describe la página como una jerarquía. La composición de referencia tiene una estructura de página, una región de navegación o introducción, una sección “¿Por qué EmviUI?”, contenido de beneficios, tarjetas de clientes, un área de captura de email y un CTA. La versión desktop puede colocar el texto junto a una ilustración o un grupo de tarjetas. La versión mobile debe conservar el orden de lectura en lugar de comprimir ambas columnas hasta dejarlas en anchos inutilizables.

Para el ejemplo práctico, crea dos frames de nivel superior:

• Desktop / 1440: ancho de 1440px, alto de 1748px, relleno blanco.
• Mobile / 390: ancho de 390px, alto inicial de trabajo de 1200px, relleno blanco.

Dentro de cada uno, utiliza un frame de contenido con 32px de padding izquierdo y derecho en desktop. Para el ejemplo mobile, usa 20px de padding horizontal. Los valores exactos son ilustrativos; su función es hacer visible la decisión adaptable. Por tanto, el ancho de contenido en desktop es de 1376px, mientras que el ancho de contenido mobile es de 350px.

Escribe el orden del contenido antes de aplicar estilos:

1. Etiqueta introductoria y título “¿Por qué EmviUI?”.
2. Párrafo de apoyo y tres beneficios con check.
3. Grupo de tarjetas de clientes o funcionalidades.
4. Campo de email y botón oscuro “Quiero el kit”.
5. Secciones de apoyo como “Biblioteca de componentes completa”, “Modo claro y oscuro” y “El poder de las variables de Figma”.

Esta es la primera prueba adaptable. Si el orden no está claro en el panel de capas, tampoco lo estará en la implementación. Un tutorial de diseño de interfaces en Figma puede complementar los fundamentos de la interfaz, pero este flujo se centra en convertir una composición de página en un diseño resistente.

2. Construye una página web en Figma con contenedores adaptables

Auto Layout es el motor estructural de esta página. Figma documenta que Auto Layout permite que los frames respondan dinámicamente a los cambios de contenido; puedes añadirlo seleccionando capas y usando Shift + A o el comando de la barra lateral. Usa flujo vertical para el contenido de página apilado, flujo horizontal para grupos contiguos y flujo de cuadrícula para tarjetas repetidas.

Empieza por el exterior y avanza hacia el interior. Selecciona el frame de contenido desktop y aplica Auto Layout vertical. Configura su ancho como Fill container dentro del frame desktop, su alto como Hug contents y su padding horizontal en 32px. Establece en 64px el espacio vertical entre las secciones principales. En mobile, conserva el flujo vertical, cambia el padding horizontal a 20px y reduce el espacio entre secciones a 48px.

Ahora crea el grupo hero o introductorio como otro frame vertical:

• Ancho: Fill container.
• Alineación: izquierda.
• Espacio entre elementos: 16px.
• Etiqueta eyebrow: texto de 14px.
• Título: interlineado de 56px con texto de 48px en desktop; interlineado de 44px con texto de 36px en mobile.
• Párrafo de apoyo: ancho máximo ilustrativo de 560px.

El frame de texto debe ajustarse a su contenido, mientras que la sección contenedora debe ocupar el ancho disponible. Esta distinción importa: un bloque de texto con ancho fijo puede generar un desbordamiento artificial, mientras que un bloque que se ajusta al contenido puede crecer cuando un traductor o editor modifica el copy.

No uses dimensiones fijas en todas partes. Las dimensiones fijas son apropiadas para un control acotado, como un botón de 44px de alto, pero no para un párrafo o una sección que debe responder al contenido. Usa dimensiones mínimas y máximas cuando necesites que una sección se expanda dentro de un rango deliberado.

3. Combina flujos verticales, horizontales y de cuadrícula

Las secciones web complejas se vuelven manejables cuando cada frame tiene una responsabilidad clara. Anidar frames con Auto Layout permite combinar disposiciones verticales, horizontales y de cuadrícula. En la página de EmviUI, la página exterior es vertical, la sección de beneficios es horizontal en desktop y las tarjetas de clientes utilizan una cuadrícula.

Construye la sección de beneficios en este orden:

1. Crea Section / Benefits con Auto Layout horizontal, un espacio de 24px y ancho Fill container.
2. Añade Benefits / Copy con flujo vertical, un espacio de 16px entre elementos y una asignación de ancho flexible.
3. Añade Benefits / Cards con flujo de cuadrícula, 16px de espacio entre tarjetas y el ancho restante.
4. Coloca tres tarjetas de clientes en la cuadrícula. Cada tarjeta tiene 220px de ancho en el ejemplo de 1440px, con 16px de espacio interno y 24px de padding.
5. En el breakpoint mobile, cambia la sección a flujo vertical y permite que cada hijo ocupe el ancho de contenido de 350px.

Cada tarjeta de cliente puede contener un círculo de avatar, nombre, ubicación y valor en dólares. Mantén una geometría repetible: avatar de 40px, espacio de 12px entre el avatar y el texto de identidad, espacio de 8px entre la identidad y el valor, y un radio de 12px. Usa contenido realista pero claramente ilustrativo, como “Maya Chen”, “Londres” y “$2,400”; los valores son datos de muestra para diseño, no datos de negocio.

Para el formulario, anida un frame horizontal que contenga un campo de email y el CTA en desktop. Configura el campo como Fill container y el botón con ancho fijo de 148px y alto de 44px. En mobile, cambia el formulario a flujo vertical: el campo ocupa 350px y el botón ocupa 350px. Es preferible a permitir que un botón de 148px quede junto a un campo que se ha vuelto demasiado estrecho.

4. Convierte el espaciado visual en reglas medibles

El espaciado debe registrarse como relaciones, no como impresiones. En este ejemplo, utiliza una escala compacta e ilustrativa: 12px entre una etiqueta y su campo, 16px entre controles dentro de una tarjeta, 24px entre una sección y sus tarjetas, y 32px entre el borde de la página y el contenido principal.

Aplica estos valores mediante espacios y padding de Auto Layout en lugar de posicionar capas manualmente. Si el título “¿Por qué EmviUI?” gana una segunda línea, el párrafo debe desplazarse hacia abajo automáticamente. Si cambia la etiqueta del email, el campo debe conservar su relación de 12px. Esa es la diferencia práctica entre diseñar una página web y dibujar un póster con el tamaño de un navegador.

5. Conecta los roles de color con tokens reutilizables

Cuando la geometría funcione, asigna el color según su rol. No nombres una capa “botón verde” si la misma acción podría aparecer en un tema oscuro. Nombra el rol como action/primary y después asígnalo a un token de color base. Para este espécimen, usa blanco #FFFFFF para la superficie de página, carbón #1F2937 para el CTA principal, azul #2563EB para el foco y los acentos informativos, verde #16A34A para acentos positivos personalizados, mientras que #22C55E queda reservado para el rol de estado de éxito, y valores de gris neutro para el texto secundario y los controles deshabilitados.

Crea un pequeño panel de tokens junto a la página:

• surface/default → #FFFFFF
• text/primary → #1F2937
• text/secondary → #6B7280
• action/primary → #1F2937
• focus/ring → #2563EB
• status/success → #22C55E
• surface/disabled → #E5E7EB

Usa el rol semántico en el componente, no el nombre de la paleta base. Así, un ejercicio posterior de tematización se convierte en un remapeo controlado, en lugar de una búsqueda de cada rectángulo carbón. La referencia de EmviUI también muestra una presentación clara y oscura, así que mantén los nombres de los tokens independientes de un único tema visual. Para profundizar en el flujo de tokens, consulta cómo usar las variables de Figma para sistemas de diseño.

6. Verifica el CTA y los estados listos para prototipar

Antes de conectar las interacciones del prototipo, convierte el CTA en un componente con variantes explícitas. Usa una geometría compartida: alto de 44px, radio de 8px, padding horizontal de 20px, sin icono y tamaño de texto de 16px. Después crea cuatro estados visuales:

• Activado/predeterminado: relleno carbón #1F2937 y texto blanco #FFFFFF.
• Hover: carbón más oscuro o ligeramente modificado, conservando las mismas dimensiones.
• Presionado: relleno #111827, con el mismo radio y padding.
• Deshabilitado: relleno #E5E7EB y texto #9CA3AF.

Añade un anillo de foco azul de 2px usando #2563EB, con un offset de 2px. La revisión de estados debe responder una pregunta: ¿qué cambia y qué no debe cambiar? El color puede cambiar; la posición de la etiqueta, el radio y la geometría general del botón deben mantenerse estables. Esto hace que la interacción sea comprensible antes de conectar el flujo del prototipo. Para distinguir entre diseños estáticos y flujos conectados, consulta cómo funcionan los prototipos de Figma.

Construye también la captura de email como componente. Dale un alto de 48px, radio de 12px, padding horizontal de 16px y una etiqueta visible encima. Incluye ejemplos predeterminado, enfocado, con error y completado si la página los requiere. Mantén el foco del ejemplo: el campo predeterminado y el CTA “Quiero el kit” bastan para verificar el flujo principal.

7. Añade feedback de finalización y ejecuta una revisión adaptable

Después de la acción del CTA, muestra una tarjeta de notificación en lugar de dejar que el usuario deduzca qué ocurrió. Constrúyela como una tarjeta vertical con 16px de padding, radio de 12px y cuatro partes: un icono de check verde, el título “Prototipo guardado”, un texto de apoyo como “Tu página adaptable está lista para revisión” y una acción azul “Continuar”. Mantén el icono, el título, el texto de apoyo y la acción en capas separadas para poder reutilizar la tarjeta.

Prueba la página final en los dos anchos de trabajo y en un ancho intermedio, como 768px. Cambia el tamaño de los frames padre, haz que el título ocupe dos líneas y sustituye el placeholder del email por una cadena más larga. Busca cuatro modos de fallo:

1. Clipping inesperado: comprueba si un padre con alto fijo o una configuración de clipping oculta el texto expandido.
2. Controles comprimidos: cambia un formulario horizontal a flujo vertical cuando el campo ya no pueda mantener un ancho útil.
3. Alturas desiguales de tarjetas: usa una estructura interna consistente y permite que el contenido se ajuste, en lugar de forzar alturas arbitrarias.
4. Estilos desconectados: sustituye colores locales y espaciados puntuales por los tokens semánticos y los espacios documentados.

Usa esta lista final antes de entregar el archivo al equipo de ingeniería:

• El contenido desktop utiliza 32px de padding lateral y el contenido mobile utiliza 20px en el espécimen.
• Las secciones principales usan Auto Layout vertical u horizontal de forma intencional.
• Las tarjetas de clientes usan flujo de cuadrícula en desktop y una columna en mobile.
• El texto, las tarjetas y los controles del formulario responden a los cambios de contenido.
• Los estados del CTA comparten 44px de alto, 8px de radio y 20px de padding horizontal.
• Los tokens identifican roles como text/primary y action/primary.
• La tarjeta de notificación confirma la finalización y ofrece una siguiente acción.

El resultado es un archivo de diseño web en Figma que comunica comportamiento, no solo apariencia. Los ingenieros pueden inspeccionar la jerarquía de frames, los valores de espaciado, los colores y los estados; los diseñadores pueden modificar el contenido sin reconstruir la página; y los revisores pueden evaluar el comportamiento desktop y mobile desde el mismo modelo estructural.

Referencias

La guía de Auto Layout de Figma documenta el comportamiento adaptable del contenido, los flujos verticales, horizontales y de cuadrícula, las configuraciones de redimensionamiento y los frames anidados con Auto Layout.