Un prototipo interactivo en Figma conecta tus pantallas diseñadas para simular la navegación real de una app o sitio web, sin escribir una sola línea de código.
Esto te permite mostrar el flujo completo a un cliente como Liverpool o a un equipo de desarrolladores antes de construir nada. Es una de las herramientas más poderosas del proceso de diseño.
El modo Prototype
Figma tiene tres pestañas en el panel derecho: Design, Prototype e Inspect.
Para empezar a prototipar, selecciona la pestaña Prototype. El canvas cambia de modo y ahora puedes crear conexiones entre frames.
Cada conexión se llama interacción y tiene tres partes principales:
- Trigger (Disparador): qué acción del usuario activa la transición. Ejemplo: un clic, un hover, una tecla.
- Action (Acción): qué sucede cuando se activa. Ejemplo: navegar a otra pantalla.
- Animation (Animación): cómo se ve la transición. Ejemplo: deslizar hacia la izquierda.
Estructura de una interacción
Una interacción en Figma sigue este formato:
[Elemento origen] → Trigger → Action → [Frame destino] + Animation
Ejemplo básico:
Botón "Comprar" → On Click → Navigate To → Pantalla_Carrito + Slide Left
Esto significa: cuando el usuario hace clic en el botón "Comprar", Figma muestra la pantalla del carrito con una animación de deslizamiento hacia la izquierda.
Cómo crear tu primera conexión
Paso 1. Diseña al menos dos frames. Por ejemplo: Pantalla_Inicio y Pantalla_Producto.
Paso 2. Selecciona el elemento que actuará como botón. Puede ser un rectángulo, un componente o un grupo.
Paso 3. Abre la pestaña Prototype en el panel derecho.
Paso 4. Pasa el cursor sobre el elemento seleccionado. Aparece un círculo azul en el lado derecho del elemento. Arrastra ese círculo hasta el frame destino.
Paso 5. Se abre el panel de configuración de la interacción. Elige el Trigger, la Action y la Animation.
Paso 6. Haz clic en Present (el ícono de reproducción en la barra superior) para ver el prototipo en acción.
Ejemplo 1: Flujo de inicio de sesión (app estilo FEMSA)
Supón que diseñas una app interna para los repartidores de FEMSA. Tienes tres pantallas:
Pantalla_Login— formulario con campo de usuario y contraseñaPantalla_Dashboard— vista principal después de entrarPantalla_Error— mensaje de error si la contraseña es incorrecta
Conexiones que debes crear:
| Elemento origen | Trigger | Action | Frame destino | Animación |
|---|---|---|---|---|
| Botón "Entrar" | On Click | Navigate To | Pantalla_Dashboard | Dissolve |
| Botón "Contraseña incorrecta" | On Click | Navigate To | Pantalla_Error | Smart Animate |
| Botón "Intentar de nuevo" | On Click | Navigate To | Pantalla_Login | Slide Right |
Este flujo cubre el camino feliz (login exitoso) y el camino de error. Un desarrollador puede entender el comportamiento esperado sin ninguna reunión adicional.
Ejemplo 2: Carrito de compras (estilo Mercado Libre)
Diseña un flujo de compra con cuatro pantallas:
Pantalla_Catalogo— lista de productosPantalla_Detalle— ficha del producto con precio ($1,200) y botón "Agregar al carrito"Pantalla_Carrito— resumen con total ($3,600 por tres unidades)Pantalla_Confirmacion— mensaje de pedido exitoso
Conexiones:
| Elemento origen | Trigger | Action | Frame destino | Animación |
|---|---|---|---|---|
| Tarjeta de producto | On Click | Navigate To | Pantalla_Detalle | Slide Left |
| Botón "Agregar al carrito" | On Click | Navigate To | Pantalla_Carrito | Slide Left |
| Botón "Pagar $3,600" | On Click | Navigate To | Pantalla_Confirmacion | Dissolve |
| Flecha "Regresar" | On Click | Navigate To | Pantalla_Catalogo | Slide Right |
Este prototipo simula una compra completa. Puedes compartir el enlace con el equipo de producto de Mercado Libre para validar el flujo antes de desarrollarlo.
Tipos de triggers más usados
| Trigger | Cuándo usarlo |
|---|---|
| On Click | Botones, tarjetas, íconos. El más común. |
| On Hover | Menús desplegables, tooltips en desktop. |
| On Drag | Carruseles, sliders, drawers laterales. |
| After Delay | Pantallas de splash, loaders automáticos. |
| Key / Gamepad | Prototipos con atajos de teclado. |
Para apps móviles, usa casi siempre On Click. Para prototipos web más avanzados, combina On Hover con On Click.
Tipos de animaciones
| Animación | Efecto visual |
|---|---|
| Instant | Sin transición. Cambio abrupto. |
| Dissolve | Fundido entre pantallas. |
| Smart Animate | Figma detecta elementos similares y los anima automáticamente. |
| Slide Left / Right | Deslizamiento horizontal. Ideal para flujos de pasos. |
| Push | La pantalla actual "empuja" a la siguiente. |
| Move In / Move Out | La nueva pantalla entra desde un lado. |
Smart Animate es la más poderosa. Si el botón "Comprar" existe en la pantalla actual y en la pantalla destino, Figma lo anima con movimiento suave. Esto hace que el prototipo se vea muy cercano al producto final.
Cómo definir el Starting Point
Cuando compartes un prototipo, Figma necesita saber desde qué pantalla comienza. Esto se llama Starting Point o punto de inicio.
Para definirlo: selecciona el frame inicial → en la pestaña Prototype → activa la opción Starting Point que aparece en la sección "Flow".
Puedes tener múltiples flujos en el mismo archivo. Por ejemplo, un flujo para el proceso de compra y otro para el proceso de registro. Cada flujo tiene su propio Starting Point.
Cómo compartir el prototipo
Haz clic en el botón Share prototype en la barra superior mientras estás en modo Present. Copia el enlace y compártelo.
Cualquier persona con el enlace puede ver y navegar el prototipo desde su navegador, sin necesidad de tener Figma instalado. Esto es ideal para presentarlo a clientes como Bimbo o a stakeholders no técnicos.
También puedes activar comentarios para que el cliente deje retroalimentación directamente sobre el prototipo.
Errores comunes
Error 1: Conectar elementos sueltos en lugar de frames completos.
Siempre verifica que tus pantallas sean frames (no grupos). Figma solo permite usar frames como destino de navegación. Si tu pantalla es un grupo, conviértela a frame con Ctrl+Alt+G (Windows) o Cmd+Option+G (Mac).
Error 2: Olvidar el botón de regreso. Muchos diseñadores crean el flujo hacia adelante pero olvidan conectar el botón de regresar. En un prototipo sin botón de regreso, el usuario queda "atrapado" en una pantalla. Siempre agrega conexiones de retorno.
Error 3: Usar Smart Animate sin nombres consistentes.
Smart Animate funciona comparando capas con el mismo nombre entre dos frames. Si en Pantalla_Detalle tienes una capa llamada Imagen_Producto y en Pantalla_Carrito se llama Foto_Item, Figma no puede animarla. Usa nombres idénticos en capas que quieras animar con transición suave.
Error 4: No definir el Starting Point. Si compartes el enlace del prototipo sin definir un Starting Point, Figma puede mostrar una pantalla aleatoria al abrirlo. Siempre define el punto de inicio antes de compartir.
Resumen de configuración de una interacción
| Parámetro | Opciones frecuentes | Recomendación para móvil |
|---|---|---|
| Trigger | On Click, On Hover, After Delay | On Click |
| Action | Navigate To, Back, Scroll To | Navigate To |
| Animation | Smart Animate, Slide, Dissolve | Smart Animate o Slide |
| Easing | Ease In, Ease Out, Linear | Ease Out |
| Duration | 100ms – 500ms | 300ms |
Una duración de 300ms es el estándar de la industria para transiciones móviles. Menos de 100ms se siente abrupto. Más de 500ms se siente lento.
Puntos clave
- Activa el modo Prototype en el panel derecho para crear conexiones entre frames.
- Una interacción tiene tres partes: Trigger, Action y Animation. Configura las tres para cada conexión.
- Usa Smart Animate cuando quieras que elementos compartidos entre pantallas tengan transiciones suaves. Los nombres de las capas deben ser idénticos.
- Define siempre el Starting Point de tu flujo antes de compartir el enlace con clientes o desarrolladores.
- Agrega conexiones de regreso en todas las pantallas para que el usuario pueda navegar en ambas direcciones durante la revisión del prototipo.