No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Prototipado simple: interacci贸n de scroll

15/27
Recursos

Aportes 22

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Aqu铆 les dejo mi prototipo 鉂わ笍

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 鈥淧egajosos鈥 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.

Prototipo 馃挌

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

Al hacer scroll horizontal, para que los objetos se muestren solo dentro de los l铆mites del frame, se tiene que activar el 鈥淐lip 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;

https://bit.ly/3N8UZCA

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 馃槂