Prototipado avanzado: smart animate y componentes Interactivos

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

Hola! Me ha gustado mucho el curso.
Aquí os comparto mi prototipo y proyecto:

Prototipo:
https://www.figma.com/proto/rfFInfaJYRVtacCocOnDTn/Curso-Figma-Basico-Plazzi?page-id=0%3A1&node-id=3%3A21&viewport=1373%2C608%2C1&scaling=scale-down&starting-point-node-id=3%3A21

Proyecto:
https://www.figma.com/file/rfFInfaJYRVtacCocOnDTn/Curso-Figma-Basico-Plazzi?node-id=3%3A21

Feedback welcome!

Saludos

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 “Doherty 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’t 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!

Les comparto mi prototipo:
https://www.figma.com/proto/7AgZfV6TviVkhMejUev4gx/Untitled?page-id=3%3A2&node-id=3-2&viewport=181%2C370%2C0.7&scaling=scale-down&starting-point-node-id=19%3A179

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

aqui esta mi aporte
https://www.figma.com/proto/0i0px0sDrh38mKkiAkN720/App-de-notas?page-id=37%3A147&node-id=37%3A148&viewport=441%2C141%2C0.5&scaling=min-zoom&starting-point-node-id=49%3A225

Así quedó mi prototipado

https://www.figma.com/proto/xQiae9EaZsY1ahpJn0eFzN/Curso-de-Figma?page-id=0%3A1&node-id=1%3A2&viewport=617%2C382%2C0.89&scaling=scale-down&starting-point-node-id=20%3A19

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

Hola aquí dejo los avances
https://www.figma.com/proto/7CECLKNUPjUXzPjdGAvjjb/Plantilla?page-id=0%3A1&node-id=12%3A66&viewport=76%2C404%2C0.5&scaling=scale-down&starting-point-node-id=12%3A66&show-proto-sidebar=1

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

Aqui dejo mis avances del prototipo en curso

https://www.figma.com/proto/soDW0hPRTq08kJt0hBmu42/Untitled?page-id=0%3A1&node-id=11%3A30&viewport=261%2C256%2C0.51&scaling=scale-down&starting-point-node-id=53%3A457

Me va gustando mucho figma y sus interacciones. Aquí les dejo mi resultado:

https://www.figma.com/proto/Ed9R4MBduZ5RbUUCxTENOu/Platzi-Notas-(Community)?page-id=542%3A202&node-id=552%3A138&viewport=976%2C319%2C0.95&scaling=scale-down

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!