Antes de empezar
Quién puede utilizar esta función
Está disponible en cualquier equipo o plan.
Cualquiera que tenga acceso de edición a un archivo puede crear prototipos.
En los prototipos, queremos que nuestras interacciones se parezcan lo más posible a la realidad, especialmente al movernos entre varios marcos.
Gestión estatal nos permite mantener las propiedades y los estados de los objetos al navegar dentro y entre marcos durante la reproducción de prototipos.
La gestión estatal se puede utilizar con componentes interactivos, posición de desplazamiento y vídeos en prototipos de tres maneras:
- Memorizar estados: conserva el estado de un objeto cuando sales y vuelves al marco
- Compartir estados: comparte estados entre objetos coincidentes en diferentes marcos
- Restablecer estados: restablece los estados de los objetos en cada interacción
Para compartir estados entre marcos, los objetos deben coincidir.
Actualizaciones para conservar la posición de desplazamiento
Hemos realizado actualizaciones en la configuración Conservar posición de desplazamiento. La posición de desplazamiento de los marcos de nivel superior ahora se conserva automáticamente, siempre que los nombres de los marcos de nivel superior sean idénticos o compartan un prefijo. Cambiar el nombre de varias capas a la vez para añadir un prefijo compartido.
Más información sobre cómo conservar la posición de desplazamiento →
Memorizar estados
Cuando navegas entre marcos, los objetos vuelven a abrirse en su último estado configurado.
Componentes interactivos
Figma memoriza la última variante establecida de tu componente interactivo.
Por ejemplo, puedes tener un componente interactivo para una casilla de verificación. Si configuras el componente interactivo en la variante marcada, Figma recuerda el estado de esa variante. Esto significa que si navegas fuera de ese marco y vuelves a él más tarde, el componente interactivo permanecerá en el estado marcado.
Posición de desplazamiento
Figma memoriza tu posición de desplazamiento.
Por ejemplo, puedes tener un mapa con el desplazamiento horizontal y vertical habilitado. Si te desplazas a una ubicación específica en el mapa, Figma recuerda la posición de tu desplazamiento. Esto significa que si navegas fuera de ese marco y vuelves a él más tarde, permanecerás desplazado a la misma ubicación en el mapa.
Vídeos
Figma memoriza el estado de reproducción de cualquier vídeo utilizado en tus prototipos.
Por ejemplo, puedes comenzar a reproducir un vídeo en un marco. Cuando llegas al segundo 5, navegas a otro marco. Si regresas al marco original, el vídeo continuará reproduciéndose desde la marca de 5 segundos, justo donde lo dejaste.
Compartir estados
Cuando navegas entre marcos con objetos coincidentes, el estado del primer objeto se comparte con el segundo objeto.
Componentes interactivos
Figma comparte estados entre componentes interactivos coincidentes. Los estados solo se comparten después de que se haya interactuado inicialmente con el componente.
Por ejemplo, puedes tener un componente interactivo para una casilla de verificación, con una instancia de la variante sin marcar en cada uno de los dos marcos. Cuando reproduces tu prototipo, marcas la casilla de verificación en el primer marco. A continuación, cuando navegas al segundo marco, el componente coincidente en el segundo marco también se establecerá en la variante marcada.
Posición de desplazamiento
Figma comparte la posición de desplazamiento entre objetos coincidentes.
Por ejemplo, puedes tener un mapa con desplazamiento horizontal y desplazamiento vertical habilitado en cada uno de dos marcos. Si vas a una ubicación específica en el mapa, y luego navegas al segundo marco, el objeto del mapa coincidente en el segundo marco estará desplazado a la misma ubicación.
Vídeos
Figma comparte el estado de reproducción de vídeo entre objetos coincidentes.
Por ejemplo, puedes comenzar a reproducir un vídeo en un marco. Cuando navegas a un segundo marco con un objeto de vídeo coincidente, el vídeo en el segundo marco continuará reproduciéndose desde donde lo dejaste.
Restablecer estados
Cuando los usuarios navegan por los prototipos, es posible que sea necesario restablecer el estado de un objeto en interacciones específicas. Los estados de los objetos deben restablecerse en la interacción que navega al siguiente marco.
- Haz clic en una conexión prototipo para abrir el panel Detalles de la interacción.
- En la sección Gestión Estatal del panel, marca cualquiera de los siguientes ajustes:
- Restablecer la posición de desplazamiento: restablecer la ubicación original de desplazamiento.
- Restablecer el estado del componente: restablecer el estado original del componente, tal y como se ha establecido en el lienzo.
- Restablecer el estado del vídeo: reiniciar el vídeo desde el principio y restablecerlo a su estado de reproducción original.
Nota: Los ajustes de restablecimiento solo aparecen en el panel Detalles de la interacción si son relevantes para la interacción seleccionada actualmente. Por ejemplo, si la interacción se conecta a un marco sin un vídeo, no habrá ningún ajuste para Restablecer el estado del vídeo.
Componentes interactivos
Restablecer los estados de los componentes interactivos a su estado original, tal y como se establecieron en el lienzo.
Por ejemplo, puedes tener un componente interactivo para una barra de carga con variantes vacío y completo.
Quieres que la barra de carga se reinicie en la variante vacía cuando el usuario hace clic en un botón de recarga, por lo que marcas la opción Restablecer el estado del componente en la interacción del botón.
Posición de desplazamiento
Usa Restablecer la posición de desplazamiento para volver a la ubicación de desplazamiento original, tal y como se ha establecido en el lienzo.
Por ejemplo, puedes tener un mapa con el desplazamiento horizontal y vertical habilitado. Quieres volver a la ubicación de desplazamiento original cuando navegas entre marcos, por lo que marcas la opción Restablecer la posición de desplazamiento en la interacción.
Vídeos
Reinicia el vídeo desde el principio y restablece su estado de reproducción original, tal y como se ha configurado en el lienzo.
Por ejemplo, puedes comenzar a reproducir un vídeo en un marco. Cuando llegas al segundo 5, navegas a otro marco. Cuando vuelves al marco original, quieres reiniciar el vídeo desde el principio, por lo que marcas la opción Restablecer el estado del vídeo en la interacción.
Objetos coincidentes
Para compartir estados entre marcos, los objetos deben coincidir.
Más información sobre objetos coincidentes →
Para identificar objetos que coinciden entre marcos:
- Haz clic en la pestaña Prototipo en la barra lateral derecha.
- Pasa el cursor sobre un objeto o una capa en el lienzo.
- Figma destacará el objeto correspondiente en cualquier otro marco en el que exista.
Objetos anidados
Los objetos se consideran coincidentes si tienen el mismo nombre de capa y el mismo conjunto principal en los marcos de nivel superior.
Consejo: si no quieres que el estado se comparta entre dos objetos, puedes cambiarlos de nombre para que ya no coincidan.
Marcos de nivel superior
Los marcos de nivel superior son marcos colocados directamente en el lienzo. Dado que los marcos de nivel superior no tienen objetos principales, puedes emparejarlos realizando una de las siguientes acciones:
- Usa nombres de capa idénticos.
- Usa nombres de capas con cadenas coincidentes y barras diagonales. Por ejemplo, un marco de nivel superior con el nombre
Checkout / 1coincidirá con otro marco de nivel superior con el nombreCheckout / 2, ya que todo lo que precede a la barra inclinada es idéntico.
Consejo: ¿Necesitas cambiar el nombre de las capas? Descubre cómo cambiar el nombre de varias capas a la vez →
Actualizar a la nueva gestión estatal
Figma actualizó sus controles de gestión estatal actuales el 24 de mayo de 2023.
Para las interacciones prototipo creadas antes del 24 de mayo de 2023:
- Los componentes interactivos no pueden compartir estados entre marcos
- Los objetos desplazables no pueden memorizar su estado cuando se vuelven a abrir
- Los objetos desplazables pueden compartir estados a través de marcos solo si la opción Conservar posición de desplazamiento está marcada
Nota: En las nuevas interacciones, la posición de desplazamiento se comparte automáticamente, siempre que los nombres de los objetos coincidan en los marcos.
Más información sobre cómo conservar la posición de desplazamiento y la transición a una nueva gestión estatal →
Para actualizar cualquier interacción anterior con los nuevos controles de gestión estatal:
- Haz clic en una conexión prototipo para abrir el panel Detalles de la interacción.
- Haz clic en Actualizar.
Consejo: una vez que actualices una interacción, aparecerá un mensaje indicando que se ha realizado correctamente en la parte inferior del lienzo. Haz clic en el botón Actualizar todo en el banner del mensaje para actualizar todas las demás interacciones en el archivo.