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 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.

Raúl Adolfo Sánchez Rodríguez

student•

Avance del proyecto hasta el momneto:

Prototipo Figma:

Yadira Avila

student•

Avances:

mariela gutman

student•

comparto mi prototipo en Behance

Nina Zambrano

student•

Envío mi avance

Wilmer Hilarion

student•

Buenas tardes, comparto mi prototipo: https://www.figma.com/proto/Oj5vkQUg99QxLOUSqS1ymO/Untitled?type=design&node-id=312-22&t=2IZbDiDog7SNRvJl-1&scaling=scale-down&page-id=312%3A20&starting-point-node-id=416%3A238&mode=design

Brayan Cristancho

student•

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

JAIRO SALAZAR CASTAÑO

student•

Les comparto mi proyecto. La practica hace al maestro. :) https://acortar.link/Og3NvR

Paloma Canales

student•

Faltan los permisos de acceso creo. No me permite verlo ;)

Prototipado avanzado: smart animate y componentes Interactivos

Introducción

¿Para qué sirve Figma y por qué elegirlo?

Interfaz en Figma

Básicos

Configuración de guías y retículas

Creación de textos y estilos

Figuras e imágenes en Figma

Efectos en Figma

Redes de Vectores

Colores en Figma

Combo

Importar y exportar

Cómo crear guías de estilo

Auto-Layout

Los 15 mejores atajos para trabajar en Figma

Creación de componentes reutilizables: clase teórica

Creación de componentes reutilizables: clase práctica

Playground: Practica la creación de componentes reutilizables

Prototipado

Prototipado simple: interacción de scroll

Prototipado simple: conexión de diferentes frames

Prototipado avanzado: smart animate y componentes Interactivos

Co-Creando

Cómo agregar comentarios a los diseños

Historial de versiones en Figma

Librerías de estilos y componentes

Superpoderes

FigJam

Uso de plugins en Figma

Community: proyectos open-source y perfiles

Cierre

Proyecto final del curso de Figma