Transiciones más suaves con Smart Animate

Clase 23 de 29 • Curso de Figma - 2020

Juan Bedoya

student•

Amiges les comparto este link donde tengo una recopilación de blogs, canales de youtube, y màs sobre diseño UI y UX. Espero que les sea útil:Recopilación sobre UX - UI

Luis Felipe Ibañez

student•

¡Excelente recopilación!

Miguel Ángel Lozada Niño

student•

¡Muchas gracias Felipe! Gran aporte

Naza maurice

student•

Aqui esta mi prototipo con las transiciones :) Espero su feedback

Yesid Giovanni Hernandez Perez

student•

Esta chidoooooooooooooooo!

Sebastian Guerra

company_admin•

Excelente

Arles A. Pinzon Molina

student•

“El tiempo máximo de respuesta a una acción / trigger debe ser 400 más. A eso se le llama “Doherty Threshold”

Santiago Camargo

teacher•

400 milisegundos, para ser exactos! Esta y otras reglas maestras de ux las pueden encontrar en

Arles A. Pinzon Molina

student•

Súper! Gracias, Santi 😄 se me fue el autocorrector. Me está gustando mucho este curso.

Diana Martinez

student•

¿Será que el profesor nos pueda compartir una copia de este proyecto?

Santiago Camargo

teacher•

Puedes ver una versión desorganizada de ese archivo en este link

César Mejía Silva

student•

Gracias Santiago!

Harold Challco

student•

![](

Lucy Dania De La Cruz Hidalgo

student•

Oscar Marcelo Rivadeneira Cevallos

student•

Están muy bonitas esas animaciones, pero tengo una pregunta, ya cuando el prototipo pase a desarrollo, los programadores no van a ocupar otro tipo de animaciones?, la cuestión es, ¿No sería mas realista usar animaciones que los programadores usen siempre?, porque si yo hago esto como prototipo y el cliente o alguien ve esto, pero después el producto final no es fiel al prototipo es una falla del diseñador, solo digo esto, porque he trabajado muchos años en una empresa de desarrollo, y las animaciones para ellos no es fácil, cuesta mucho tiempo lo que se traduce en dinero. Si me gustaría que alguien me explique desde el punto de vista de un desarrollo final de producto, no tanto a nivel prototipado. Gracias

Giuseppe Ramirez

student•

Hola, Oscar. Tu punto es muy acertado y muy apegado a la realidad. Todo esto dependerá de la comunicación y si el sistema de diseño está documentado (lo cual es muy importante). Ahora si como diseñador quieres tener en tu radar que pueden o no hacer los desarrolladores con respecto a las animaciones puedes darte una vuelta por estos dos cursos:

Irving Juárez

student•

Hola, para los desarrolladores front-end las animaciones son difíciles porque no siempre pasa lo que uno quiere. Sin embargo, hay ciertas herramientas que nos ayudan mucho para las animaciones con css (en caso de que se desarrollen productos web). Entre estos están

. Entre muchas otras. Además de esto, creo que la experiencia del usuario habla mucho de la empresa y es algo importante. Como ultimo detalle, quiero decir que Figma tiene los constraints de lo que se puede desarrollar en relacion a aplicaciones o paginas web. Con curiosidad y paciencia, los prototipos pueden llegar a ser productos finales idénticos a el diseño.

Juan Sebastián Sierra Morales

student•

Resumen SM 🚀

Transiciones más suaves con Smart Animate

Smart Animate permite animar un elemento tal como ocurre en la vida real, logrando una mejor experiencia de usuario.

¿Cómo se mueve un elemento en la vida real?

Se desplaza desde un punto A hasta un punto B, acelerando al principio y desacelerando al final.

¿Qué necesitamos para hacer un smart animate?

Dos frames con la misma cantidad de capas y sus nombres correspondientes
- Uno será el punto A
- El otro será el punto B
Definir una interacción que cause el trigger de la animación

Parámetros del trigger

None
On Tap / Drag
While Hovering / Pressing
Key / Gamepad
Mouse Enter / Leave
Touch Down / Up ¡La clave está en el ritmo!

¿Cómo quitamos elementos de una interfaz durante la animación?

Un elemento desaparece cuando su opacidad se mueve desde 100% a 0%.
También puede desaparecer con movimiento, sacándolo del frame.
Combinando ambos

Recomendaciones

Nombra muy bien tus capas
- Esto te ayudará a identificar fácilmente los diferentes objetos que se están moviendo a lo largo de los frames.
El tiempo máximo de respuesta a una acción / trigger debe ser de 400 ms.
- “Doherty Threshold”

By SsimorPro

Johan Marín Valencia

student•

Saben cómo hacer el scrolling horizontal y que cada que corra una card aparezca grande como en el ejemplo del profesor?

Damián Bonani

student•

La única manera que encontré fue la que se ve en la imagen. Igual no queda bien la animación al hacer scroll, porque cambian el punto de partida del objeto. Sera que solo sirve para hacer un prototipo, con que se muestre la animación de una imagen, el resto se entiende que debe ser igual.

Enyelber Altube

student•

Muy Buen Sitio lawsofux

Jose Anibal Garcia Giraldo

student•

Que fluido y que natural se sienten las transiciones con Smart Animate :D

Andres Badillo

student•

Mi Prototipo: Seguro cuando lo veas ya estará más avanzado

Luis Narvaez

student•

minuto 6:45 -> Para que no aparezcan las cards en la esquina, es recomendable unir las 3 cards como un auto-layout en los 2 frames.

Andrés Felipe García Castro

student•

Javier Manobanda

student•

Jair Iqui Balam Reséndiz Rodriguez

student•

[https://www.figma.com/file/iMemoOLE3LSYU6ajqyJtI7/Pick-Up?node-id=0%3A1] Comparto mi Aporte junto con lo visto en las sesiones (:

Wangky Wangky Romero

student•

En este ejercicio pude aplicar el On tap con el Smart Animate y el on drag pero quede con la duda del after delay ya que eso no se ha comentado 😅, comparto mi prototipo actualizado

Anaís Martínez

student•

No sé si fui la unica que pensó en buscar algo dulce al refrigerador cuando habló de ir de un punto A a un punto B

Johan Alejandro Cristancho Medina

student•

Prototipo Les agradezco sus comentarios

Eduardo Sanoja

student•

https://www.figma.com/proto/AyQIw7905w4Pivr7nDGrpZ/Prototipo-conectando-frames?scaling=scale-down&page-id=0%3A1&node-id=1%3A2

Transiciones más suaves con Smart Animate

Introducción a Figma

Figma: colaboración a gran escala

Diferencias entre la versión gratuita y los planes de paga

Conociendo la interfaz

Budgetrip: el proyecto de tu curso

Importando archivos desde otras apps

Fundamentos de Figma

Domina la herramienta de texto

Creación de objetos y efectos

Creando efectos

Retículas y Guías: componer la complejidad

Agregando imágenes

Selección de color

Vectores: aprende a combinar figuras

Composición Orquestada

Integración: importar y exportar elementos

Constraints: usa las restricciones a tu favor

Styleguides: creación de estilos

Auto-Layout: un amigo para la vida

Shortcuts: atajos para agilizar tu proceso

Colaborando y Co-Creando con Figma

Herramientas de Co-creación: comentarios

Agilidad y consistencia a través de componentes

Organiza tus componentes

Prototipado: dale vida a tu interfaz

Prototipado: conectando frames

Transiciones más suaves con Smart Animate

Versionamiento: recupera el pasado

Librerías de estilos y componentes

Plugins: extiende funcionalidades

Community: colaboración universal

Proyecto Final: Budgetrip

Mentoría Expert

Prototipado en vivo: Figma