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
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
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
¡Conoce otros proyectos de este curso!
Autoevaluación del curso básico de Figma: Prototipado y Diseño de Interfaces
Proyecto final del curso de Figma
Live Class
Live Class
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 25
Preguntas 4
Alaaaaaaa!!! ESTOY FASCINADAAAA CON ESTE CURSO EN SERIO!! Platzi siempre rifándose!!
Hola! Me ha gustado mucho el curso.
Aquí os comparto mi prototipo y proyecto:
Proyecto:
https://www.figma.com/file/rfFInfaJYRVtacCocOnDTn/Curso-Figma-Basico-Plazzi?node-id=3%3A21
Feedback welcome!
Saludos
Prototipado avanzado: smart animate y componentes Interactivos
Prototipado con Smart animate
Como se mueve un elemento en la vida real?
Se desplaza desde un punto A un punto B, tomando velocidad al
principio y desacelerando al final.
Que necesitamos para hacer un smart animate?
Parametros del trigger
La clave esta en el ritmo
Como quitamos elementos de una interfaz?
Recomendaciones
Nombra muy bien tus capas: Esto te ayudara a identificar facilmente
los diferentes objetos que se estan moviendo a lo largo de los frames
El tiempo maximo de respuesta a una accion / trigger debe ser de 400
milisegundos “Doherty Threshold”
Les comparto mi avance (Lastima que no se puedan subir gifs):
Poco a poco ❤️
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.
Me encantó esta clase! No sabia que eso se podía hacer 🥰
Como me gusta el background del profesor, Es un verde increible!
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
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
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!
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 .
Avances del proyecto 🚀🚀💚💚
Prototipo
Aqui dejo mis avances del prototipo en curso
Me va gustando mucho figma y sus interacciones. Aquí les dejo mi resultado:
Excelente clase
Aquí dejo mi prototipo 💚
![](
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
Que buena esta clase!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.