Conectar tu prototipo

Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes.

Cualquiera que tenga 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 única interacción. Cada interacción consta de dos partes: un desencadenante (aquello que provoca que se inicie la interacción) y una acción (el resultado del desencadenante).

Algunas interacciones tienen lugar en un solo objeto, como hacer clic en un objeto para abrir una URL externa o hacer clic en un vídeo 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 icono para abrir una superposición. Estas interacciones se consideran conexiones, que constan de tres partes:

1. Zona activa: una zona activa es donde se produce la interacción. Una zona activa puede ser el marco en sí, o un objeto dentro del marco. Puedes crear una zona activa en cualquier parte, como un botón, icono o titular.
2. Conexión: una conexión es la flecha o «conexión» que conecta la zona activa con el destino. Define el desencadenante de la interacción, las acciones y ajusta la configuración de 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 se pueden configurarse con un destino dentro del mismo marco de nivel superior.

Añadir una interacción

Se crea una interacción seleccionando una zona activa o punto de inicio.

1. Navega a la pestaña Prototipo en la barra lateral derecha.
2. Selecciona una capa u objeto para la zona activa de la interacción.
3. Crea la interacción realizando una de las siguientes acciones:
   • Pasa el cursor sobre el objeto y arrastra el icono con el signo más al marco de destino.
   • Haz clic en Añadir en la sección Interacciones del panel de prototipos.
4. Una vez establecida la interacción, utiliza el panel Detalles de la interacción para configurar el desencadenante, la acción y el destino de la interacción.

Crear interacciones de forma masiva

Puedes crear interacciones de múltiples objetos a la vez. Esto puede ayudarte a ahorrar tiempo al crear varias conexiones al mismo destino.

1. Selecciona tus objetos iniciales, o zonas activas, donde comienzan las interacciones. Puedes seleccionar varios objetos a través de uno de los métodos siguientes:
   • Selecciona un objeto inicial y, a continuación, mantén pulsada la tecla Mayús mientras haces clic en objetos adicionales.
   • Arrastra el cursor a través de cualquier objeto que quieras seleccionar.
2. Crea las interacciones realizando una de las siguientes acciones:
   • Pasa el cursor sobre uno de los objetos seleccionados, haz clic y arrastra el icono con el signo más al marco de destino.
   • Haz clic en el icono con el signo más  en la sección Interacciones del panel de prototipos, y usa el panel Detalles de la interacción para configurar el desencadenante, la acción y los detalles de la animación.

Detalles de la interacción

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

1. Desencadenante: define qué tipo de interacción hará que el prototipo avance, como un clic del ratón o un gesto táctil.
2. Acción: define qué tipo de evento ocurre cuando un usuario interactúa con la zona activa, como desplazarse 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 desencadenante Atrás vuelve automáticamente al marco anterior.
4. Ajustes de animación: determinan cómo se mueve el prototipo de un marco a otro.
5. Gestión estatal: haz clic para restablecer las propiedades y los estados de los objetos al navegar dentro y entre marcos.
6. Añadir acción: añade otra acción al mismo desencadenante.
7. Cierra el modal Detalles de la interacción.

Un solo objeto puede tener múltiples interacciones, cada una con su propio desencadenante. Por ejemplo, puedes tener un objeto con un relleno de vídeo que tenga dos interacciones: una que reproduce el vídeo al hacer clic y otra que abra una superposición cuando finalice el vídeo. 

Un solo objeto puede tener:

• Cualquier número de los siguientes desencadenantes:
  • Tecla/joystick
  • Al arrastrar 
  • Cuando el vídeo alcanza
• Uno de cada uno de los siguientes desencadenantes:
  • Al hacer clic / Al pulsar
  • Al pasar el ratón
  • Al presionar
  • Entrar con el ratón
  • Salir con el ratón
  • Pulsar el ratón / Pulsar la pantalla táctil
  • Soltar el ratón / Soltar la pantalla táctil
  • Tras pausa
  • Cuándo termina el vídeo

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, ya sea mediante una transición, una diapositiva o una disolución.
2. Dirección: para ciertos tipos de animación (como entrada o transición), puedes establecer los controles de 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 Animación inteligente a cualquier capa coincidente.
4. Animación con suavizado y resorte: el suavizado determina la aceleración de la transición entre un marco de inicio y su destino.
5. Duración: la duración controla el tiempo que tarda la transición en completarse, en milisegundos (ms). Elige una duración entre 1 ms y 10 000 ms (10 segundos).
6. Vista previa de la animación.

Seleccionar y editar interacciones

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

Seleccionar interacciones coincidentes

Las interacciones coincidentes son interacciones idénticas que comienzan desde objetos coincidentes en otros marcos.

• Interacciones idénticas son interacciones con la misma acción y destino
• Objetos coincidentes son objetos en diferentes marcos que tienen nombres idénticos y niveles de jerarquía coincidentes

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 esas conexiones al mismo tiempo.

1. Selecciona las conexiones que deseas editar. Puedes seleccionar variass conexiones mediante uno de los siguientes métodos:
   • Selecciona una conexión inicial y, a continuación, mantén pulsada la tecla Mayús mientras haces clic en conexiones adicionales.
   • Arrastra el cursor sobre cualquier conexión que quieras seleccionar. Esto creará un cuadro azul alrededor de las conexiones seleccionadas.
2. Usa el ratón para arrastrar las conexiones a un nuevo marco de destino. También puedes seleccionar la interacción desde la barra lateral derecha y cambiar el marco de destino desde el panel Detalles de la interacción.

Copiar y pegar detalles de la interacción

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

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