Crea y gestiona los flujos de prototipos

Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes

Requiere acceso de puede editar a un archivo

Al crear prototipos en Figma, puedes crear múltiples flujos para probar diferentes partes del recorrido de un usuario.

Un flujo es una colección de marcos conectados que conforman una experiencia de prototipo único. Por ejemplo, puedes crear un prototipo para una aplicación de compras que incluya un flujo para la creación de cuentas, otro para explorar artículos y otro para el proceso de pago; todo en una sola página.

Crear un flujo de prototipo

Puntos de inicio del flujo

El punto de inicio del flujo es el lugar donde comienza el flujo. Se establece en los marcos de nivel superior.

Cuando agregas una conexión entre dos marcos sin conexiones existentes, Figma creará un punto de inicio en el marco de nivel superior donde comenzó la conexión. Los puntos de inicio del flujo se muestran en el lienzo con un ícono azul de vista previa y el nombre del flujo.

Un marco solo puede tener un punto de inicio del flujo.

También puedes crear manualmente un punto de inicio del flujo.

1. Selecciona el marco inicial.
2. Selecciona la pestaña Prototipo en la barra lateral derecha.
3. Haz clic en el signo más de la sección Punto de inicio del flujo.

Para ver todos los puntos de inicio de flujo en la página actual:

1. Deselecciona cualquier objeto haciendo clic en una parte vacía del lienzo.
2. Selecciona la pestaña Prototipo en la barra lateral derecha.
3. En la sección Flujos, accede a una lista de todos los puntos de inicio del flujo.
4. Coloca el cursor sobre el nombre de un flujo y haz clic en Seleccionar marco para ir al marco donde se encuentra el punto de inicio.

Agrega o elimina los marcos de un flujo

Una vez que se tiene un punto de inicio del flujo, el resto del flujo consiste en cualquier marco que esté conectado al punto de inicio con interacciones de prototipado. Esto incluye marcos que están conectados directamente al punto de inicio, así como marcos que están conectados a través de otras interacciones.

Por ejemplo, todos los marcos morados de la imagen a continuación están incluidos en Flujo 1:

Para eliminar un marco de un flujo, elimina cualquier interacción del prototipo que conecte el marco con otros del flujo.

Los marcos se pueden incluir en varios flujos. Por ejemplo, el marco azul de la imagen siguiente se incluye tanto en el Flujo 1 como en el Flujo 2:

Una vez que un usuario se dirige a un marco que está incluido en múltiples flujos, puede emplear cualquier interacción en ese marco. Esto abre el flujo original para agregar cualquier conexión de ese marco.

Administrar los flujos de prototipos

Editar el nombre del flujo

Después de haber creado un flujo, Figma lo llamará Flujo 1 de forma predeterminada y los flujos adicionales serán Flujo 2, Flujo 3 y así sucesivamente. Puedes cambiar el nombre de un flujo en cualquier momento.

Para renombrar un flujo:

1. Selecciona el marco inicial.
2. Selecciona la pestaña Prototipo en la barra lateral derecha.
3. En la sección Punto de inicio del flujo, selecciona el campo de nombre del flujo.
4. Introduce un nuevo nombre para el flujo.

Una vez renombrado, el nombre del flujo se muestra en el ícono azul del punto de inicio del marco y en la barra lateral izquierda en la vista de presentación.

Agregar descripción de flujo

Los nombres y las descripciones de los flujos se muestran en la barra lateral izquierda cuando se está en la vista de presentación. Usa descripciones para brindar indicaciones a los participantes de la prueba de uso o contexto y documentación adicionales para su equipo. Se les puede aplicar formato a las descripciones con texto en negrita, listas numeradas o con viñetas e hipervínculos.

Para agregar una descripción de flujo:

1. Selecciona el marco con el punto de inicio del flujo.
2. Selecciona la pestaña Prototipo en la barra lateral derecha.
3. En la sección Punto de inicio del flujo, haz clic en Editar descripción junto al nombre del flujo que deseas editar.
4. Agrega una descripción de texto enriquecida.
5. Haz clic en X para salir del panel de descripción y guardar la descripción.

Una vez agregada, la descripción se muestra en la barra lateral izquierda en la vista de presentación.

Mover el punto de inicio del flujo

De forma predeterminada, Figma emplea la primera conexión que crees como punto de inicio del flujo. Puedes mover un punto de inicio a otro marco.

1. Busca el ícono azul del punto de inicio en el lienzo.
2. Haz clic y arrastra el nombre del flujo a un nuevo marco de inicio.

Eliminar el punto de inicio del flujo

Para eliminar un punto de inicio del flujo:

1. Selecciona el marco con el punto de inicio del flujo.
2. Selecciona la pestaña Prototipo en la barra lateral derecha.
3. En la sección Punto de inicio del flujo, haz clic en Eliminar punto de inicio.

Reproducir y compartir los flujos de prototipos

Vista previa de flujos

Puedes obtener una vista previa de los flujos de prototipo en el editor con una vista previa en línea.

1. Deselecciona cualquier objeto haciendo clic en una parte vacía del lienzo.
2. Selecciona la pestaña Prototipo en la barra lateral derecha.
3. En la sección Flujos, ve una lista de todos los flujos.
4. Coloca el cursor sobre el nombre de un flujo y haz clic en Vista previa para abrir la vista previa en línea.

En la vista previa en línea, navega por el flujo activando cada interacción del prototipo.

Copiar y compartir vínculos de flujo

Puedes compartir flujos de prototipos con otros para obtener comentarios sobre flujos o recorridos de usuario específicos. Cuando compartes un flujo de prototipo, los usuarios pueden reproducir el prototipo en la vista de presentación. Desde esta vista, también pueden seleccionar cualquier otro flujo para reproducir.

Desde el lienzo:

1. Selecciona el marco con el punto de inicio del flujo.
2. Selecciona la pestaña Prototipo en la barra lateral derecha.
3. Coloca el cursor junto al encabezado Punto de inicio del flujo.
4. Haz clic en Copiar enlace.

Desde la vista de presentación:

1. Selecciona el flujo que deseas compartir en la barra lateral izquierda.
2. Haz clic en Compartir prototipo en la barra de herramientas.
3. Haz clic en Copiar enlace.