Antes de empezar
Quién puede utilizar esta función
Usuarios de cualquier equipo o plan.
Usuarios con acceso de tipo Puede editar puede crear prototipos.
¿Acabas de empezar en la creación de prototipos? Consulta nuestra Guía de Introducción a la creación de prototipos.
Todos los prototipos comienzan con una única interacción. Cada interacción tiene un desencadenante y una acción.
El desencadenante determina qué tipo de interacción con la zona activa causará que el prototipo avance. Esto podría ser una interacción con el ratón o táctil como pulsar, arrastrar, hacer clic y más.
Este artículo trata sobre nuestros desencadenantes de creación de prototipos con más detalle.
Consejo: Aprende cómo crear una interacción de prototipo o revisa las acciones de prototipo disponibles →
Al hacer clic/pulsar
Desencadena la acción cuando el usuario hace clic (escritorio) o pulsa (móvil) en una zona activa en tu prototipo. Puedes añadir desencadenantes haciendo clic o pulsando sobre muchos elementos diferentes en una pantalla.
Puedes usarlos para la navegación como abrir enlaces, usar menús o explorar sitios web. También se pueden usar cuando necesitas que un usuario haga clic en botones, complete formularios o confirme y cierre alertas.
Al arrastrar
Te permite realizar una acción cuando arrastras un elemento en la pantalla. Esto puede ser el marco completo o un solo elemento como un control deslizante.
Puedes utilizar la opción Al arrastrar en cualquier dirección: izquierda, derecha, arriba o abajo. Esto es ideal para gestos de deslizamiento simples, o para animaciones más complejas como arrastrar para refrescar.
Arrastrar te permite moverte hacia adelante y hacia atrás a través de la transición. Esto crea un continuo, en lugar de realizar la acción después de un gesto de deslizamiento.
Al pasar el ratón
Desencadena la acción cuando pasas el cursor sobre la zona activa. Puedes usar esto para replicar textos emergentes, avisos en pantalla o cambios de estado.
Devolveremos al usuario al marco original cuando mueva el cursor fuera de la zona activa. Esto lo convierte en una gran interacción cuando no quieres alejar a los usuarios de la pantalla actual.
Al presionar
Desencadena la acción cuando haces clic y mantienes presionado el ratón o el panel táctil en un escritorio. O, cuando pulsas y mantienes presionado en un dispositivo móvil.
Puedes usar este desencadenante para navegar por menús desplegables o replicar interacciones de pulsación prolongada como ver una vista previa usando 3D Touch en iOS.
Cuando se actualice, llevaremos al usuario de vuelta al marco original. Esto lo hace ideal para Superposiciones que capturan interacciones temporales o cambios de estado.
Teclado/Gamepad
El desencadenante de teclado/Gamepad te permite replicar interacciones con un atajo de teclado. Esto se aplica a las entradas de usuario desde teclados, controladores y gamepads.
Un desencadenante puede ser una sola tecla o botón o una combinación de teclas.
Por ejemplo: un desencadenante puede basarse en que el usuario presione la tecla Enter o el botón ✕ en un controlador. O usando un atajo como Shift – K.
Nota: Soportamos oficialmente los controladores Xbox One, PS4 y Nintendo Switch Pro. Otros controladores pueden funcionar, pero los botones mostrados en Figma pueden no reflejar el controlador con precisión.
Entrar con el ratón
Esto muestra el marco de Destino cuando el ratón entra en la zona activa. Esto podría ser un área pequeña como un botón o una sección completa de la pantalla.
Podrías usar esto para exponer las opciones en un menú desplegable a medida que entras con el ratón en el campo. El menú permanecerá abierto hasta que el usuario realice otra interacción como seleccionar un elemento o hacer clic fuera del campo.
Una vez que hayas configurado un evento de Entrar con el ratón, puede que quieras configurar un desencadenante de Salir con el ratón para revertir la acción al dejar la zona activa.
Nota: El 16 de noviembre de 2023, Figma actualizó el comportamiento del desencadenante de Entrar con el ratón para reflejar más precisamente el nombre y la descripción del desencadenante.
- Interacciones de desencadenantes como Mover el ratón dentro cada vez que el ratón se mueve dentro de la zona activa.
- Las interacciones de Entrar con el ratón solo se desencadenan cuando el ratón entra inicialmente en la zona activa.
Para mantener intactos los prototipos existentes, las interacciones creadas antes del 16 de noviembre de 2023 ahora se etiquetan como Mover el ratón dentro.
Las interacciones de Mover el ratón dentro ya no se pueden crear. Todas las interacciones nuevas tienen el desencadenante de entrar con el ratón.
Salir con el ratón
Esto muestra el marco de Destino cuando el cursor sale de la zona activa.
Podrías usar esto para avisos en pantalla, como una alerta cuando no has completado un campo o marcado una casilla.
Nota: El 16 de noviembre de 2023, Figma actualizó el comportamiento del desencadenante de Salir con el ratón para reflejar de forma más precisa el nombre y la descripción del desencadenante.
- Las interacciones de Mover el ratón fuera se desencadenan cada vez que el ratón se mueve fuera de la zona activa.
- Las interacciones de Salir con el ratón solo se desencadenan cuando el ratón inicialmente sale de la zona activa.
Para mantener intactos los prototipos existentes, la interacción creada antes del 16 de noviembre de 2023 ahora está etiquetada como Mover el ratón fuera.
Las interacciones de Mover el ratón fuera ya no se pueden crear. Todas las interacciones nuevas tienen el desencadenante de Salir con el ratón .
Pulsar el ratón (tocar abajo)
Esto desencadena el marco Destino cuando presionas por primera vez el ratón o el panel táctil. Para dispositivos móviles, esto es cuando el dedo del usuario toca por primera vez la zona activa.
Soltar el ratón (tocar arriba)
Esto es el desencadenante del marco Destino cuando sueltas el ratón o el panel táctil. Para dispositivos móviles, esto es una vez que el dedo del usuario ya no toca la zona activa.
- Aplica el desencadenante de Pulsar el ratón al encabezado del menú para abrir una Superposición.
- Aplica la interacción de Soltar el ratón al elemento del menú en la Superposición.
- Cuando sueltan el ratón, llevamos al usuario al marco correspondiente.
Consejo: Usa los desencadenantes de Pulsar el ratón y Soltar el ratón juntos para replicar un usuario navegando por un menú desplegable.
Con retardo
El desencadenante Con retardo te permite activar una acción después de que el usuario haya pasado un cierto tiempo en un marco dado. Necesitarás establecer la duración del retraso en milisegundos (ms).
Cuando el vídeo impacta
El desencadenante de Cuando el vídeo impacta está disponible para cualquier conexión que comience en un archivo de vídeo.
Te permite establecer una acción cuando el vídeo llega a una marca de tiempo específica. Esto puede ser útil al construir prototipos para cosas como pausas publicitarias en vídeo o el desencadenante de un mensaje de superposición durante la reproducción del vídeo.
Si seleccionas el desencadenante Cuando el vídeo impacta, hay un campo para ingresar una marca de tiempo.
Nota: Si introduces una marca de tiempo más allá de la duración completa del vídeo, se produce el desencadenante cuando el vídeo termina.
Más información sobre la creación de prototipos con vídeo →
Cuándo el vídeo termina
El desencadenante Cuando el vídeo termina está disponible para cualquier conexión que comience en un archivo de vídeo.
Te permite establecer una acción cuando el vídeo termina. Esto puede ser útil al secuenciar vídeos o crear una experiencia de reproductor de vídeo interactivo.