Prototipado simple: conexión de diferentes frames

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

Xiomara Alejandra Hernández Arzola

student•

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

José Isidro Torres Caldea

student•

Hola Xiomara, te recomiendo que después de este curso le eches buena mano al CSS, con animaciones y transiciones, no importa si tu diseño lo vas a hacer con WordPress, el CSS será el mismo. . Por experiencia, hay cosas que hacemos en Figma (que se ven espectaculares) y cuando lo llevamos a código lo hacemos con otras animaciones que son mucho más complejas y vistosas. . En conclusión; llevarte bien con CSS te hará tener en cuenta más posibilidades con las animaciones cuando lleves el diseño de Figma a código. 🔥 . Una cosa más: ¡Mucho ánimo! 💚

Xiomara Alejandra Hernández Arzola

student•

Gracias Hugo!! El de mobile first con Diego ya lo hice, en ese ya nos dieron el proyecto hecho en Figma, fue el de Batatabit jiji. Me aventaré el del profe Santiago. GRACIAS!

German Pinilla

student•

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

María Alejandra Pérez Prieto

student•

Graciaas!!

María Guadalupe Mendoza Luna

student•

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)

JAIRO SALAZAR CASTAÑO

student•

Gracias por el aporte! :)

María Guadalupe Mendoza Luna

student•

**Prototipos más usados **

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

Josue Cerron Tuesta

student•

Gracias!

JAIRO SALAZAR CASTAÑO

student•

Gracias!

Derek Perez

student•

DIOS MIO MADRE DE MI DIOS jajajajaj

esta clase ahorra tanto tiempo a la hora de prototipar y de conectar los frames al hacer las interacciones me siento super orgulloso no solamente de mi. Si no tambien de todos los compañeros que han llegado hasta este punto del curso en 2024 . espero seguir aprendiendo mucho mas con ustedes. GRACIAS🔥👌

Jeisson Espinosa

student•

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

JAIRO SALAZAR CASTAÑO

student•

Gracias por su aporte!

Jeisson Espinosa

student•

Con gusto!!

Jimena Haran

student•

Que buena clase, me salió todo 😄

Eddie Mora

student•

Excelente trabajo, muy detallado.

Camila Ossa

student•

Que feliz me siento de estar viendo con vida lo trabajado: ](https://gifyu.com/image/SlAdo)

Pedro Isaac Aguilar

student•

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.

Alexis Corrales

student•

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.

Yilliam Andrea Serrano Lopez

student•

Profe te felicito, has logrado que me encante figma

Edith Johana Colmenares Contreras

student•

Laura Mujica

student•

Excelente clase!

Julián Londoño

student•

Prototipado con transiciones

Moises Hernandez

student•

increíble, estoy sorprendido no sabia que esto se podía hacer con figma. Yo pensaba que solo era diseño fijo sin animaciones ni interacción.

Oscar Rico Figueredo

student•

Esto esta muy divertido 🥳

Jazmin Sanchez

student•

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

JAIRO SALAZAR CASTAÑO

student•

Genial!

jesus garcia

student•

como hizo el bottom sheet?

Raiza Gatica

student•

Hola! Alguno sabe porque la opcion de "On Tap" no aparece habilitada cuando intento conectar con la otra frame?

Sergio Daniel

student•

A mi también me sucedió lo mismo, pero lo que yo hice fue... Seleccioné el elemento especifico del frame en el cual yo quería que comenzara la transición. Tu estás seleccionando todo el frame del titulo de la pagina, pero solo debes seleccionar el elemento especifico del cual quieres que sea el elemento que inicie la transición. Te dejo un imagen de como lo hice yo.

Alfonso Cárdenas

student•

Ayuda amigos, no puedo ver el texto con los nombres de mis frames encima de estos en el área de trabajo. Qué puede haber pasado porque se quedaron ocultos y como visualizarlos nuevamente.

Prototipado simple: conexión de diferentes frames

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