Prototipado avanzado: smart animate y componentes Interactivos

Clase 18 de 25 • Curso Básico de Figma - 2022

Clase anteriorSiguiente clase

Xiomara Alejandra Hernández Arzola

student•

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

Himar Del rio plata

student•

Totalmente de acuerdo🙌🏽🙌🏽🙌🏽🙌🏽

JAIRO SALAZAR CASTAÑO

student•

Igualmente me encanta estas clases. Son las que mas tiempo le he dedicado. :)

Jader Moncayo

student•

Aideé Granados

student•

Ruth Abigail Diaz Lopez

student•

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%20will%20smart%20animate%20any,gradients%20and%20even%20image%20fills.&text=Figma%20doesn't%20support%20smart,apply%20a%20default%20dissolve%20transition.

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

Espero les sea de mucha ayuda.

JAIRO SALAZAR CASTAÑO

student•

Gracias! por el aporte

Julio César Pacheco Perales

student•

mil gracias por tu aportación, me sirvió mucho, aunque sigo probando parámetros y sigue sin verse la animación de la barra irse apagando poco a poco, seguiré intentando, pero estas cosas son las que el profesor debió haber explicado mucho mejor.

Luis Erick Montes Garcia

student•

Poco a poco <3

Tania Naranjo

student•

Me encantó esta clase! No sabia que eso se podía hacer 🥰

PAULO CESAR GALARZA

student•

Acabo de verla y de vdd esta genial

JAIRO SALAZAR CASTAÑO

student•

Genial!

Melina Anahi Viera

student•

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

Jennipher Bermúdez Ballesteros

student•

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

Pável Hernández Reza

student•

Doherty threshold

El término "Doherty threshold" se refiere al concepto acuñado por Walter J. Doherty, quien fue un investigador de IBM en la década de 1980. Doherty realizó estudios sobre la percepción del tiempo de respuesta en sistemas informáticos y su impacto en la productividad y satisfacción del usuario.

El "Doherty threshold" representa un punto crítico en la experiencia del usuario, donde el tiempo de respuesta de un sistema alcanza un nivel que permite una interacción fluida y productiva. Por lo general, se refiere al tiempo de respuesta de un sistema informático en relación con la percepción humana y cómo este tiempo influye en la eficacia y la satisfacción del usuario.

Este concepto es especialmente relevante en el diseño de interfaces de usuario y en el desarrollo de aplicaciones, ya que una respuesta rápida del sistema es crucial para mantener la atención y la productividad del usuario. Por lo tanto, los diseñadores y desarrolladores suelen tener en cuenta el umbral de tiempo de Doherty al diseñar y optimizar la experiencia del usuario en sus productos digitales.

Edith Johana Colmenares Contreras

student•

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 .

Angelica María Sánchez Borja

student•

Debes convertir la pantalla en un frame para que puedas ponerle interacciòn.

Cindy Milena Fontalvo Jiménez

student•

convertirlo en un frame y luego de eso puedes aplicar auto Layout. cuarteamos si lo conseguiste Edith.

Alex Valles

student•

Mi aporte Si necesitan sabe cómo se hace para que al presionar los tres puntos las opciones se deslicen desde abajo, cuando vayan a hacer el prototipado en vez de darle a la opción de navegate, deben de darle open overlay

https://www.figma.com/file/Kg9zdSy3aolRDKFi877jFQ/Primer-proyecto?type=design&node-id=0%3A1&t=RG5hqKyBpMzXqgTQ-1

Jorge Morales Pérez

student•

Hola, mi barra verde al momento de disminuir no lo hace de forma descendente, si no inmediatamente,por que?

Santiago Camargo

teacher•

Revisa el tipo de animación que tienes funcionando.

Melissa Monroy Moreno

student•

Ayuda :( he intentado con la animación de la barra de progreso de mil maneras y se sigue viendo con la configuración linear, ease out, ease in and out, con todas se ve como si entrara difuminado el cambio y es casi que instantaneo no se mueve

Ruth Abigail Diaz Lopez

student•

Ya encontré la solución, buscala en la sección de aportes.