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
Aportes 65
Preguntas 9
Alaaaaaaa!!! ESTOY FASCINADAAAA CON ESTE CURSO EN SERIO!! Platzi siempre rifándose!!
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
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
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
Excelente clase la verdad. Estoy aprendiendo mucho con este curso.
¿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
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?