En este módulo, exploraremos las técnicas avanzadas de animación en Figma, que te permitirán crear prototipos más dinámicos y atractivos. Aprenderás a utilizar las herramientas de animación de Figma para mejorar la experiencia del usuario y comunicar de manera efectiva las interacciones de tu diseño.

1. Transiciones de Animación:

   • Las transiciones son cambios suaves entre dos estados de un componente. En Figma, puedes definir cómo y cuándo ocurren estas transiciones.
   • Propiedades de Transición:
     • Duración: Tiempo que tarda la transición.
     • Easing: Controla la aceleración de la transición (por ejemplo, ease-in, ease-out).

2. Animaciones de Estado:

   • Permiten cambiar entre diferentes estados de un componente, como hover, click o focus.
   • Ejemplo: Cambiar el color de un botón al pasar el ratón sobre él.

3. Animaciones de Desplazamiento:

   • Utilizadas para mover elementos dentro de un marco o entre marcos.
   • Ejemplo: Deslizar un panel lateral dentro y fuera de la vista.

Vamos a crear una animación simple donde un panel lateral se desliza desde el lado izquierdo de la pantalla.

1. Crear los Marcos:

   • Crea dos marcos en Figma: uno para el estado inicial (sin panel) y otro para el estado final (con panel).
   • Asegúrate de que ambos marcos tengan el mismo tamaño.

2. Diseñar el Panel:

   • En el marco final, dibuja un rectángulo que represente el panel lateral.
   • Posiciona el panel fuera del marco en el estado inicial y dentro del marco en el estado final.

3. Configurar la Animación:

   • Selecciona el marco inicial y crea una interacción que lo lleve al marco final.
   • En el panel de propiedades de interacción, selecciona "On Click" como el disparador.
   • Elige "Navigate To" y selecciona el marco final.
   • Configura la animación como "Slide In" desde la izquierda, con una duración de 300ms y un easing de "Ease Out".

Objetivo: Crear una animación de botón que cambie de color al hacer clic.

1. Diseña un Botón:

   • Crea un botón simple con texto en un marco.

2. Configura los Estados:

   • Define dos estados para el botón: estado normal y estado clicado (con un color diferente).

3. Añade la Interacción:

   • Configura una interacción "On Click" que cambie el estado del botón al estado clicado.
   • Usa una transición de color suave con una duración de 200ms.

• Error: Animaciones demasiado rápidas o lentas.

  • Consejo: Ajusta la duración de las animaciones para que sean perceptibles pero no molestas.

• Error: Uso excesivo de animaciones.

  • Consejo: Utiliza animaciones para mejorar la experiencia del usuario, no para distraer.

Las técnicas avanzadas de animación en Figma te permiten crear prototipos más interactivos y atractivos. Al dominar las transiciones, los estados y los desplazamientos, podrás comunicar de manera efectiva las interacciones de tu diseño. En el próximo módulo, exploraremos cómo los plugins de Figma pueden mejorar aún más tus prototipos.