Prototipado simple: interacción de scroll

Clase 16 de 25 • Curso Básico de Figma - 2022

Clase anteriorSiguiente clase

Laura Mujica

student•

En Windows

Ctrl + Shift + Alt + V (reemplaza el objeto seleccionado)
Ctrl + Shift + V (pega encima del objeto seleccionado, pero no lo borra)

JAIRO SALAZAR CASTAÑO

student•

Gracias!

Carlos Arturo Arboleda Hermida

student•

Gracias! Pasa mucho que el profesor solo de los comandos en Mac y en Windows uno queda perdido

German Pinilla

student•

++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:

DIANA MARCELA LOZADA GARCIA

student•

Que buen resumen! Mil gracias!

JAIRO SALAZAR CASTAÑO

student•

Gracias por el aporte!

Xiomara Alejandra Hernández Arzola

student•

Necesitamos toda una serie de cursos con Figma! Me encanta! ;D

MY LUIS EL ZEVA

student•

escribeme y te comparto ig __yoto

JAIRO SALAZAR CASTAÑO

student•

Así es Xiomara. Excelente curso :)

Cristian Buitrago

student•

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ó.

Carlos Corona Pestana

student•

También me perdí un poco en esa parte. Al final me di cuenta que debía poner el frame del carrusel dentro del frame de la pantalla total. Habiendo hecho eso, me funcionó.

Yorgelis Falcon

student•

ctrl + alt + G para crear el frame al rededor de otro frame

Diego Andrés Garzón Girón

student•

Mil graciasss

SARAY STEFANNY DIAZ RODRIGUEZ

student•

Profe vos solo hablas en comandos de Mac, y donde quedó windows? Teniendo en cuenta que la mayoría usa windows

Oscar Rico Figueredo

student•

¡Figma está genial! 🔥 Les comparto mi ejercicio:

Ilderson Casu

student•

The goat :)

Cindy Milena Fontalvo Jiménez

student•

Excelente trabajo compañero:)

Ingrid Rojas

student•

Les comparto mi prototipo, me costó bastante hacer que funcionara el scroll ya que se debe tener en cuenta que el frame donde va el scroll o el autolayout siempre debe ir dentro del frame contenedor, yo utilicé click derecho sobre el frame contenedor y le dí la opción "paste here". Espero les funcione!

Norma Alexandra Ramírez Suaza

student•

me sorprendio el enlace a wikipedia, no me lo esperaba. quedo super.

Julian R Gaita Lizcano

student•

Hola gente, comparto mi progreso en esta clase:

https://www.figma.com/proto/7AgZfV6TviVkhMejUev4gx/Untitled?page-id=3%3A2&node-id=8-49&viewport=318%2C380%2C0.61&scaling=scale-down&starting-point-node-id=19%3A179

Norma Alexandra Ramírez Suaza

student•

quedo super ¡ me gusto mucho.

Yohelys Gutierrez

student•

Mi prototipo: https://www.figma.com/proto/e7N1I7YKvz0BR4hMYOVro1/Untitled?page-id=0%3A1&node-id=138%3A129&viewport=1415%2C377%2C0.94&scaling=scale-down

Ivan Vazquez Velazquez

student•

Te está quedando genial Yohelys :)

JAIRO SALAZAR CASTAÑO

student•

Genial!

Bruno Vicencio

student•

Necesito ayuda, no puedo achicar el frame sin que queden fuera de vista los elementos, no me sale presionando cmd + click

Jeisson Espinosa

student•

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

Juan Andrés Tangarife Monroy

student•

Jimena Haran

student•

Lo tengo distinto a Figma y ayer me rendí porque no encontraba las cosas pero hoy entré y me salió

Cindy Milena Fontalvo Jiménez

student•

Hermoso trabajo!! felicidades:)

Pedro Isaac Aguilar

student•

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

Carlos Alberto De Avila Suro

student•

¿Y en windows?

Cindy Milena Fontalvo Jiménez

student•

Gracias por tus apuntes compañero, son de gran utilidad!! :)

Otimar Guia

student•

Mi prototipo https://www.figma.com/proto/h4dTn5cPLnPg6NwF1GFDXI/Untitled?page-id=0%3A1&node-id=26%3A89&viewport=381%2C434%2C0.77&scaling=scale-down

JAIRO SALAZAR CASTAÑO

student•

Genial!

JAIRO SALAZAR CASTAÑO

student•

Super la clase, se aprende es practicando.

Jimena Haran

student•

Command + Option + Shift + V qué sería en Windows?

Manuel Lopez

student•

Significa que el proyecto en Figma solo sirve de guía al programador. O habrá algo que pueda agarrar tangible del archivo que le facilite el trabajo?

Luisana Arias

student•

Oye le tira datos del CSS. Ayuda al programador pero también pafra presentar al cliente.

Daniel Hidalgo

student•

Les comparto!: https://www.figma.com/file/w8Pb017fNdnq86sRtnN1qx/Figma-Curso-Platzi?type=design&node-id=0%3A1&mode=design&t=WldABr479T12N01Q-1

Brenda Sutara

student•

Me encantó, cómo hiciste para hacer el movimiento del menu que salga de la parte inferior. Yo quise hacerlo pero no sabía cómo. Hice una copia solamente jaja

Prototipado simple: interacción de scroll

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

Playground: Practica la creación de componentes reutilizables

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

Proyecto final del curso de Figma