Prototipado simple: conexión de diferentes frames

Desconozco si ya exista, pero estaria suuuuper increible un curso en el que diseñemos y prototipemos algo… y después ese algo llevarlo a código… Recientemente en donde trabajo me dejaron la tarea de DISEÑAR la landing page para un cliente, yo en mi vida habia diseñado jamas nunca nada mucho menos en Figma, y si es aprobado el diseño también tendré que DESARROLLARLO, sin embargo aunque desarrolamos en Wordpress, no quiero dejar de lado codear todo desde 0. Pero me estoy dando cuenta que el trabajo de diseñador y desarrollador tienen que ir en sintonía y me esta gustando hacer ambos 😄

Prototipado simple: conexión de diferentes frames

Conectando frames
Posicion Inicial

• Seleccionar modo “Prototype”
• Seleccionar el elemento de origen
  • El objeto desde el que va a empezar la interaccion: Ejemplo,
    el boton que se va a presionar o el carrusel que se va a desplazar
• Arrastrar hasta el frame de destino

Parametros de trigger

• None
• On tap
• While hovering / Pressing
• Mouse enter / Leave
• Touch down / Up

Parametros de acciones

• None
• Navigate to
• Open overlay
• Swap with
• Back
• Close overlay
• Open link

Parametros de animacion

• Instant
• Dissolve
• Smart animate
• Move in / Out
• Push
• Slide in / Out
• Direccion
• Tipo de animacion
  • Ease In / Out
  • Ease In and Out
  • Lineal
• Duracion en milisegundos
• Overflow Behavior (Scrolling)

Configuracion de prototipo

• Dispositivo
• Modelo
• Fondo
• Frame inicial

“Si una imagen vale mas que mil palabras, un prototipo vale mas de
mil reuniones”

Tipos de prototipos mas utilizados

• Carruseles horizontales
• Interacciones con hover
• Bottom sheets
• Confirmaciones

Conexión de Diferentes frames
Parámetros del trigger: Lo que causa lo que la interacción inicie

• None
• On tap
• While hovering/Pressing
• Mouse enter/ Leave
• Tocuh down / Up

Parámetros de acciones: Determinar la acción que va a suceder

• None
• Navigate to
• Open overlay
• Swap with
• Back
• Close overlay
• Open link

Parámetros de animación: como se va a ver visualmente esa acción

• Intsat
• Dissolve
• Smart Animate
• Move In/Out
• Push
• Slide In/ Out

Otros parámetros de animación

• Dirección
• Tipo de animación
  • Easy in / out
  • Easy in and out
    -Lineal
• Duración
• Overflow behaviour (scrolling)

**Prototipos más usados **

• Carrusel Horizontal (izquierda - derecha)
• Interacciones con hover
• Bottom Sheets
• Confirmaciones o pop ups

Información resumida de esta clase
#EstudiantesDePlatzi

• Otra manera de prototipar es conectando frames y esto me ayuda simular diferentes pantallas

• Debo definir un elemento de origen que sea el comienzo de la interacción

• Para unir los frames entro a la pestaña de prototype y esto hace que si me acerco al frame pueda ver un punto de donde saldrá una línea que buscare unir con el frame que yo decida como segunda pantalla

• Esto podemos hacerlo con muchísimos frames, es decir que hallan cambios de muchísimas pantallas. Si quiero crear un loop debo conectar la ultima pantalla o frame con nuestro elemento de origen

• Trigger = Activador

• El Trigger tiene parámetros de activación como: None, On tap, While Overing, Mouse Enter, Touch Down, etc

• El Trigger activa una acción

• Las acciones igualmente tienen parámetros como: Instant, Dissolve, Smart Animate, Move in, Push, Slide in

• Los prototipos de comparten con los clientes

• Si una foto vale más que mil palabras, un prototipo vale más que mil reuniones

• Los prototipos más utilizados son el Scroll, el Over que tiene que ver con el mouse, Botton sheets es como una ventana emergente, confirmaciones, etc

• Lo primero que debemos hacer es determinar el punto inicial de la interacción

• Es bueno ir viendo como va funcionando el prototipo

• Para sacar las opciones de animación puedo darle clic en la línea que une a los frames

• Es bastante divertido e interesante

• Debemos practicar

Que buena clase, me salió todo 😄

Que feliz me siento de estar viendo con vida lo trabajado:

Figma es una excelente herramienta de diseño y prototipado de productos digitales. Conectando los frames podemos lograr tener el prototipo de una aplicación o sitio web funcionando como en la realidad o muy apegado a ella.

Esto esta genial… realmente es muy útil.

Llevo bastante haciendo el mock o prototipado, primero lo hice en illustrator y tiempo después aterrice en affinity designer.

Así que esta me genera mucho entusiasmo.

Profe te felicito, has logrado que me encante figma

Excelente clase!

Prototipado con transiciones

Esto esta muy divertido 🥳

Creo que lo estoy haciendo bien
https://www.figma.com/proto/0i0px0sDrh38mKkiAkN720/App-de-notas?page-id=37%3A147&node-id=49%3A225&viewport=441%2C141%2C0.5&scaling=min-zoom&starting-point-node-id=49%3A225

Ahi mejoré mi prototipo con esta clase, reduje un monton la parte de copiar lo mismo y usar overlays. Mi prototipo

Mi mejora

Lo que era antes

https://www.figma.com/proto/HtJYWd5LseWfN4MZIFnE8p/Guia_estilos?page-id=0%3A1&type=design&node-id=11-5&viewport=61%2C632%2C0.61&t=pyq3v5BByNd0xuOS-1&scaling=scale-down&starting-point-node-id=11%3A5&mode=design

Parametros de la interacción: Animation, tipo de interacción, origen y destino de la interacción.

Interaction con tap o con click de un frame a otro

Mi prototipo con transiciones entre páginas ❤️

Wow me encantó esta clase

Este es el esquema de mi prototipo

Qué buena clase

Les comparto mi progreso. 😃

https://acortar.link/lsecgS

Les comparto mi prototipo

Mis avances

https://bit.ly/3uqTzuC

Excelente clase