No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

2D
9H
48M
38S

Prototipado avanzado: smart animate y componentes Interactivos

17/27
Recursos

Aportes 25

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Alaaaaaaa!!! ESTOY FASCINADAAAA CON ESTE CURSO EN SERIO!! Platzi siempre rif谩ndose!!


Prototipado avanzado: smart animate y componentes Interactivos

Prototipado con Smart animate

Como se mueve un elemento en la vida real?
Se desplaza desde un punto A un punto B, tomando velocidad al
principio y desacelerando al final.

Que necesitamos para hacer un smart animate?

  • Dos frames con la misma cantidad de frames y sus nombres correspondientes.
    • Uno sera el punto A
    • Y el otro sera el punto B
  • Definir una interaccion que cause el trigger de la animacion

Parametros del trigger

  • None
  • On tap / drag
  • While hovering / pressing
  • key / Gamepad
  • Mouse enter / Leave
  • Touch down / Up

La clave esta en el ritmo

Como quitamos elementos de una interfaz?

  • Un elemento desaparece cuando su opacidad se mueve desde 100% a 0%
  • Tambien puede desaparecer con movimiento, sacandolo del frame
  • Combinando ambos

Recomendaciones

  • Nombra muy bien tus capas: Esto te ayudara a identificar facilmente
    los diferentes objetos que se estan moviendo a lo largo de los frames

  • El tiempo maximo de respuesta a una accion / trigger debe ser de 400
    milisegundos 鈥淒oherty Threshold鈥

Les comparto mi avance (Lastima que no se puedan subir gifs):

https://gifyu.com/image/ShXUW


Poco a poco 鉂わ笍

SMART ANIMATE SOLUCI脫N:
Para empezar todos las partes del mensaje de link copiado deben estar dentro de un frame, asimismo deben estar dentro de auto layout, esto ultimo es importante porque por esta raz贸n a mi no me funcionaba, sino que la pantalla 煤nicamente se desvanec铆a. Les dejo el link donde figma explica que hay si una propiedad no es compatible entonces solo disolver谩 la pantalla (mi caso).
https://help.figma.com/hc/en-us/articles/360039818874-Create-advanced-animations-with-smart-animate#:~:text=Figma will smart animate any,gradients and even image fills.&text=Figma doesn鈥檛 support smart,apply a default dissolve transition.

Les dejo una segunda opci贸n por si aun asi no les funciona pueden utilizarlo de esta forma:

Espero les sea de mucha ayuda.

Me encant贸 esta clase! No sabia que eso se pod铆a hacer 馃グ

Como me gusta el background del profesor, Es un verde increible!

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • Smart Animate = Animaci贸n inteligente

  • Entre m谩s natural sea el movimiento de las interfaces, mas natural se va sentir nuestro usuario con el prototipo

  • Para hacer un smart animate necesitamos dos frames, en donde uno es el punto de origen y el otro es el punto de destino

  • Debemos definir una interacci贸n que causa el trigger de la animaci贸n

  • La clave esta en el ritmo

  • Podemos desaparecer un elemento llevando su opacidad a 0% o sac谩ndolo del frame, tambi茅n podemos usar las dos opciones al mismo tiempo

  • Es importante nombrar muy bien nuestras capas para evitar confundirnos en un futuro

  • El tiempo m谩ximo de respuesta a una acci贸n o Trigger debe ser de 400ms

  • Un trigger puede ser el tiempo

  • Interesante como animar estas interfaces

Aqu铆 les dejo el Instagram de Zander Whitehurst https://www.instagram.com/zanderwhitehurst/
El tambi茅n hace parte de Memorisely y hace prototipos y componentes con interacciones muy tesas

Hola a todos! Dejo mi prototipo. Cambie un poco el estilo de mi APP de notas y agregu猫 mas color. Los links a Youtube son clickeables por si quieren escuchar algo de musica de paso. La nota de Gorillaz se puede eliminar y la de Daft Punk puede ser compartida. Saludos!

https://www.figma.com/proto/3Rg6D1IGfihHaqKQ7CsTqc/Untitled?page-id=0%3A1&node-id=1%3A42&viewport=62%2C340%2C0.19&scaling=scale-down&starting-point-node-id=1%3A42

Holaa!! espero esten bien !! , cuando hago la animacion de progreso no puedo debido que que opcion me aparece deshabilitada , no se si a alguien mas le pasa .

Avances del proyecto 馃殌馃殌馃挌馃挌
Prototipo

Excelente clase

Aqu铆 dejo mi prototipo 馃挌

![](

Comparto mi prototipo; sin embargo, quiero mejorarlo pues como dec铆a el profe: No nos debemos conformar con el primer dise帽o o la primera idea que tengamos.
https://www.figma.com/proto/KYwGzJo5XSg6XmRpQCgCUf/Proyecto-figma?page-id=32%3A10&node-id=34%3A354&viewport=366%2C870%2C0.85&scaling=scale-down&starting-point-node-id=34%3A354

Que buena esta clase!