Antes de empezar
Quién puede utilizar esta función
Usuarios en cualquier equipo o plan pueden reproducir prototipos
Cualquier persona con acceso de visualización a un archivo o prototipo puede reproducir prototipos. Cualquier persona puede ajustar las opciones de visualización en la vista de presentación.
Los prototipos reproducen la forma en que los usuarios podrían interactuar con tus diseños, lo que te permite ver y probar cómo funcionan antes de pasar a la fase de desarrollo. En Figma, crea prototipos directamente en el lienzo. Luego, 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.
Luego, elige cómo te gustaría reproducir el prototipo:
- Vista previa: reproduce el prototipo directamente en el editor, con una vista previa integrada. 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 observa cómo se ve en un dispositivo específico.
Prepara 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 previsualizarlo o presentarlo.
- Si hay conexiones de prototipado, Figma solo mostrará los marcos con conexiones mientras se reproduce el prototipo. Haz clic en cada pantalla o interactúa con cualquier hotspot.
- Si no hay conexiones de prototipado, 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
Utiliza la vista previa integrada para reproducir tu prototipo directamente en el lienzo junto con tu diseño. Con la vista previa integrada, cualquier cambio de diseño se refleja inmediatamente en la vista previa, por lo que puedes ver los cambios en tiempo real. Cuando haces clic en otro marco del lienzo, la vista previa salta a ese marco.
Para abrir la vista previa integrada, realiza una de las siguientes acciones:
- Haz clic en Vista previa en la barra de herramientas superior
- Haz clic en el ícono de vista previa en cualquier punto de inicio del flujo
- Utiliza ⇧ Shift Espacio en tu teclado
Desde la vista previa integrada, puedes:
- Utilizar 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 presionar R para reiniciar.
- Abrir el menú de elementos ocultos para elegir entre diferentes opciones de escalado para tu prototipo.
- Abrir el prototipo en la vista de presentación en una nueva pestaña.
- Hacer clic en la X para cerrar la vista previa integrada.
- Cambiar el tamaño de la vista previa haciendo clic y arrastrando el borde de la ventana de vista previa. Mantén presionada la tecla ⇧ Shift para escalarla proporcionalmente.
Opciones del menú de elementos ocultos
El menú de elementos ocultos del visualizador integrado contiene diferentes opciones de escalado y visualización para tu prototipo. Las opciones disponibles variarán dependiendo de si tienes un prototipo de dispositivo seleccionado. Algunas de estas opciones se superponen.
Ajustar al ancho
Escala el prototipo para que ocupe todo el ancho de la pantalla. Disponible solo si el prototipo de dispositivo está configurado como Sin dispositivo o Presentación en la página.
Adaptable
El contenido del prototipo cambiará de tamaño y se reajustará la disposición a medida que el visualizador de prototipos cambie 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 adaptable. Para que Adaptable funcione, deben aplicarse configuraciones de restricciones y ajustes de disposición automática al diseño.
Seguir prototipo
El marco seleccionado en el lienzo se actualiza para reflejar el marco actual en la vista previa integrada. A medida que navegas por el prototipo en la vista previa, tu selección y posición del lienzo se adaptarán a él.
Cambiar el tamaño de la ventana/dispositivo al 100 %
Cambia el tamaño del visualizador o dispositivo al 100% del tamaño del marco.
Respetar la relación de aspecto
La ventana del visualizador integrado cambia de tamaño para ajustarse a la relación de aspecto del marco actual. Disponible solo cuando un prototipo de dispositivo está configurado como Sin dispositivo.
Mostrar el marco del dispositivo
Muestra u oculta el marco físico del dispositivo. Disponible solo cuando se selecciona un marco del prototipo de dispositivo.
Presentar un prototipo
Utiliza la vista de presentación para reproducir tus prototipos en una nueva pestaña. Puedes interactuar con hotspots o ingresar 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:⌘ Command⌥ Optionreturn
- Windows: ControlAltenter
Figma mostrará el dispositivo sobre el color de fondo que hayas seleccionado.
Consejo: ¿Deseas compartir tu prototipo con otras personas? Obtén más información sobre cómo compartir prototipos.
¿Deseas reproducir tu prototipo en un dispositivo móvil? Obtén más información cómo ver prototipos en un dispositivo móvil.
Disposición de 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 agregar comentarios al prototipo.
Desde el lado derecho de la barra de herramientas, puedes:
- Hacer clic en la flecha junto a tu avatar y elegir entre destacar tu usuario 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:
- Utilizar las flechas izquierda y derecha para desplazarte entre pantallas.
- Utilizar el selector de dispositivos para cambiar a un dispositivo similar y acceder a otras opciones de escalado. Disponible si se selecciona un marco de 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 del lienzo.
Menú Opciones
Haz clic en para abrir el menú de opciones y acceder a configuraciones adicionales.
Las siguientes opciones están siempre disponibles:
Habilitar los atajos de Figma
Habilita los atajos de teclado de Figma, como por ejemplo:
- C para abrir comentarios
- F para entrar en pantalla completa
Cuando están habilitados, los usuarios pueden navegar por los prototipos con teclas, como las flechas izquierda y derecha del teclado.
Cuando están deshabilitados, los usuarios solo pueden navegar por los prototipos haciendo clic en los hotspots o en los íconos de flecha izquierda y derecha de la parte inferior de la pantalla.
Mostrar sugerencias al hacer clic
Las sugerencias de hotspots ayudan a guiar a los usuarios a través de un prototipo. Muestran dónde están los hotspots en el prototipo. Cuando un usuario hace clic fuera de un hotspot, Figma resalta todas las áreas en las que se puede hacer clic con un cuadro delimitador azul.
Disponible sin conexión
Precarga tus prototipos para que puedas 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 de asistencia.
Ocultar UI
Puedes elegir mostrar u ocultar la UI del prototipo de Figma en la vista de presentación. Esto es útil cuando estás probando un prototipo y deseas evitar distracciones.
Cuando ocultas la UI 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ú 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 permitirá 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 espectador.
Nota: Al ajustar algunas configuraciones en el menú Opciones, se 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 cambia el tamaño de tu prototipo o marco de dispositivo. Los tipos de opciones de escalado disponibles dependen de si tienes un prototipo de dispositivo seleccionado:
Opciones de escalado sin un marco de dispositivo
Si no tienes un prototipo de dispositivo 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.
Adaptable
El contenido del prototipo cambiará de tamaño y se reajustará la disposición a medida que el visualizador de prototipos cambie 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 adaptable. Para que Adaptable funcione, debe haber configuraciones de restricciones y disposición automática aplicadas al diseño.
Ajustar al ancho
Escala el prototipo para que ocupe el ancho de la pantalla.
Ajustar ancho y alto
Reduce el prototipo para que tanto el ancho como el alto quepan en la ventana del visualizador. No ampliará el prototipo.
Ocupar toda la pantalla
Escala 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 utilizará de manera predeterminada ciertas configuraciones de escalado y se mostrarán 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 %) |
Adaptable |
|
El primer marco es más estrecho que 1024 px |
Tamaño real (100 %) |
Ajustar ancho y alto |
|
Todos los marcos tienen un formato 16:9 o el tipo de dispositivo configurado como Presentación |
Ocupar toda la pantalla |
Tamaño real (100 %) |
|
Si el tipo de dispositivo está configurado como Personalizado |
Ajustar ancho y alto |
Ocupar toda la pantalla Tamaño real (100 %) |
Opciones de escalado con un marco de dispositivo
Con el marco de dispositivo, el menú de opciones ofrece las opciones de escalado Adaptable y Tamaño fijo.
Adaptable
El contenido del prototipo cambiará de tamaño y se reajustará la disposición a medida que el visualizador de prototipos cambie 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 adaptable. Para que Adaptable funcione, deben aplicarse configuraciones de 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 resultar en un prototipo recortado. Puedes controlar el tamaño del dispositivo con las opciones de escalado del dispositivo.
Si tienes seleccionado un prototipo de dispositivo, el selector de dispositivos estará disponible en la parte inferior de la vista de presentación, lo que te permitirá elegir prototipos de dispositivos similares al actual. También cuenta con opciones de escalado entre las que puedes elegir:
Ajustar el dispositivo a la pantalla
Reduce el marco del dispositivo para que quepa dentro de la ventana del visualizador.
Ampliar el dispositivo para que ocupe toda la pantalla
Escala el dispositivo para que ocupe toda la pantalla.
Mostrar 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 prototipo de dispositivo, esta opción permite mostrar u ocultar el marco físico del dispositivo.
Consejo: Presiona la tecla Z del teclado mientras estás en la vista de presentación para desplazarte entre las opciones de escalado.
Orden de los marcos y navegación
Al reproducir tu prototipo, puedes presionar →, Espacio o N para avanzar al siguiente marco, y ← para retroceder al marco anterior. Esta configuración está habilitada de manera predeterminada.
Los marcos siguientes y anteriores se determinan por la posición de los marcos en el lienzo o por las conexiones de prototipado que hayas creado.
Prototipos con un punto de inicio de flujo
Si tu prototipo tiene un punto de inicio, Figma creará un "historial" de los marcos que hayas visitado al visualizar el prototipo.
- ← te llevará al marco anterior, si hay uno disponible.
- → te llevará al siguiente marco. Si no hay historial, como después de usar ←, te llevará a un marco adyacente que no hayas visitado.
Prototipos sin un punto de inicio de flujo
Si un prototipo no tiene un punto de inicio de 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 se desplaza de alguna manera, los marcos pueden aparecer desordenados. Para solucionarlo, puedes configurar la alineación horizontal de cada fila de marcos para alinearlos en la parte superior.
- ← te llevará al marco anterior si está disponible.
- → te llevará al siguiente marco. Primero por la coordenada x, luego por la coordenada y.