Prototipo de Figma: cómo funcionan los flujos interactivos

Un prototipo de Figma es una conexión interactiva entre frames de diseño. Permite hacer clic, tocar, abrir, seleccionar y recorrer una interfaz propuesta para que un equipo de producto experimente un flujo antes de construir la aplicación. No es la aplicación terminada ni implementa la lógica de negocio subyacente.

Esa distinción responde a la pregunta práctica «¿qué es un prototipo de Figma?». Un diseñador crea pantallas en Figma, define un punto de inicio, añade hotspots y triggers, y conecta esos elementos con frames de destino mediante acciones y transiciones. Un revisor puede ejecutar el resultado en el modo Present, probar el recorrido previsto e identificar pronto problemas de interacción o usabilidad.

Este artículo utiliza un ejemplo concreto: un flujo de onboarding de cuatro pasos en el que una persona ve opciones de intereses como Figma, React y Prototyping, presiona Continue, elige una opción de un menú desplegable y llega a una pantalla de confirmación.

Prototipo de Figma: el modelo mental

Piensa en un prototipo como un mapa dirigido, no como un producto programado en miniatura. Cada frame es un posible estado visual. Cada conexión indica: «Cuando ocurra este evento sobre este objeto, muestra ese estado». El prototipo permite observar la ruta sin fingir que dicha ruta ya está implementada.

Para el ejemplo de onboarding, dibuja cuatro frames móviles como una vista general representativa de la implementación completa de seis estados, con un tamaño ilustrativo de 390 × 844 px. Colócalos horizontalmente en el canvas, con una separación de 96 px, para que el flujo se lea de izquierda a derecha:

1. Get Started / vacío: la tarjeta de selección de intereses muestra opciones sin seleccionar y una acción Continue inactiva.
2. Get Started / seleccionado: Figma y React están seleccionados y Continue está habilitado.
3. Choose an option / abierto: un campo select está expandido y su menú es visible.
4. Confirmation: un mensaje breve de finalización confirma la elección del onboarding.

Las flechas entre estos frames son conexiones del prototipo. No representan llamadas a una API, escrituras en una base de datos, código de validación ni una pila de navegación de producción. Representan la experiencia que quieres probar: qué aparece después de que una persona ejecuta una acción visible.

Este modelo mental resulta útil tanto para diseñadores de producto como para ingenieros frontend. Los diseñadores pueden especificar un recorrido previsto sin sobredesarrollarlo. Los ingenieros pueden ver los estados visuales y las transiciones esperadas, al tiempo que identifican qué comportamientos todavía requieren implementación.

Anatomía de una interacción de prototipo de Figma

Una conexión individual es más fácil de analizar cuando nombras sus partes. Comienza con el frame de onboarding seleccionado y el botón Continue. El botón es la fuente de interacción; el siguiente frame de onboarding es el destino.

1. Frame inicial: el frame de 390 × 844 px llamado Onboarding / Interests / Selected.
2. Hotspot: el botón Continue principal situado cerca de la parte inferior de la tarjeta.
3. Trigger: On tap para un flujo móvil. Una prueba de escritorio podría usar una interacción equivalente a un clic.
4. Action: Navigate to.
5. Destination: Onboarding / Source / Closed, un frame con la siguiente pregunta y un campo select cerrado.
6. Transition: Instant para un cambio de estado directo, o una transición breve con Smart Animate si el movimiento comunica continuidad.

En Figma, selecciona la capa Continue, abre la pestaña Prototype, arrastra el controlador de conexión hasta el frame de destino y configura esos valores. Establece el frame seleccionado como punto de inicio del flujo. El primer frame del canvas no es automáticamente el punto de entrada correcto; la configuración del punto inicial forma parte de la definición del prototipo.

La tarjeta visible puede basarse en la referencia de selección múltiple de EmviUI proporcionada. Su recurso es una tarjeta de 334 × 325 px con el encabezado «Get Started», la instrucción «Select one option to continue», un enlace morado subrayado «Select All», chips morados seleccionados de Figma y React con marcas blancas, chips azul claro sin seleccionar para Wireframes, UX Design, UI Design, Prototyping y Css, una opción Software Engineering atenuada y un botón Continue oscuro. Trátala como una referencia de componente para recrear o adaptar en tu archivo de Figma, no como una captura de un prototipo.

Para una recreación móvil adaptable, coloca esa tarjeta dentro del frame de 390 px con márgenes laterales de 28 px, lo que proporciona un ancho de contenido de 334 px. Conserva la geometría ilustrada de 334 × 325 px de la tarjeta al presentar el espécimen de referencia. Si la adaptas para un diseño de producción, registra las nuevas dimensiones en lugar de mezclar silenciosamente el tamaño de referencia con el frame del prototipo.

Construye el flujo de onboarding como estados conectados

Ahora construye el ejemplo paso a paso y de forma deliberada. El objetivo no es que cada chip calcule realmente una selección. El objetivo es mostrar al participante cómo deberían verse la confirmación de selección, la continuación, la elección y la finalización.

1. Crea el frame vacío. Llámalo Onboarding / Interests / Empty. Usa un frame móvil blanco de 390 × 844 px. Coloca la tarjeta de onboarding, de 334 px de ancho, a 28 px del borde izquierdo y 64 px del borde superior. Usa una separación de 24 px entre la instrucción y la cuadrícula de chips, un espacio de 16 px entre las filas de opciones y una separación de 24 px antes de Continue. En este estado, mantén los chips sin seleccionar y muestra la acción principal con su tratamiento visual inactivo.
2. Crea el frame seleccionado. Duplica el frame vacío y llámalo Onboarding / Interests / Selected. Cambia los chips Figma y React al estilo seleccionado morado sólido, con marcas blancas. Mantén Wireframes, UX Design, UI Design, Prototyping y Css en azul claro y deja Software Engineering visiblemente atenuado. Cambia Continue al tratamiento oscuro habilitado. Este frame es el destino de la interacción de selección visible y la fuente de la siguiente navegación.
3. Conecta una selección. Si el objetivo es una demostración sencilla, para las variantes de componente, configura los hotspots de los chips Figma y React con On tap → Change to cuando esos chips sean variantes de un component set; usa Change to para cambiar la variante y Navigate to para llegar al frame seleccionado. Si el chip no está construido como componente, conecta su capa con el frame seleccionado duplicado mediante Navigate to. El resultado visual es similar, pero el enfoque basado en estados de componente es más fácil de mantener.

4. Conecta Continue. En el frame seleccionado, conecta Continue mediante On tap → Navigate to hacia el frame del select cerrado. Define la transición como Instant mientras validas la arquitectura de información. Puedes añadir una transición más expresiva después de aclarar la ruta.
5. Construye el estado del select cerrado. Llama al destino Onboarding / Source / Closed. Usa un campo select con etiqueta, un chevron cerrado, el placeholder «Select one option» y texto de ayuda debajo. Mantén los mismos márgenes laterales de 28 px y alinea el campo con el borde del contenido de la tarjeta.
6. Construye el estado abierto. Duplica el frame cerrado como Onboarding / Source / Open. Expande el menú debajo del campo y muestra la lista de opciones. Conecta el campo cerrado con este frame mediante On tap → Navigate to y después conecta una opción, como Figma, con un frame de valor seleccionado.
7. Completa la ruta. En el frame de valor seleccionado, reemplaza el placeholder por el valor elegido y conecta la siguiente acción Continue con Onboarding / Confirmation. El frame de confirmación puede usar un mensaje de finalización centrado y una única acción secundaria, pero no debe insinuar que realmente se creó un registro en una base de datos.

La referencia de select de EmviUI proporcionada resulta útil para la parte intermedia de este flujo. Muestra cuatro campos select etiquetados en una disposición de dos columnas a lo largo de tres filas; los controles cerrados muestran «Select one option» o el valor seleccionado «Mayoralven», con chevrons y «Description text» debajo. Dos selects centrales están expandidos en menús blancos con sombras suaves y opciones como Mayoralven, Linkedin, Behance, Dribbble, Figma, Codepen y Medium, acompañadas de iconos de colores reconocibles. Usa las apariencias cerrada y expandida como estados independientes del prototipo, en lugar de tratar una imagen estática como un dropdown funcional.

Usa estados de componente para mostrar feedback

Un prototipo se vuelve útil cuando comunica los estados que las personas necesitan comprender. Figma puede mostrar esos estados mediante variantes de componentes, propiedades de variantes, frames duplicados o combinaciones de estos recursos. No decide automáticamente si un usuario puede continuar.

Para la tarjeta del ejemplo, crea un componente de chip con una altura ilustrativa de 32 px, un padding horizontal de 12 px y un radio de esquina de 10 px. Define variantes llamadas Unselected, Selected y Disabled. Sigue la dirección visual de la referencia: azul claro para los chips sin seleccionar, morado sólido con una marca blanca para los seleccionados y un tratamiento visiblemente atenuado para Software Engineering. Conserva estos valores como un ejemplo explícito, no como una prescripción universal de componentes.

Crea un componente Continue con variantes Disabled, Enabled y Pressed. En el frame vacío, muestra Disabled. En el frame seleccionado, muestra Enabled. Enlaza la variante Enabled con el frame siguiente. Una variante Pressed puede usar una versión más oscura del tratamiento del botón para una breve vista previa de interacción, pero no demuestra que el sistema haya validado un número mínimo de selecciones.

Esta separación evita un fallo habitual en las revisiones: las partes interesadas aprueban un recorrido pulido mientras asumen que sus enlaces visuales representan el comportamiento completo del producto. Etiqueta las suposiciones exclusivas del prototipo en las descripciones de los frames o en las notas de handoff. Por ejemplo, escribe «El frame seleccionado representa el estado válido para la revisión; la validación de producción todavía debe implementarse».

Haz que el flujo sea legible y comprobable

El acabado visual no está separado de la comprensión del prototipo. Si el espaciado, el contraste o los cambios de estado son ambiguos, un participante puede terminar probando el diseño en lugar de la interacción prevista.

Usa la tarjeta de onboarding como un espécimen medible. En el frame de 390 × 844 px, mantén márgenes horizontales de 28 px, una posición superior de 64 px, 24 px entre la instrucción y la cuadrícula de opciones, 16 px entre las filas de chips, 16 px entre la última fila de chips y el texto de ayuda, y 24 px antes del botón Continue. Estos son valores de trabajo ilustrativos para este ejemplo. Su finalidad es hacer reproducible la construcción visual y dejar expuestas las zonas saturadas durante la revisión.

Comprueba cada estado con el mismo zoom y viewport:

• ¿Puede un revisor identificar el frame actual sin leer los nombres de las capas?
• ¿El chip morado seleccionado se diferencia claramente del chip azul claro sin seleccionar?
• ¿La opción Software Engineering atenuada parece claramente no disponible sin confundirse con texto normal?
• ¿La acción Continue oscura tiene suficiente contraste con la superficie que la rodea?
• Cuando se abre el dropdown, ¿el menú permanece alineado con el campo y evita cubrir la opción que el usuario necesita?
• ¿El frame de confirmación hace evidente el final de la ruta?

Ejecuta el prototipo desde el punto de inicio previsto, no desde el frame que esté seleccionado en el canvas. Prueba la ruta vacía, la ruta seleccionada, el menú abierto, la elección de una opción y la confirmación final. Después invita a otra persona a utilizarlo sin narrarle los clics previstos. Sus dudas suelen revelar una señal de interacción ausente o un estado engañoso más rápido que una revisión individual del canvas por parte de un diseñador.

Para los ingenieros, añade notas de interacción concisas a los frames relevantes. Indica el trigger, el destino esperado, la transición y el comportamiento pendiente de resolver. Una nota como Continue: habilitado después de una selección válida; validación y persistencia por definir es más accionable que «haz que esto funcione».

Qué valida un prototipo de Figma y qué no

Un prototipo de Figma es especialmente eficaz para validar la experiencia que una persona puede ver y ejecutar. En el ejemplo de onboarding, puede responder si el usuario entiende la instrucción «Select one option to continue», detecta los chips seleccionados, reconoce Continue como el siguiente paso, comprende el contenido del dropdown y sabe cuándo termina el flujo.

También puede revelar problemas de contenido y transición antes de que exista código. Los revisores pueden descubrir que «Figma» aparece tanto como interés como opción del dropdown, que una opción deshabilitada necesita explicación o que la pantalla de confirmación no indica qué ocurrió. Estos hallazgos son valiosos precisamente porque cambiar frames cuesta menos que modificar un producto publicado.

No valida el comportamiento real de carga, los errores del servidor, la autenticación, la persistencia, los permisos de datos, la latencia, las APIs de accesibilidad del navegador, la gestión del foco del teclado, los anuncios para lectores de pantalla ni el comportamiento adaptable en todos los dispositivos. Un prototipo puede representar estas cuestiones con frames y notas adicionales, pero representarlas no equivale a implementarlas.

Por tanto, el handoff debe contener dos capas: el artefacto interactivo y un límite de implementación. El artefacto demuestra la ruta prevista. El límite identifica responsabilidades de producción como las reglas de selección, el filtrado del menú, el manejo de errores, el orden del foco, la analítica y el almacenamiento de datos. Esto hace que el prototipo sea creíble, sin atribuir a Figma más de lo que realmente ha construido.

Para ampliar el contexto del flujo de trabajo, consulta qué son los componentes en Figma, cómo las variables de Figma apoyan los sistemas de diseño y el prototipado y cómo encajan las herramientas de prototipado de diseño UI en el trabajo de producto. La versión breve sigue siendo sencilla: conecta frames, define interacciones significativas, muestra los estados visuales necesarios, prueba la ruta y documenta el comportamiento que todavía corresponde a ingeniería.