Alaaaaaaa!!! ESTOY FASCINADAAAA CON ESTE CURSO EN SERIO!! Platzi siempre rifándose!!
Introducción
¿Para qué sirve Figma y por qué elegirlo?
Interfaz en Figma
Quiz: Introducción
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
Quiz: Básicos
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
Quiz: Combo
Prototipado
Prototipado simple: interacción de scroll
Prototipado simple: conexión de diferentes frames
Prototipado avanzado: smart animate y componentes Interactivos
Quiz: Prototipado
Co-Creando
Cómo agregar comentarios a los diseños
Historial de versiones en Figma
Librerías de estilos y componentes
Quiz: Co-Creando
Superpoderes
FigJam
Uso de plugins en Figma
Community: proyectos open-source y perfiles
Quiz: Superpoderes
Cierre
Proyecto final del curso de Figma
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Prototipado avanzado: smart animate y componentes Interactivos
18/25Recursos
Aportes 65
Preguntas 9
Ordenar por:
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.
Poco a poco ❤️
Me encantó esta clase! No sabia que eso se podía hacer 🥰
Como me gusta el background del profesor, Es un verde increible!
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
**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.
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 .
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
**Avance del proyecto hasta el momneto:**
Prototipo Figma: <https://www.figma.com/proto/BdRRVdYq9KOnqH1UDgEwtz/Proyecto_Platzi?page-id=0%3A1&type=design&node-id=1-2&viewport=1098%2C400%2C0.64&t=ZHa42LjJZwK8Bkpf-1&scaling=contain&mode=design>
Avances: <https://www.figma.com/proto/2h6t93CcyLZC80dLEzop7A/App-de-Notas?type=design&node-id=17-10&t=ejNIiijalXfvHEHf-1&scaling=scale-down&page-id=3%3A2&starting-point-node-id=3%3A3&mode=design>
comparto mi prototipo en Behance <https://www.behance.net/gallery/184617421/Platzi-Notes-App>
Envío mi avance <https://www.figma.com/proto/6v6jpo1SSvgrLqodD86TbA/PROYECTO-PLATZI?page-id=0%3A1&type=design&node-id=19-13&viewport=95%2C-250%2C0.62&t=iy1FCzJmKwgSMwXc-1&scaling=scale-down&starting-point-node-id=19%3A13&mode=design>
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
Les comparto mi proyecto. La practica hace al maestro. 😃
https://acortar.link/Og3NvR
Cada que avanzo me gusta más figma ❤️
Está muy chévere el curso, muy útil todo lo que ha explicado y en líneas generales, la mayoría del contenido ha sido bastante claro 😉
Les comparto los avances en mi prototipo
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
Pasé horas probando diferentes maneras de hacer la animación. Lo primero que uno intenta hacer es reducir la longitud de la línea verde... pero eso no funcionó. Finalmente pude hacerlo moviendo la línea verde hacia la izquierda, sin modificar su longitud.
Ciertamente hay muchos detalles omitidos en esta clase. Pero no seamos negativos y sigamos adelante con todo lo que ya hemos aprendido y queda por aprender.
La animación no funciona. Se pierde muchísimo tiempo buscando y probando.
lo que buscaba el abc de FIGMA hasta un gran diseño
Aca muestro mi avance: <https://www.figma.com/proto/TQh8eJmINFkMos3zvGWBwg/App-Notes-Platzy?page-id=0%3A1&node-id=149-30&viewport=643%2C420%2C0.56&t=cXeAjO8UMqEuJMPe-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=22%3A87>
Gracias por brindar tus conocimientos excelente curso
3:00
Ame esta clase, es impresionante lo que se puede hacer con el prototipado y las animaciones.
<https://www.figma.com/file/KiqfD3ltnQmuHIXR5HBhVz/Untitled?type=design&node-id=0%3A1&mode=design&t=vuiSrOzdqYVhrO2c-1>
Aqui comparto mi proyecto, al hacerlo me surgieron muchas dudas pero parece que no hay un profesor para contestarlas lo cual es una lastima pensé que en platzi a diferencia de domestica si ofrecían ese servicio como parte de una educación integral y no solo publicar videos en un servidor.
Hay un gap cuando hago scroll vertical si alguien sabe por que pasa eso
<https://www.figma.com/file/6NmzH7Sc27sgoaq7KdK3it/Curso-Figma-Prototipado-Interfaces?type=design&node-id=1%3A50&mode=design&t=lSSz0GUeTjBY31Q4-1>
Ahhh termine, lo comparto <https://www.figma.com/proto/ctK1qzcv1UZwTrTSK7dgym/Untitled?page-id=0%3A1&type=design&node-id=1-2&viewport=668%2C727%2C1.77&t=3dSQE42d8mgL106K-1&scaling=scale-down&starting-point-node-id=22%3A5&mode=design>
Hace rato no me enganchaba con una aplicación! 🎉
Me ha entusiasmado mucho este curso! Les comparto mi prototipo
<https://www.figma.com/proto/Au8W0QBvirYLTYgaDDtxqN/Untitled?type=design&node-id=14-65&t=Tz652SCqIK4SWTHM-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=14%3A65&mode=design>
Excelente!!!!
Hasta aquí mi avance con el proyecto del curso
<https://www.figma.com/file/FtWPGp7i6V8jZGGFjDiCnx/Platzi-Course?type=design&node-id=0%3A1&mode=design&t=rSgVComUXSkgnW9B-1>
Excelente clase la verdad. Estoy aprendiendo mucho con este curso.
Comparto mi prototipo:
<https://www.figma.com/proto/eDzqXfEkAwc14AKwidGd0c/Versi%C3%B3n-Interacciones?page-id=0%3A1&type=design&node-id=7-10&viewport=-426%2C140%2C0.85&t=1kxjUsRVx5zzx8Mt-1&scaling=scale-down&mode=design>
Este curso no se que tan viejo es pero figma tiene una interfaz un poco diferente a como el la muestra en el curso tendré que buscar tutoriales que este actualizados a como esta la plataforma hoy
¿Al crear este tipo de efectos, influye en algo si se usan componentes o frames de cierto tipo? Me pasó que hice el ejercicio una vez y me salió bien, pero ahora nuevamente cree todo de cero y usé componentes y algunos frames dentro de este, pero el efecto no me quedó igual a pesar de tener la misma configuración de la clase.
Dos horas para solo colocar los dos mensajes sobre los demás elementos. Al final no supe como lo logré. 😅 ¿Te pasó?
.
.
Ordenar cosas con CSS es más fácil. 🔥😬
Aqui mi avance. (urhttps://www.figma.com/proto/wN1vdNFwgNF12elrLpUdMl/Untitled?type=design&node-id=1-2&t=lyLPCIlROCoKMaeu-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A2&mode=designl)
En el mío no funciona el After Delay
Me uno al comentario de mis compañeros bien explicado, dinamicas las clases estoy aprendiendo mucho…muy agradecido son otro rollo!!
Es muy genial lo sencillo que se hace cuando explican todo en detalle, para que sirve una herramienta o a veces que significa incluso, que vayan paso a paso. Debo decir que sólo dos clases muy anteriores se me habían hecho pesadas de entender, pero ahora voy como avión jaja. Espero ansiosa un curso de Figma con las últimas actualizaciones del 2023 y que ya están en Beta.
Así va mi prototipo
Muy interesante esta clase, lástima que no me deje compartir mi link de los prototipos
Nooo, es muy linda la animación, me encantó cómo queda, es genial!
-
Prototipado avanzado: smart animate y componentes Interactivos
Animación inteligente
- Smart Animate es una función que permite crear transiciones suaves entre dos marcos o elementos. Para hacer un Smart Animate, se necesitan dos marcos, uno que representa el punto de origen y otro que representa el punto de destino. Luego, se define una interacción que activa el desencadenante de la animación. La clave para hacer una buena animación con Smart Animate es encontrar el ritmo adecuado.
- Por otro lado, los componentes interactivos son elementos que se pueden reutilizar en todo el diseño y pueden tener interacciones asociadas. Por ejemplo, un botón que cambia de color cuando se pasa el cursor sobre él. Al utilizar componentes interactivos, se puede ahorrar tiempo y asegurarse de que las interacciones sean coherentes en todo el diseño.
- Es importante nombrar las capas y componentes cuidadosamente para evitar confusiones en el futuro. Además, el tiempo máximo de respuesta a una acción o trigger debe ser de 400ms para asegurarse de que la animación se sienta natural para el usuario.
- 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
- Un trigger puede ser el tiempo
- Interesante como animar estas interfaces
Buenísima clase!!! Con cada avance me emociono más viendo el prototipo funcionando y aún más viendo que yo misma lo estoy creando. 😃
Aquí dejo mi prototipo 💚
Me va gustando mucho figma y sus interacciones. Aquí les dejo mi resultado:
Aqui dejo mis avances del prototipo en curso
Avances del proyecto 🚀🚀💚💚
Prototipo
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!
Excelente clase
Que buena esta clase!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?