Antes de empezar
Quién puede utilizar esta función
Disponible en cualquier equipo o plan.
Cualquier persona con acceso de edición a un archivo puede crear prototipos.
En los prototipos, queremos que nuestras interacciones se sientan lo más realistas posible, especialmente cuando nos movemos entre varios marcos.
La gestión de estado nos permite mantener propiedades y estados de objetos al navegar dentro y entre marcos al reproducir prototipos.
La gestión de estado se puede utilizar con componentes interactivos, posición de desplazamiento y videos en prototipos de las tres maneras siguientes:
- Memorización de estado: preserva el estado de un objeto cuando sales y regresas al marco.
- Compartición de estado: comparte estados entre objetos coincidentes en diferentes marcos.
- Reinicio de estado: reinicia los estados de los objetos en cada interacción.
Para compartir estados entre marcos, los objetos deben coincidir.
Actualizaciones para conservar 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 preserva automáticamente, siempre que los nombres de los marcos de nivel superior tengan nombres idénticos o un prefijo compartido. Renombrar capas en masa para agregar un prefijo compartido.
Infórmate más sobre conservar posición de desplazamiento →
Memorización de estado
Cuando navegas de un marco a otro, los objetos se reabren en su último estado configurado.
Componentes interactivos
Figma memoriza la última variante configurada de tu componente interactivo.
Por ejemplo, podrías 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 regresas más tarde, el componente interactivo permanecerá en el estado marcado.
Posición de desplazamiento
Figma memoriza tu posición de desplazamiento.
Por ejemplo, podrías tener un mapa con 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 sales de ese marco y vuelves más tarde, seguirás desplazado en la misma ubicación del mapa.
Videos
Figma memoriza el estado de reproducción de cualquier video utilizado en tus prototipos.
Por ejemplo, podrías comenzar a reproducir un video en un marco. Cuando llegas al marcador de cinco segundos, pasas a otro marco. Si regresas al marco original, el video seguirá reproduciéndose desde el marcador de cinco segundos, justo donde lo dejaste.
Compartición de 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, podrías tener un componente interactivo para una casilla de verificación, con una instancia de la variante desmarcada en cada uno de dos marcos. Cuando reproduzcas tu prototipo, marca la casilla de verificación en el primer marco. Luego, al navegar al segundo marco, el componente coincidente en el segundo marco también tendrá la variante marcada.
Posición de desplazamiento
Figma comparte la posición de desplazamiento entre objetos coincidentes.
Por ejemplo, podrías tener un mapa con desplazamiento horizontal y vertical habilitado en cada uno de dos marcos. Si te desplazas a una ubicación específica en el mapa, luego navegas al segundo marco, el objeto de mapa coincidente en el segundo marco se desplaza a la misma ubicación.
Videos
Figma comparte el estado de reproducción de video entre objetos coincidentes.
Por ejemplo, podrías comenzar a reproducir un video en un marco. Cuando navegas a un segundo marco con un objeto de video coincidente, el video en el segundo marco continuará reproduciéndose desde donde lo dejaste.
Reinicio de estado
Cuando los usuarios navegan a través de prototipos, puede ser 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 del prototipo para abrir el panel de Detalles de interacción.
- En la sección Gestión de estado del panel, marca cualquiera de las siguientes configuraciones:
- Restablecer posición de desplazamiento: volver a la ubicación de desplazamiento original.
- Restablecer estado del componente: volver al estado original del componente, como se establece en el lienzo.
- Reiniciar estado del video: reinicia el video desde el principio y restablece su estado de reproducción original.
Nota: La configuración de restablecimiento solo aparece en el panel de Detalles de la interacción si son relevantes para la interacción actualmente seleccionada. Por ejemplo, si la interacción se conecta a un marco sin video, no tendrá la configuración Restablecer estado de video.
Componentes interactivos
Restablecer los estados de componentes interactivos a su estado original, como se establece en el lienzo.
Por ejemplo, podrías tener un componente interactivo para una barra de carga con variantes vacía y completa.
Si deseas que la barra de carga se reinicie en la variante vacía cuando el usuario haga clic en un botón de recarga, marca la opción Reiniciar estado del componente en la interacción del botón.
Posición de desplazamiento
Usa Restablecer posición de desplazamiento para volver a la ubicación de desplazamiento original, como se establece en el lienzo.
Por ejemplo, podrías tener un mapa con desplazamiento horizontal y vertical habilitado. Si quieres volver a la ubicación de desplazamiento original al navegar entre marcos, marca la configuración Restablecer posición de desplazamiento en la interacción.
Videos
Reinicia el video desde el principio y restablécelo a su estado de reproducción original, tal como se configuró en el lienzo.
Por ejemplo, podrías comenzar a reproducir un video en un marco. Cuando llegues al marcador de cinco segundos, navega a otro marco. Al regresar al marco original, si quieres reiniciar el video desde el principio, marca la opción Reiniciar estado del video en la interacción.
Objetos coincidentes
Para compartir estados entre marcos, los objetos deben coincidir.
Aprende más sobre los objetos coincidentes →
Para identificar los objetos que coinciden entre marcos, haz lo siguiente:
- Abre la pestaña Prototipo en la barra lateral derecha.
- Desliza el cursor sobre un objeto o capa en el lienzo.
- Figma resalta el objeto coincidente en cualquier otro marco en el que exista.
Objetos anidados
Se considera que los objetos coinciden si tienen el mismo nombre de capa y el mismo conjunto de elementos principales en los marcos de nivel superior.
Consejo: Si no quieres que el estado se comparta entre dos objetos, puedes renombrarlos para que ya no coincidan.
Marcos de nivel superior
Los marcos de nivel superior son marcos colocados directamente sobre el lienzo. Dado que los marcos de nivel superior no tienen elementos principales, puedes hacer coincidirlos de la siguiente manera:
- Usar nombres de.capa idénticos.
- Usar nombres de capa con cadenas coincidentes y barras diagonales. Por ejemplo, el marco de nivel superior con el nombre
Pantalla de pago / 1coincidirá con otro marco de nivel superior con el nombrePantalla de pago / 2, puesto que todo lo anterior a la barra diagonal es idéntico.
Consejo: ¿Necesitas renombrar las capas? Aprende a renombrar las capas en masa →
Actualización de la nueva gestión de estado
Figma actualizó sus controles de gestión de estado actuales el 24 de mayo de 2023.
Para interacciones de prototipo que se crearon antes del 24 de mayo de 2023:
- Los componentes interactivos no pueden compartir estados entre marcos.
- Los objetos con desplazamiento no pueden memorizar su estado cuando se vuelven a abrir.
- Los objetos con desplazamiento solo pueden compartir estados entre marcos solo si la configuración de conservar posición de desplazamiento está marcada.
Nota: En nuevas interacciones, la posición de desplazamiento se comparte automáticamente, siempre y cuando los nombres de los objetos coincidan entre los marcos.
Aprende más sobre cómo conservar posición de desplazamiento y hacer la transición a la nueva gestión de estado →
Para actualizar cualquier interacción anterior a los nuevos controles de gestión de estado, haz lo siguiente:
- Haz clic en una conexión del prototipo para abrir el panel de Detalles de interacción.
- Haz clic en Actualizar.
Consejo: Una vez que actualices una interacción, aparece un mensaje de éxito en la parte inferior del lienzo. Haz clic en el botón Actualizar todo en el banner del mensaje de éxito para actualizar todas las demás interacciones en el archivo.