Prototipado: conectando frames

Clase 22 de 29 • Curso de Figma - 2020

Clase anteriorSiguiente clase

Arles A. Pinzon Molina

student•

“Si una foto vale 1000 palabras, un prototipo vale más de 1000 reuniones” 😂😂😂 anotadísimo.

María Jimena Rodríguez Contreras

student•

para enmarcarlo

Miguel Angel Diaz Nava

student•

concuerdo con el marco uwu

Juan Bedoya

student•

Acá les dejo un GIF con mi prototipo y usando algunos de los ejemplos de esta clase para conectar cada pantalla. Prototipo

Manuel Rodrigo Pinzón Moreno

student•

Te quedo super...!!!

alvaro morales

student•

COMO PUEDES HACER ESE GIF TENGO ESA DUDA PARA SUBIR EL MIO

Christyna Monsalve

student•

Aquí les comparto algunas imágenes de mi prototipo y el link https://www.figma.com/proto/F892yNX5SITBtOX5WXPOmp/PROYECTOS-DE-PLATZI?page-id=55%3A0&node-id=98%3A49&viewport=-2129%2C-476%2C0.4753588140010834&scaling=scale-down

Tuve un problema con el scroll horizontal, si alguien me puede orientar se los agradecería <3 .

José Alonso Paredes Marin

student•

wow esta muy bien

Irving Juárez

student•

Que cosa tan bien hecha <3

Sabino Fernández

student•

Aquí mi ejercicio :D

Anabella Vite

student•

Hola! Les dejo mi prototipo espero me puedan dar feedback :)

Francia

student•

Hola, te quedó muy bien. Felicidades! Solo le agregaría funcionalidad a la flecha de back al final 😃

Diana Tejada

student•

Hola a todos, me tardé demasiado pero lo logré, aquí está el resultado con video incluido: https://drive.google.com/file/d/12mVtwBCoO03GXX85iG82ViOaCIL6tn2x/view?usp=sharing

Sebastian De La Quintana

student•

Yayyyyyy al fin terminado

Omar Gabriel Aguilar Moscoso

student•

6/10

Alejandra Osorio

student•

https://www.figma.com/proto/JDaTob9ffbuZUshShbvf97/Untitled?node-id=2366%3A20879&scaling=scale-down&page-id=0%3A1&starting-point-node-id=2366%3A20788![10.png](https://static.platzi.com/media/user_upload/10-91d1b5dd-92e4-4df5-88a6-19eaba781775.jpg)

Andres Badillo

student•

Mi prototipo:

Verónica Solange Lamarque

student•

Me encanta!!

Jesus Barazarte

student•

A este punto del UI/UX todo es tan bello <3

Klaus Mauricio Moller Rossbach

student•

Como se hacen esas pantallas de carga en el prototipo, por ejemplo las que estan en budgetrip, que solo se quedan por un momento y solitas desaparecen

Esteban Calderón Sánchez

student•

Hola! eso lo haces poniendo que la transición sea por tiempo y estableces que duren cierto lapso de segundos. Puedes ver esa opción en la parte de prototipo

Klaus Mauricio Moller Rossbach

student•

Gracias steveavador !

Hanz Rodriguez Emiliani

student•

Hola les comparto mi prototipo

Carlos de Jesús Sánchez Pascacio

student•

Les comparto el link del proyecto Budgetrip que se adjunta al inicio del curso. ' Cabe mencionar que la idea es que saquen lo assets y comiencen a estructurarlo de la forma que se solicita o de cualquier otra que su creatividad (y las buenas prácticas) les marquen.

Luis Fernando Montoya Lancheros

student•

Te quedó impecable, felicitaciones!

Carlos de Jesús Sánchez Pascacio

student•

Muchas gracias

Livia Panez

student•

Porfavor, pueden explicar como realizar menus desplegables, existen en UI KIT pero no graban las animaciones. Existe alguna manera de tener una guia de ello como los UI KITS?

Santiago Camargo

teacher•

Hola Livia! Tienes un ejemplo de estos menus desplegables? Podría grabar un video rápido para explicarte cómo hacer una animación específica, pero necesitaría la referencia :)

Jaime David Burbano Montoya

student•

@Santiago Camargo, Maravilloso. Es el primer profe que veo que crearía contenido nuevo adicional a las clases para explicar a detalles cosas de las clases. Increíble.

Gabriel Gil

student•

hola les dejo mi prototipo

https://www.figma.com/proto/7NN099XicHPBacxkd123Ni/prototipo-conectado?node-id=1%3A142&scaling=scale-down

Naza maurice

student•

Aquí esta mi ejercicio de prototipado cualquier feedback para mejorar es bien recibido <3

Valentina Fernández Rada

student•

Esta super bueno! quiza en las tarjetas (cuando hay para hacer swipe) deja un poco de la tarjeta siguiente a la vista para que el usuario sepa que hay más tarjeta hacia la derecha :)

BELEM PEÑA

student•

Comparto mi ejercicio https://imgur.com/a/3wN1lCO

Misael Espinosa

student•

Está muy divertido esto de prototipar. 😂

https://www.figma.com/proto/El7lAtsYRaAUfDGPn59x6Z/Figma-Platzi?page-id=23%3A83&node-id=42%3A925&viewport=-1178%2C748%2C0.5&scaling=scale-down&starting-point-node-id=29%3A97&show-proto-sidebar=1

Pedro Isaac Aguilar

student•

Parámetros del trigger (momento en que empieza la interacción)

None
On tap (al dar clic)
While Hovering / Pressing (al pasar el mouse encima y dar clic)
Mouse Enter / Leave (al acercar el mouse y cuando se va)
Touch Down / Up (toque hacia abajo o hacia arriba)

Juan Camilo Guzman Sandoval

student•

No pude hacer un Slider horizontal y a la misma vez el scroll normal vertical 😓

Diego Perdomo

student•

Ya pasaron unos días pero espero que te sirva esta breve explicación.

Necesitas usar 3 frames:

Móvil (Iphone o Android) Scroll horizontal (más ancho) Scroll vertical (más largo)

Acomodas en el Frame del Móvil los otros dos. Después necesitas configurarlos para que se aplique el Scrolling en cada caso. Te vas a Prototype > Overflow behavior > vertical/horizontal scrolling.