Diseño Responsivo y Prototipado en Figma

Hasta ahora aprendiste a crear diseños estáticos en Figma con componentes y Auto Layout. En esta lección vas a dar el salto a diseño responsivo (que se adapta a diferentes tamaños de pantalla) y prototipado interactivo (que simula una app real). Estas dos habilidades son las que más buscan las empresas en diseñadores digitales.

¿Qué es Diseño Responsivo?

Un diseño responsivo se adapta a diferentes tamaños de pantalla: desktop, tablet y mobile. En desarrollo web, esto se logra con CSS media queries. En Figma, lo simulamos con Constraints y Auto Layout.

Constraints (Restricciones)

Las constraints definen cómo se comporta un elemento hijo cuando su frame padre cambia de tamaño.

Constraints horizontales:

• Left: El elemento mantiene su distancia al borde izquierdo
• Right: Mantiene distancia al borde derecho
• Left & Right: Se estira horizontalmente (mantiene ambas distancias)
• Center: Se mantiene centrado horizontalmente
• Scale: Se escala proporcionalmente

Constraints verticales:

• Top: Mantiene distancia al borde superior
• Bottom: Mantiene distancia al borde inferior
• Top & Bottom: Se estira verticalmente
• Center: Se mantiene centrado verticalmente
• Scale: Se escala proporcionalmente

Ejemplo práctico: Header responsivo

1. Creá un frame de Desktop (1440x900)
2. Agregá un header de ancho completo
3. Logo a la izquierda: Constraints → Left, Top
4. Menú a la derecha: Constraints → Right, Top
5. Barra de búsqueda en el centro: Constraints → Left & Right, Top
6. Ahora redimensioná el frame: el header se adapta correctamente

Combinando Constraints con Auto Layout

La verdadera magia surge cuando combinás ambos:

Auto Layout controla cómo se organizan los elementos internos.
Constraints controla cómo se comporta el frame completo al redimensionar.

Ejemplo: Grid de cards responsivo

1. Creá un frame contenedor con Auto Layout
   • Dirección: Horizontal
   • Wrap: activado
   • Spacing: 24px
   • Padding: 32px
2. Agregá cards dentro
   • Cada card: Width → Fill Container (o un ancho mínimo)
3. Redimensioná el frame contenedor
4. Las cards se reorganizan automáticamente en nuevas filas cuando no hay espacio

Breakpoints: Diseñando para Múltiples Dispositivos

En diseño web real, necesitás crear versiones para diferentes tamaños:

Workflow para diseño responsivo:

1. Diseñá primero para mobile ("Mobile First")
2. Expandí a tablet: ¿qué cambia?
3. Expandí a desktop: ¿qué más cambia?
4. Creá un frame para cada breakpoint
5. Mantené los mismos componentes, solo cambiá el layout

¿Qué cambia entre breakpoints?

• Cantidad de columnas (1 en mobile → 2 en tablet → 4 en desktop)
• Tamaño de tipografía (más grande en desktop)
• Visibilidad de elementos (menú hamburguesa en mobile, menú expandido en desktop)
• Padding y margins (más amplios en desktop)
• Imágenes (aspect ratio puede cambiar)

¿Qué es un Prototipo?

Un prototipo es una simulación interactiva de tu diseño. Permite clickear botones, navegar entre pantallas, ver animaciones y transiciones. Es la forma de "probar" tu diseño antes de que un programador escriba una sola línea de código.

Cambiando al Modo Prototype

1. En el panel derecho, clickeá la pestaña "Prototype"
2. Ahora cuando seleccionás un elemento, aparece un punto azul a su derecha
3. Ese punto es el "noodle" (conexión) que une una acción con un destino

Crear una Interacción

1. Seleccioná el elemento que el usuario va a interactuar (botón, link, card)
2. En modo Prototype, arrastrá el punto azul hacia el frame de destino
3. Se crea una conexión con estas propiedades:

Trigger (Disparador):

• On Click: Al hacer click
• On Drag: Al arrastrar
• While Hovering: Mientras el mouse está encima
• While Pressing: Mientras mantiene presionado
• After Delay: Después de un tiempo
• Mouse Enter/Leave: Cuando el mouse entra o sale

Action (Acción):

• Navigate to: Ir a otro frame
• Open Overlay: Abrir una capa encima (para modales, menús)
• Swap With: Intercambiar por otro componente (para variantes)
• Back: Volver a la pantalla anterior
• Close Overlay: Cerrar la capa abierta
• Open Link: Abrir una URL externa

Animation (Animación):

• Instant: Sin transición
• Dissolve: Fundido cruzado
• Smart Animate: Animación inteligente basada en capas con el mismo nombre
• Move In/Out: Entrada/salida desde un borde
• Push: La nueva pantalla empuja a la actual
• Slide In/Out: Deslizamiento

Smart Animate: La Magia de Figma

Smart Animate es la función de animación más potente. Detecta capas con el mismo nombre entre dos frames y anima automáticamente los cambios de posición, tamaño, color, opacidad y rotación.

Ejemplo: Animación de card expandida

1. Frame 1: Card pequeña con thumbnail, título y preview
2. Frame 2: Card expandida con imagen grande, título, descripción completa
3. Las capas deben tener los MISMOS NOMBRES en ambos frames
4. Conectá: On Click → Navigate to Frame 2 → Smart Animate
5. Figma anima automáticamente la expansión de la card

Tips para Smart Animate:

• Los nombres de las capas DEBEN coincidir exactamente
• Funciona con: posición, tamaño, rotación, opacidad, color de relleno
• No funciona con: cambios de contenido de texto, filtros de imagen
• Duración recomendada: 200-400ms para microinteracciones, 300-600ms para transiciones de pantalla

Overlays (Capas Superpuestas)

Los overlays son perfectos para modales, menús desplegables, tooltips y bottom sheets.

Crear un overlay:

1. Diseñá el contenido del overlay en un frame separado
2. En una pantalla, seleccioná el botón que abre el overlay
3. Arrastrá la conexión al frame del overlay
4. En Action, elegí "Open Overlay"
5. Configurá:
   • Position: Dónde aparece (centro, arriba, abajo, manual)
   • Background: Fondo oscuro detrás (toggle on/off)
   • Close on click outside: Cerrar al clickear fuera

Scroll en Prototipos

Para pantallas que son más largas que el viewport:

1. Creá un frame con el tamaño del dispositivo (ej: 393x852 para iPhone)
2. Dentro, creá un frame más largo con todo el contenido
3. Seleccioná el frame exterior
4. En Prototype, configurá "Overflow behavior" → "Vertical scrolling"
5. El prototipo ahora permite scroll

Flows (Flujos)

Un flow es un punto de inicio para tu prototipo. Podés tener múltiples flows en un archivo.

Crear un flow:

1. En modo Prototype, seleccioná un frame
2. Click en "Starting point" que aparece arriba del frame
3. Nombrá el flow: "Onboarding", "Checkout", "Login"

Presentar el Prototipo

1. Click en el botón "Play" (▶) arriba a la derecha
2. Se abre una nueva pestaña con tu prototipo interactivo
3. Hacé click en los elementos conectados para navegar
4. Presioná "R" para reiniciar
5. Compartí el link del prototipo: "Share Prototype"

📺 Prototipado en Figma - Tutorial completo desde cero

Creá un prototipo básico de una app ficticia (ej: app de recetas):

Pantalla 1 - Home:

• Header con logo y menú
• Lista de 3 cards de recetas
• Barra de navegación inferior

Pantalla 2 - Detalle de receta:

• Imagen grande arriba
• Título, descripción, ingredientes
• Botón "Guardar"
• Botón de volver

Pantalla 3 - Modal de confirmación:

• Overlay centrado
• Texto "¡Receta guardada!"
• Botón "OK"

Conexiones:

• Click en card → Navegar a Pantalla 2 (Smart Animate)
• Click en "Guardar" → Abrir Overlay Pantalla 3 (Dissolve)
• Click en "OK" → Cerrar Overlay
• Click en "Volver" → Back

Resumen

En la próxima lección, vamos a explorar las funcionalidades avanzadas de Figma: plugins, la comunidad, Dev Mode y cómo preparar tus diseños para desarrollo.