Antes de empezar
Quién puede utilizar esta función
Usuarios en cualquier equipo o plan pueden reproducir prototipos
Cualquiera que tenga acceso de visualización a un archivo o prototipo puede reproducir prototipos. Cualquiera puede ajustar las opciones de visualización en la vista de presentación.
Los prototipos reproducen la interacción de los usuarios con tus diseños, por lo que puedes ver y probar cómo funcionan antes de pasar a la fase de desarrollo. En Figma, crea prototipos directamente en el lienzo. A continuación, reprodúcelos para ver las interacciones y animaciones del prototipo en acción.
Antes de reproducir un prototipo, prepara el diseño para que el prototipo se reproduzca como deseas.
A continuación, elige cómo te gustaría reproducir el prototipo:
- Vista previa: reproduce el prototipo directamente en el editor, con una vista previa en línea. Observa cómo funciona el prototipo a medida que lo creas, todo en la misma pestaña.
- Presentación: reproduce el prototipo en la vista de presentación, en una pestaña separada. Comparte el prototipo con otras personas u obsérvalo en un dispositivo específico.
Prepare prototipos para reproducir
La forma en que se configuran los marcos y las conexiones en el lienzo influye en cómo se reproducen los prototipos:
- El diseño debe estar dentro de un marco para poder obtener una vista previa o presentarlo.
- Si hay conexiones de creación de prototipos, Figma solo mostrará los marcos con conexiones mientras se reproduce el prototipo. Haz clic en cada pantalla o interactúa con cualquier zona activa.
- Si no hay conexiones de creación de prototipos, puedes navegar por los marcos desde la página actual.
- Configura un punto de inicio del flujo para establecer el punto de partida del recorrido del usuario. Puedes configurar varios puntos de inicio del flujo.
- Para la vista de presentación, configura el tipo de dispositivo, el punto de inicio y el color de fondo del prototipo en la configuración del prototipo.
Una vez que hayas preparado el prototipo para reproducirlo, elige entre Vista previa o Presentación.
Vista previa de un prototipo
Usa la vista previa en línea para reproducir tu prototipo directamente en el lienzo junto a tu diseño. Con la vista previa en línea, cualquier cambio de diseño se refleja inmediatamente en la vista previa, para que puedas ver los cambios en tiempo real. Cuando haces clic en otro marco en el lienzo, la vista previa salta a ese marco.
Para abrir la vista previa en línea, haz lo siguiente:
- Haz clic en Vista previa en la barra de herramientas superior
- Haz clic en el icono de vista previa en cualquier punto de inicio del flujo
- Usa ⇧ Mayús Espacio en tu teclado
Desde la vista previa en línea, puedes:
- Usar las flechas izquierda y derecha para navegar hacia atrás o hacia adelante por el prototipo.
- Reiniciar el prototipo desde el último marco seleccionado en el lienzo. También puedes pulsar R para reiniciar.
- Abre el menú de desbordamiento para elegir entre diferentes opciones de escalado para tu prototipo.
- Abre el prototipo en la vista de presentación en una nueva pestaña.
- Haz clic en la X para cerrar la vista previa en línea.
- Redimensiona la vista previa haciendo clic y arrastrando el borde de la ventana de vista previa. Mantén pulsada la tecla ⇧ Mayús para escalar proporcionalmente.
Opciones del menú de desbordamiento
El menú de desbordamiento para el visualizador en línea contiene diferentes opciones de escalado y visualización para tu prototipo. Las opciones disponibles variarán en función del dispositivo prototipo seleccionado. Algunas de estas opciones se solapan.
Ajustar al ancho
Escala el prototipo para que ocupe todo el ancho de la pantalla. Disponible solo si el dispositivo prototipo está configurado como Sin dispositivo o Presentación en la página.
Adaptativo
El contenido del prototipo se redimensionará y rediseñará a medida que el visualizador de prototipos cambia de tamaño según las restricciones y las propiedades de disposición automática aplicadas al diseño. Esto te permite ver los diseños en diferentes tamaños de ventana y comprobar su comportamiento adaptativo. Para que Adaptativo funcione, deben aplicarse restricciones y ajustes de disposición automática al diseño.
Seguir el prototipo
El marco seleccionado en el lienzo se actualiza para reflejar el marco actual en la vista previa en línea. A medida que navegas por el prototipo en la vista previa, tu selección y posición en el lienzo seguirán apareciendo.
Redimensionar la ventana/dispositivo al 100 %
Redimensiona el visualizador o dispositivo al 100 % del tamaño del marco.
Mantener la relación de aspecto
La ventana del visualizador en línea se redimensiona para coincidir con la relación de aspecto del marco actual. Disponible solo cuando un dispositivo prototipo está configurado como Sin dispositivo.
Mostrar el marco del dispositivo
Muestra u oculta el marco del dispositivo físico. Disponible solo cuando se selecciona un marco del dispositivo prototipo.
Presenta un prototipo
Utiliza la vista de presentación para reproducir tus prototipos en una nueva pestaña. Puedes interactuar con zonas activas o introducir atajos de teclado dentro de tu prototipo.
Para abrir un prototipo en la vista de presentación en el escritorio, haz clic en Presentar en la barra de herramientas, o utiliza el atajo de teclado:
- Mac:⌘ Comando⌥ OpciónIntro
- Windows: ControlAltIntro
Figma mostrará el dispositivo sobre el color de fondo que seleccionaste.
Consejo: ¿Quieres compartir tu prototipo con otras personas? Más información sobre cómo compartir prototipos.
¿Quieres reproducir tu prototipo en el móvil? Más información sobre cómo ver prototipos en un dispositivo móvil.
Disposición de la vista de presentación
La vista de presentación contiene varias opciones que puedes elegir para interactuar con un prototipo.
Desde el lado izquierdo de la barra de herramientas, puedes:
- Hacer clic en el logo de Figma para ir al explorador de archivos.
- Hacer clic en para mostrar y ocultar la barra lateral izquierda, donde puedes seleccionar flujos y ver sus descripciones.
- Hacer clic en para entrar en el modo de comentarios y añadir comentarios al prototipo.
Desde el lado derecho de la barra de herramientas, puedes:
- Hacer clic en la flecha junto a tu avatar y elegir destacarte o seguir a un presentador.
- Compartir el prototipo.
- Abrir el menú de opciones para seleccionar diferentes configuraciones para el prototipo.
- Hacer clic en para entrar en modo de pantalla completa.
Desde la parte inferior de la vista de presentación, puedes:
- Usar las flechas izquierda y derecha para moverte entre pantallas.
- Usar el conmutador para cambiar a un dispositivo similar y acceder a otras opciones de escalada. Disponible si se ha seleccionado un marco del dispositivo para la página.
- Hacer clic en Reiniciar o presionar R para volver al punto de inicio del flujo actual. Si no hay flujos, volverá al primer marco en el lienzo.
Menú de opciones
Haz clic en para abrir el menú de opciones para configuraciones adicionales.
Las siguientes opciones siempre están disponibles:
Habilitar los atajos de Figma
Habilitar atajos de teclado de Figma, tales como:
- C para abrir los comentarios
- F para entrar en pantalla completa
Cuando está habilitado, los usuarios pueden navegar por los prototipos con teclas, como las flechas izquierda y derecha del teclado.
Cuando está desactivado, los usuarios solo pueden navegar por los prototipos haciendo clic en las zonas activas o en los iconos de flecha izquierda y derecha en la parte inferior de la pantalla.
Mostrar sugerencias al hacer clic
Los indicadores de zonas activas ayudan a guiar a los usuarios a través de un prototipo. Muestran dónde están las zonas activas en el prototipo. Cuando un usuario hace clic fuera de una zona activa, Figma resalta cualquier área clicable con un cuadro de límite azul.
Permitir que esté disponible sin conexión
Precarga tus prototipos para poder presentarlos sin conexión.
Configuración de accesibilidad
La configuración de accesibilidad ayuda a las personas con discapacidades a acceder e interactuar con un prototipo. Por ejemplo, las personas con discapacidad visual pueden adaptar un prototipo para lectores de pantalla y otras tecnologías auxiliares.
Ocultar la IU
Puedes elegir mostrar u ocultar la IU del prototipo de Figma en la vista de presentación. Esto resulta útil cuando estás probando un prototipo y quieres evitar distracciones.
Cuando ocultas la IU de Figma en la vista de presentación, Figma:
- Ocultará la barra de herramientas y el pie de página en la vista actual.
- Ocultará la barra lateral de flujos si Mostrar barra lateral está marcado en el menú de opciones.
- Actualizará la URL del prototipo con una variable
&hide-ui=1. - Te recordará cómo restaurar la barra de herramientas y el pie de página.
- Te permitrá copiar el enlace compartido actualizado. Si compartes este enlace, Figma ocultará la barra de herramientas, el pie de página y la barra lateral para cualquier otro visualizador.
Nota: ajustar algunas configuraciones en el menú de opciones actualizará la URL para compartir el prototipo. Asegúrate de copiar la nueva URL si realizas algún cambio.
El menú de opciones también contiene opciones de escalado de contenido y dispositivos para determinar cómo se muestra y se redimensiona el prototipo o el marco del dispositivo. Los tipos de opciones de escalado disponibles dependen de si tienes un dispositivo prototipo seleccionado:
Opciones de escalado sin un marco del dispositivo
Si no tienes un dispositivo prototipo seleccionado en la página, el menú de opciones proporciona las siguientes opciones de escalado de contenido:
Tamaño real (100 %)
Muestra el prototipo según el tamaño completo del marco de diseño. Dependiendo del marco y del tamaño de la pantalla, esto puede dar lugar a un prototipo recortado.
Adaptativo
El contenido del prototipo se redimensionará y rediseñará a medida que el visualizador de prototipos cambia de tamaño según las restricciones y las propiedades de disposición automática aplicadas al diseño. Esto te permite ver los diseños en diferentes tamaños de ventana y comprobar su comportamiento adaptativo. Para que adaptativo funcione, debe haber restricciones y configuraciones de disposición automática aplicadas al diseño.
Ajustar al ancho
Amplia el prototipo para que ocupe todo el ancho de la pantalla.
Ajustar el ancho y la altura
Reduce el prototipo para que tanto el ancho como la altura se ajusten dentro de la ventana del visualizador. No ampliará el prototipo.
Llenar la pantalla
Amplia el prototipo horizontal y verticalmente para que ocupe toda la pantalla. No desbordará ningún contenido del diseño.
Dependiendo del tamaño de los marcos, el prototipo predeterminará ciertas configuraciones de escalado y mostrará diferentes opciones en las secciones Recomendado y Otras opciones de escalado del menú de opciones:
|
Configuración de escalado predeterminada |
Otras opciones recomendadas y de escalado |
|
|
El primer marco es más ancho que 1024 px |
Tamaño real (100 %) |
Adaptativo |
|
El primer marco es más estrecho que 1024 px |
Tamaño real (100 %) |
Ajustar el ancho y la altura |
|
Todos los marcos tienen un formato 16:9 o un tipo de dispositivo configurado para Presentación |
Llenar la pantalla |
Tamaño real (100 %) |
|
Si el tipo de dispositivo está configurado en Personalizado |
Ajustar el ancho y la altura |
Llenar la pantalla Tamaño real (100 %) |
Opciones de escalado con un marco del dispositivo
Con el marco del dispositivo, el menú de opciones proporciona opciones de escalado Adaptativo y Fijo.
Adaptativo
El contenido del prototipo se redimensionará y rediseñará a medida que el visualizador de prototipos cambia de tamaño según las restricciones y las propiedades de disposición automática aplicadas al diseño. Esto te permite ver los diseños en diferentes tamaños de ventana y comprobar su comportamiento adaptativo. Para que Adaptativo funcione, deben aplicarse restricciones y ajustes de disposición automática al diseño.
Tamaño fijo
Muestra el diseño al 100 % dentro del dispositivo. Dependiendo del tamaño del marco y del dispositivo, esto puede dar lugar a un prototipo recortado. Puedes controlar el tamaño del dispositivo con las opciones de escalado del dispositivo.
Si tienes seleccionado un dispositivo prototipo, el conmutador de dispositivos estará disponible en la parte inferior de la vista de presentación, lo que te permitirá elegir dispositivos prototipo similares al actual. También cuenta con opciones de escalado entre las que puedes elegir:
Ajustar el dispositivo a la pantalla
Contrae el marco del dispositivo para que quepa dentro de la ventana del visualizador.
Ampliar el dispositivo para que ocupe la pantalla
Ajusta el dispositivo para que ocupe toda la pantalla.
Mostrar el dispositivo al 100 %
Muestra el prototipo al 100 % del tamaño del marco. Dependiendo del marco y del tamaño de la pantalla, esto puede dar lugar a un prototipo recortado.
Mostrar el marco del dispositivo
Si se selecciona un dispositivo prototipo, esta opción te permite mostrar u ocultar el marco del dispositivo físico.
Consejo: presiona Z en tu teclado mientras estás en la vista de presentación para desplazarte entre las opciones de escalado.
Orden y navegación de los marcos
Al reproducir tu prototipo, puedes presionar →, Espacio o N para navegar al siguiente marco, y ← para navegar al marco anterior. Esta configuración está habilitada de forma predeterminada.
Los marcos siguiente y anteriores se determinan por la posición de los marcos en el lienzo o por las conexiones de creación de prototipos que hayas creado.
Prototipos con un punto de inicio del flujo
Si tu prototipo tiene un punto de inicio, Figma creará un «historial» de los marcos que hayas visitado al visualizar el prototipo.
- ← irá al marco anterior, si hay uno disponible.
- → navegará al siguiente marco. Si no hay historial—como después de usar ←—, navegará a un marco adyacente que aún no has visitado.
Prototipos sin un punto de inicio del flujo
Si un prototipo no tiene un punto de inicio del flujo, Figma ordena los marcos según sus coordenadas en el lienzo. Primero, por su coordenada x de izquierda a derecha, luego por su coordenada y de arriba a abajo.
Si la coordenada y está desplazada de alguna manera, los marcos pueden aparecer desordenados. Para solucionarlo, puedes configurar la alineación horizontal de cada fila de marcos para que se alineen en la parte superior.
- ← irá al marco anterior si hay uno disponible.
- → navegará al siguiente marco. Primero por la coordenada x, después por la coordenada y.