Sesión 21: Tips protoype Figma

Jueves 25 de Agosto 2022. La clase trata sobre el avance del prototipo en figma. Comparto la traducción y descripción de prototype.

 

 

Disparadores y tipos de animaciones en los prototipos

Seguramente habrás notado que cuando enlazas un elemento mediante un nodo se abre un pequeño pop-up con opciones. Estas te permiten modificar el frame que has enlazado, seleccionar el disparador, el tipo de animación y qué duración quieres que tenga.

 

Aunque explicarlas al detalle daría para un artículo entero, te cuento brevemente qué hacen (aunque también te digo que lo mejor que puedes hacer es juguetear con ellas ^^):

 

  • El primer desplegable (que por defecto tiene on tap) te permite definir qué tiene que pasar (trigger o disparador) para que el prototipo avance hacia la siguiente pantalla:
    • On tap: mediante clic, ya sea con el cursor o con el dedo si es un dispositivo móvil
    • On drag: cuando arrastras un elemento, que puede ser un grupo, un frame o cualquier capa
    • While hovering: cuando el cursor pase por encima
    • While pressing: cuando estás haciendo clic (es diferente a la primera opción)
    • Key/gamepad: cuando haces clic en cualquier tecla del teclado que tú definas
    • Mouse enter o leave: cuando el cursor «entre» en esa área o salga de ella
    • Touch down / up: cuando estás haciendo clic o estás dejando de hacer clic

 

 

  • El segundo desplegable te permite escoger qué pasará (cómo se verá) cuando el prototipo avance de una pantalla a la siguiente. Todas ellas tienen además un grado más profundo de personalización, ya que podrás definir el tiempo que dura la animación, como se comporta, la dirección…

 

  • Instant: sin más, simplemente pasa de una pantalla a otra
    • Dissolve: la transición es un poco más suave que con la opción anterior.
    • Smart animate: si entre los dos grupos (frames o capas) que estás enlazando hay algún elemento en común que por ejemplo esté desplazado este se animará para pasar de la posición original a la final.
    • Move in / out: la segunda pantalla aparecerá por encima de la inicial (entrando o saliendo, según la opción que selecciones).
    • Push: literalmente «empujará» la primera pantalla fuera del dispositivo
    • Slide in / out: similar a las dos anteriores, pero esta seguramente te será más útil para hacer aparecer navegaciones.

 

Al hacer clic/al tocar

Activa la acción cuando el usuario  hace clic  (escritorio) o  toca  (móvil) en un punto de acceso en su prototipo. Puede agregar disparadores de clic o toque a muchos elementos diferentes en una pantalla.

Puede usarlos para navegar, como abrir enlaces, usar menús o explorar sitios web. También se pueden usar cuando necesita que un usuario haga clic en botones, complete formularios o confirme y descarte alertas.

 

Al arrastrar

Le permite realizar una acción cuando arrastra un elemento en la pantalla. Esto puede ser todo el marco o un solo elemento como un control deslizante.

Puede utilizar On Drag en cualquier dirección: Izquierda, Derecha, Arriba o Abajo. Esto es excelente para gestos de deslizamiento simples o para animaciones más complejas como arrastrar para actualizar.

Arrastrar le permite avanzar y retroceder 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.

 

mientras flota

Activa la acción cuando se desplaza sobre el punto de acceso. Puede usar esto para replicar información sobre herramientas, indicaciones en pantalla o cambios de estado.

Regresaremos al usuario al marco original cuando mueva el cursor fuera del punto de acceso. Esto lo convierte en una excelente interacción cuando no desea sacar a los usuarios de la pantalla actual.

 

Mientras presiona

Activa la acción cuando  hace clic y mantiene presionado  el mouse o el panel táctil en un escritorio. O bien, cuando  toca y mantiene presionado  un dispositivo móvil.

Puede usar este activador para navegar por los menús desplegables o replicar interacciones de pulsación prolongada, como ver una vista previa con 3D Touch en iOS.

Cuando se publique, llevaremos al usuario de regreso al Marco original. Esto lo hace ideal para Superposiciones que capturan interacciones temporales o cambios de estado.

 

Atajos de teclado y gamepad

El disparador Keyboard/Gamepad te permite replicar interacciones con un atajo de teclado. Esto se aplica a las entradas del usuario desde teclados, controladores y gamepads.

Un disparador puede ser una sola tecla o botón, o una combinación de teclas.

Por ejemplo: un activador puede basarse en que el usuario presione la tecla Intro o el botón ✕ en un controlador. O usando un atajo como Shift– K.

Nota: oficialmente admitimos los controladores Xbox One, PS4 y Nintendo Switch Pro. Otros controladores pueden funcionar, pero es posible que los botones que se muestran en Figma no reflejen con precisión el controlador.

 

https://help.figma.com/hc/en-us/articles/360040035834-Prototype-triggers

https://www.smashingmagazine.com/2021/07/introduction-figma-interactive-components/

 

Estados del componente  #

 

Esta es la lista de los diferentes estados de este componente, incluidos también los disparadores que vamos a usar para cambiar de una variante a otra.

 

  1. Predeterminado — Predeterminado,
  2. Pasar el cursor – Mientras pasa el ratón,
  3. Presionado — MouseDown,
  4. Activo — MouseUp (podría ser posible usar On Click para obtener el mismo resultado),
  5. Pase el mouse mientras está activo: mientras se desplaza,
  6. Presionado mientras está Activo — MouseDown.

 

Consejo útil: es posible usar MouseDown para simular que el botón se presiona pero no se suelta y luego usar MouseUp para activar una transición, es un buen detalle de interacción que hace que el botón se sienta más real.

 

Un solo botón desplegable animado con sus seis estados diferentes.
Utilice el disparador MouseDown antes del disparador Click.