Conecta tu prototipo

Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes.

Cualquier persona con acceso de edición a un archivo puede crear prototipos.

Los prototipos son diseños con los que puedes interactuar.

En Figma, todos los prototipos comienzan con una sola interacción. Cada interacción consta de dos partes: un disparador (lo que provoca que inicie la interacción) y una acción (el resultado del disparador).

Algunas interacciones tienen lugar en un solo objeto, como hacer clic en un objeto para abrir una URL externa o hacer clic en un video para reproducirlo y pausarlo.

Otras interacciones tienen lugar entre dos objetos o marcos, como hacer clic en un botón para navegar al siguiente marco o hacer clic en un ícono para abrir una superposición. Estas interacciones se consideran conexiones, que constan de tres partes:

1. Hotspot: un hotspot es donde tiene lugar la interacción. Un hotspot puede ser el propio marco o un objeto dentro del marco. Puedes crear un hotspot en cualquier elemento, como un botón, ícono o encabezado.
2. Conexión: una conexión es la flecha o "conector" que conecta el hotspot con el destino. Define el disparador de la interacción, las acciones y ajusta la configuración de la animación desde la conexión.
3. Destino: el destino es donde termina una conexión. En la mayoría de los casos, el destino debe ser un marco de nivel superior. Solo las conexiones que utilizan la acción  Desplazarse a pueden configurarse con un destino dentro del mismo marco de nivel superior.

Agregar una interacción

Una interacción se crea al seleccionar un hotspot o punto de partida.

1. Ve a la pestaña Prototipo de la barra lateral derecha.
2. Selecciona una capa u objeto para el hotspot de la interacción.
3. Crea la interacción realizando una de las siguientes acciones:
   • Pasa el cursor sobre el objeto y arrastra el ícono de signo más al marco de destino
   • Haz clic en el Agregar en la sección Interacciones del panel Prototipo .
4. Una vez creada la interacción, utiliza el panel Detalles de la interacción para configurar el disparador, la acción y el destino de la interacción.

Crear interacciones de forma masiva

Puedes crear interacciones a partir de varios objetos a la vez. Esto puede ayudarte a ahorrar tiempo al crear varias conexiones con el mismo destino.

1. Selecciona tus objetos iniciales, o hotspots, donde comienzan las interacciones. Puedes seleccionar varios objetos mediante uno de los siguientes métodos:
   • Selecciona un objeto inicial, luego mantén presionada la tecla Shift mientras haces clic en los objetos adicionales
   • Arrastra el cursor por los objetos que desees seleccionar
2. Crea las interacciones realizando una de las siguientes acciones:
   • Pasa el cursor por encima de uno de los objetos seleccionados, luego haz clic y arrastra el ícono de signo más al marco de destino
   • Haz clic en el ícono de signo más  en la sección Interacciones  del panel Prototipo y utiliza el panel Detalles de la interacción para configurar los detalles del disparador, la acción y la animación

Detalles de la interacción

Una vez creada la interacción, utiliza el modal Detalles de la interacción para configurar lo siguiente:

1. Disparador: define qué tipo de interacción hará que el prototipo avance, como un clic del mouse o un gesto táctil.
2. Acción: define qué tipo de evento ocurre cuando un usuario interactúa con el hotspot, como pasar a otro marco o activar una superposición.
3. Destino: define dónde termina la interacción. Puede ser otra pantalla del prototipo o una superposición que aparece sobre la pantalla actual. No todas las interacciones tienen destinos; por ejemplo, el disparador Atrás vuelve automáticamente al marco anterior.
4. Ajustes de animación: determina cómo se mueve el prototipo de un marco a otro.
5. Gestión de estados: haz clic para restablecer las propiedades y los estados de los objetos al navegar dentro de un marco y entre marcos.
6. Agregar acción: agrega otra acción al mismo disparador.
7. Cierra el modal Detalles de la interacción.

Un solo objeto puede tener varias interacciones, cada una con su propio disparador. Por ejemplo, puedes tener un objeto con un relleno de video que tiene dos interacciones: una que reproduce el video al hacer clic y otra que abre una superposición cuando finaliza el video. 

Un solo objeto puede tener:

• Cualquier número de los siguientes disparadores:
  • Tecla/Joystick
  • Al arrastrar 
  • Cuando el video alcanza una marca de tiempo específica
• Uno de cada uno de los siguientes disparadores:
  • Al hacer clic/Al tocar
  • Al pasar el cursor
  • Al presionar
  • Entrar con el mouse
  • Salir con el mouse
  • Presionar el mouse/Presionar la pantalla táctil
  • Soltar el mouse/Soltar la pantalla táctil
  • Después de la demora
  • Cuando termina el video

Ajustar la animación

Los ajustes de animación determinan cómo se mueve el prototipo de un marco a otro.

1. Animación: la animación es la forma en que el prototipo pasa de un marco al siguiente, mediante un empuje, un deslizamiento o una disolución.
2. Dirección: para ciertos tipos de animación (como desplazamiento hacia dentro o empuje), puedes configurar la dirección en la que deseas que se mueva la transición. Elige entre izquierda, derecha, abajo o arriba.
3. Animación de capas coincidentes: marca esta casilla para aplicar la transición de Animación inteligente a cualquier capa coincidente.
4. Suavizado y animación de resorte: el suavizado determina la aceleración de la transición entre un marco inicial y su destino.
5. Duración: la duración controla el tiempo que tarda, en milisegundos (ms), en completarse la transición. Selecciona una duración entre 1 ms y 10000 ms (10 segundos).
6. Previsualiza la animación.

Seleccionar y editar interacciones

Utiliza las siguientes herramientas para mejorar y acelerar la edición de prototipos.

Seleccionar interacciones coincidentes

Las interacciones coincidentes son interacciones idénticas que comienzan a partir de objetos coincidentes en otros marcos.

• Las interacciones idénticas son interacciones con la misma acción y destino
• Los objetos coincidentes son objetos en diferentes marcos que tienen nombres idénticos y niveles jerárquicos correspondientes

Para seleccionar interacciones coincidentes:

1. Selecciona una interacción.
2. En el modal Detalles de la interacción, haz clic en Seleccionar interacciones coincidentes.

Edita los detalles de la interacción para actualizar todas las interacciones seleccionadas a la vez.

Actualizar destinos de conexión de forma masiva

Si tienes varias conexiones, puedes cambiar el destino de todas ellas al mismo tiempo.

1. Selecciona las conexiones que deseas editar. Puedes seleccionar varias conexiones mediante uno de los siguientes métodos:
   • Selecciona una conexión inicial, luego mantén presionada la tecla Shift mientras haces clic en las conexiones adicionales.
   • Arrastra el cursor por las conexiones que deseas seleccionar. Se creará un cuadro azul alrededor de las conexiones seleccionadas.
2. Mantén presionadas las conexiones y arrástralas a un nuevo marco de destino. También puedes seleccionar la interacción en la barra lateral derecha y cambiar el marco de destino en el panel Detalles de la interacción.

Copiar y pegar detalles de la interacción

Crea prototipos más rápido copiando detalles de interacción y pegándolos en otros objetos.

1. Selecciona una interacción de prototipo en el lienzo.
2. Presiona ⌘ Command / Control + C para copiar o ⌘ Command / Control + X para cortar los detalles de la interacción.
3. Selecciona otro objeto en el lienzo.
4. Presiona ⌘ Command / Control + V para pegar los detalles de la interacción en el nuevo objeto.