Crear y gestionar de 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 hacer prototipos en Figma, puedes crear varios flujos para probar diferentes partes del recorrido de un usuario.

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

Crear un flujo de prototipos

Punto de inicio del flujo

El punto de inicio del flujo es donde empieza el flujo. Los puntos de inicio del flujo se establecen en los marcos de nivel superior.

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

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

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

1. Selecciona el marco inicial.
2. Selecciona la pestaña Prototipo de la barra lateral derecha.
3. Haz clic en el signo más en 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 de la barra lateral derecha.
3. Desde la sección Flujos, ve una lista de todos los puntos de inicio de flujo.
4. Coloca el cursor sobre el nombre de un flujo y haz clic en Seleccionar marco para navegar hasta el marco donde se encuentra el punto de inicio.

Añadir o quitar 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 los marcos que están directamente conectados al punto de inicio, así como los marcos que están conectados a través de otras interacciones.

Por ejemplo, todos los marcos morados de la imagen siguiente están incluidos en el flujo 1:

Para eliminar un marco de un flujo, elimina cualquier interacción de prototipo que conecte el marco con otros marcos 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 navega a un marco que está incluido en múltiples flujos, puede utilizar cualquier interacción en ese marco. Esto abre el flujo original para incluir cualquier conexión de ese marco.

Gestionar los flujos de prototipos

Editar el nombre del flujo

Una vez que hayas creado un flujo, Figma lo llamará flujo 1 de forma predeterminada y los flujos adicionales serán flujo 2, flujo 3, etc. Puedes cambiar el nombre de un flujo en cualquier momento.

Para cambiar el nombre de un flujo:

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

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

Añadir una descripción del flujo

Los nombres y descripciones de los flujos se muestran en la barra lateral izquierda cuando se está en la vista de presentación. Usa descripciones para proporcionar indicaciones a los participantes de las pruebas de usabilidad o contexto y documentación adicionales para tu equipo. Las descripciones se pueden formatear con texto en negrita, listas numeradas o con viñetas e hipervínculos.

Para añadir una descripción de flujo:

1. Selecciona el marco con el punto de inicio del flujo.
2. Selecciona la pestaña Prototipo de 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. Añade una descripción de texto enriquecido.
5. Haz clic en X para salir del panel Descripción y guardar la descripción.

Una vez añadida, 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 utiliza la primera conexión que hayas creado como punto de inicio del flujo. Puedes mover un punto de inicio a otro marco.

1. Busca el icono 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 de flujo:

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

Reproducir y compartir flujos de prototipos

Vista previa de los flujos

Puedes obtener una vista previa de los flujos de prototipo directamente 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 de la barra lateral derecha.
3. En la sección Flujos, puedes ver 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.

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

Copiar y compartir enlaces de flujo

Puedes compartir flujos de prototipo con otros usuarios 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 la vista de presentación, los usuarios 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 de la barra lateral derecha.
3. Pasa 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 de la barra lateral izquierda.
2. Haz clic en Compartir prototipo en la barra de herramientas.
3. Haz clic en Copiar enlace.