Sesión 18: Prototipando componentes

MÓDULO 5: DISEÑO DE INTERFAZ Y DE INTERACCIÓN

Lunes 22 Agosto 2022. En clases me dedico a prototipar elementos, como aquellos se encuentran en ingles, trato de traducirlos y probar cada uno de ellos. Cada componente debiera estar animado.

Conceptos básicos de Smart Animate

Antes de poner las manos a la obra, veamos algunos conceptos básicos respecto a Smart Animate en Figma.

Smart Animate es uno de los tipos de animación que podemos elegir cuando estamos configurando nuestras interacciones en el modo Prototype.

Smart Animate realiza un seguimiento de los valores de Escala, Posición, Opacidad, Rotación y Color de Relleno de todas las capas que tengan el mismo nombre y jerarquía en tus distintos frames.

Todo lo que tenemos que hacer es realizar los cambios que deseemos entre un frame y otro, activar Smart Animate, y Figma hará su magia!

Podés revisar cuáles capas están siendo consideradas para Smart Animate pasando tu cursor encima de ellas, tendrían que iluminarse en los otros frames en los que se encuentren.

Llenar

Figma animará de forma inteligente cualquier cambio en el relleno de un objeto. Esto le permite animar cambios entre colores sólidos, degradados e incluso rellenos de imagen.