Aquí les dejo mi prototipo ❤️
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
Si ya tienes una cuenta,
Iniciar sesión
Prototipado simple: interacción de scroll
15/27Recursos
Aportes 22
Preguntas 5
Ordenar por:
Necesitamos toda una serie de cursos con Figma! Me encanta! ;D
En Windows
- Ctrl + Shift + Alt + V (reemplaza el objeto seleccionado)
- Ctrl + Shift + V (pega encima del objeto seleccionado, pero no lo borra)
Prototipado simple: interacción de scroll
En esta clase veremos como prototipar con Figma y como plasmar nuetras ideas
de las pantallas estaticas a una realidad un poco mas tangible para los
usuarios.
Para que prototipamos?
- Para alcanzar una version mas real de nuestra intencion de codigo
- Para probar conceptos y experimentar ideas nuevas
- Para aprender sobre las decisiones que hemos tomado
Que necesitamos para prototipar?
Crear los parametros de la interaccion:
- Como se visualiza
- Cuando empieza
- Cuando termina
Interacciones de scroll (Desplazamiento)
Necesitamos:
- Un frame con contenido mas alto que el dispositivo original
- Un frame con contenido mas largo que su contenedor
Posiciones fijas en el scroll
Se utiliza para delimitar elementos “Pegajosos” dentro de una interfaz,
como un top bar o un fab button. (Menu fixed por ejemplo)
Mi avance:
Comparto link de mi prototipo, de una aplicación que uso bastante en mi dia a dia y que siempre me sirve como inspiración.
Información resumida de esta clase
#EstudiantesDePlatzi
-
Prototipar me permite traer mis ideas a algo más tangible
-
Prototipamos para alcanzar una versión más real de nuestra intención de código, esto también me permite probar conceptos o ideas
-
Prototipamos para aprender sobre las decisiones que estamos tomando
-
Para prototipar tenemos que crear los parámetros de la interacción
-
Todas las interacciones deberían tener un fin y un comienzo muy claro
-
Si le damos ok al CheckBox de Clip Content en la parte derecha, podemos ocultar o ver los elementos que se salen del frame
-
Para hacer un scroll vertical es tan fácil como entrar a la pestaña de prototype y seleccionar Vertical Scrolling donde dice Overflow Scrolling
-
Ctrl + Alt + G Puedo crear un frame de los elementos que tenga seleccionados
-
Puedo crear un Horizontal Scrolling de la misma manera que creamos el vertical, solo que ahora selecciono la opción Horizontal Scrolling
Seria bueno que en este curso y otros, mostraran tanto los keyboard shorcuts no solo para Mac sino también para Windows, como ocurre en linkedin Learning: Por ejemplo, me perdí en la creación del Frame dentro de otro para hacer el carrusel y no me sirvió.
¡Figma está genial! 🔥 Les comparto mi ejercicio:
Con Shift + E intercambias entre modo Design y Prototype en Mac.
Profe vos solo hablas en comandos de Mac, y donde quedó windows? Teniendo en cuenta que la mayoría usa windows
Hola gente, comparto mi progreso en esta clase:
Al hacer scroll horizontal, para que los objetos se muestren solo dentro de los límites del frame, se tiene que activar el “Clip content”.
Excelente clase!!
Para reemplazar un elemento por otro: Seleccionas elemento (ej: imagen) + Cmd + Opt + Shift + V
.
Para crear un frame dentro de otro frame (y así poder generar un tipo carrousel de fotos con scroll horizontal): Seleccionas frame horizontal con varias fotos + Cmd + Opt + G = Así obtendrás un frame que podrás recorrer hasta la parte que quieras que sea visible en el scroll del prototipo
Figma del proyecto del profesor;
Excelente clase
Prototipar y crecer con el Feedback… ❤️
Prototipar es de lo mejor, me permite presentar de manera limpia cómo funcionarán los flujos de mis proyectos 😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.