Prototipado: dale vida a tu interfaz

Clase 21 de 29 • Curso de Figma - 2020

David Antonio Garcia Saaib

student•

Contexto: Para hacer este ejercicio opte por convertir a mi grupo de imagenes de contactos en un Frame, darle un tamaño y permitirle hacer scrolling horizontal. Instrucciones:

Tomé todos los objetos con imagen de contacto y los hice un grupo.
Click derecho en el grupo y presioné el la opcion de frame selection con esto meto el grupo en un frame.
Seleccionando el contenedor frame recien creado lo delimito hasta donde llega mi frame mayor, el tamaño de la vista.
Le doy permiso a mi nuevo frame de hacer scroll horizontal, yendo al menu derecho, en la pestaña de prototype, en Overflow Behavior pongo la opción de Horizontal Scrolling.
Listo para mandar

Laura Moreno

student•

Me sirvió de mucho tu comentario, gracias!

María Jimena Rodríguez Contreras

student•

excelente

Valentina Arango Eastman

student•

Me constó un poco entender pero al final descubrí que era muy fácil. Se debe meter el contenido horizontal en un frame, este frame debe ser del ancho de la pantalla elegida (por ejemplo 375 para Iphone), PERO el contenido debe ser más grande. Luego es solo darle la opción de scroll horizontal. Les dejo la imagen inicial y otra al hacer scroll.

Griger Ratia

student•

Muchas gracias, tenía media hora tratando de hacerlo y el contenido se devolvía. Me ayudaste mucho.

Percy Abel Gonzales Huarcaya

student•

Graciaaaas <3

Walter Daniel Sánchez Casallas

student•

Mi propio chat de WhatsApp estilo iOS personalizado haciendo scroll verticalmente

Sergio Duarte

student•

Sólo mujeres te hablan??? jajajaja

Omar Gabriel Aguilar Moscoso

student•

buena campeón XD

Sergio Estrella

teacher•

Prototipar es al UI, lo que el testing es a la programación.

Daniel Felipe Celis Fernández

student•

Richard Cruz

student•

Hola! Cómo añadiste tu video? yo no puedo:(

Daniel Felipe Celis Fernández

student•

Hola! Yo también tuve un problema con subir el gif, por lo que tuve que subir el gif primero a una pagina externa como imgur y luego copiar el link de la imagen, no copies el link de la página sino solo de la imagen.

Anabella Vite

student•

¡Hola a todos! Para hacer el scroll horizontal realice lo siguiente:

Active la casilla de "fix position when scrolling" de todos los componentes que no quería que se movieran
En la pestaña prototipo, active "horizontal scrolling" Prototipo con Horizontal Scrolling Espero les sirva, un abrazo

Joel Mendes Novo

student•

https://www.youtube.com/watch?v=wIPo7vxxchY

Hernán Arica

student•

buenísimo el video gracias!

Verónica Solange Lamarque

student•

Gracias Totales!!!! Estaba dando vueltas, hasta que ví el video, ya había probado de todo!!! Saludos.

Daniel Méndez

student•

Juan Miguel Garcia Carballo

student•

Disculpa, de que pagina sacaste las imagenes btw?

Naza maurice

student•

Lo Logre!! Aquí esta mi Prototipo

Facundo Herrera

student•

te quedó genial

Naza maurice

student•

graciaaas

Leandro Acosta

student•

Hice una sencilla galería de wallpapers

Alejandra Chaparro Barrera

student•

Puse el Link de la visualización del ejercicio. https://www.figma.com/proto/PuxEoGYTp6DvvmAlkekp7b/PROYECTO?page-id=0%3A1&node-id=38%3A2&viewport=241%2C48%2C0.25&scaling=scale-down

Wangky Wangky Romero

student•

Por aquí mi ejercicio, batallé un poco pero gracias a los aportes y comentarios lo logré :D !

Joel Mendes Novo

student•

Buenas! Me costó pero al fin pude. Utilicé como refuerzo este video: https://www.youtube.com/watch?v=sdPdmNzGeQ0&t=154s

Marcos Orozco Rios

student•

Importancia de los prototipos

https://platzi.com/blog/la-importancia-de-los-prototipos-en-ux/

Maria Paula Molano

student•

¡Hola! Tengo esta interfaz, pero no sé cómo hacer para que cuando haga scroll, los carruseles no se muevan al tiempo sino que se muevan por separado:

Brian ⠀

student•

Juan Jose Arcani

student•

Con cada dia siento que me muevo más fluidamente en Figma :) LINK AL PROTOTIPO

Luis Carlos Donado

student•

Para hacer un scroll horizontal deben poner los componentes dentro un frame, los seleccionan, clic derecho crear frame y activar el horizontal scrolling así me funcionó. ah luego el frame lo cierran hasta el borde de la pantalla del dispositivo.

Jhonatan David Ibarra Lavado

student•

me funciono gracias buen hombre

Fernando Sierra

student•

Hola a todos! Alguien con algo de experiencia en la industria puede decirnos, que frame (dispositivo) ++aconseja++ para diseñar una app que pueda estar en cualquier movil.

Tania Sosa

student•

¡Hola Fernando! 🤓

Si te refieres al software para crear los Wireframes para el diseño de tu app te recomiendo Whimsical Wireframes es gratuita y facil utilizar.

Si tu duda es acerca de los tamaños estándar de pantallas de app, lo primero que debes saber es que hay diseñar la app de IOS y Android por separado, ya que las pantallas y resoluciones de los dispositivos son distintas.

En mi opinión, lo mejor es empezar a diseñar para IOS, ya que tiene menos tipos de resoluciones de pantallas (3) que Android (5).

PARA IOS, EL TAMAÑO DE PANTALLA ES: iPhone 4: 320 x 480 – 1x iPhone 5: 640 x 1136 – 2x iPhone 6: 1334 x 750 – 3x

PARA ANDROID, EL TAMAÑO DE PANTALLA ES: mdpi – 1x – small hdpi – 1.5x – normal xhdpi – 2x – large xxhdpi – 3x – extra large xxxhdpi – 4x – extra extra large

RESOLUCIONES Y DENSIDADES DE PANTALLA. Lo primero que debemos hacer es elegir la resolución con la que empezar a diseñar, y para IOS elegiremos la resolución 2X, de iPhone 5 (640 x 1136). Para Android, partiremos del diseño en iPhone con la resolución 2X / xhdpi.

Una vez tengas el diseño terminado, con todas sus pantallas a resolución 2X, adaptas los elementos necesarios al resto de resto de resoluciones. Para ello divides los tamaños a la mitad para conseguir la resolución 1X y con esas medidas las multiplicamos por tres y tendremos la resolución 3X. Y lo mismo para las resoluciones de Android.

Tenemos que tener en cuenta que si diseñas en 2x, todo lo que hagamos con 1px de tamaño, no podrá ser reducido al 50% por que no existe el 0.5px y por tanto hay que intentar jugar siempre con pixeles pares.

Esto puede ser una tarea bastante aburrida, pero por suerte tenemos ayudas en internet como:

Calculadora de tamaños Adaptador de tamaños automático Escalador

ELEMENTOS COMUNES, UI ELEMENTS. Debes tener en cuenta que para el diseño de app para móvil cuentas con elementos comunes o UI Elements y los propios de la app que estemos diseñando.

Los elementos comunes son por ejemplo:

Status Bar – Sección donde encontramos la cobertura, operadora, batería… Navigation Bar – Sección en la que se sitúa el botón de menú o atrás, los cuales también son iconos comunes par IOS o Android. Para tener todos los elementos comunes de cada sistema operativo podemos descargarlos de forma vectorial en internet, de forma gratuita y con los tamaños predeterminados.

ELEMENTOS PROPIOS DE LA APP. Estos elementos serían por ejemplo iconos del menú o cualquier elemento como imágenes, que no se pueda importar desde la web a la app.

Deberás tener todos esos elementos guardados con los diferentes tipos de densidades (1X, 2X, 3X – IOS)

Otro elemento que debes diseñar con medidas específicas es el icono de la app, el cual aparecerá en el Store de descarga, en el escritorio de pantalla, etc…

Para complementarlo, te dejo un par de enlaces donde podréis ver todo de forma muy detallada.

IOS – https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Alerts.html#//apple_ref/doc/uid/TP40006556-CH14-SW1

Android – https://developer.android.com/index.html

**¡Nunca Pares de aprender!**💚

Carlos Pérez

student•

¿Cómo se puede sincronizar iphone con figma para visualizar en tiempo real este tipo de prototipado?

Santiago Camargo

teacher•

Descarga la app "Figma Mirror" del Appstore para ver tus diseños en tiempo real.

Prototipado: dale vida a tu interfaz

Colaborando y Co-Creando

Introducción a Figma

Figma: colaboración a gran escala

Diferencias entre la versión gratuita y los planes de paga

Conociendo la interfaz

Budgetrip: el proyecto de tu curso

Importando archivos desde otras apps

Fundamentos de Figma

Domina la herramienta de texto

Creación de objetos y efectos

Creando efectos

Retículas y Guías: componer la complejidad

Agregando imágenes

Selección de color

Vectores: aprende a combinar figuras

Composición Orquestada

Integración: importar y exportar elementos

Constraints: usa las restricciones a tu favor

Styleguides: creación de estilos

Auto-Layout: un amigo para la vida

Shortcuts: atajos para agilizar tu proceso

Colaborando y Co-Creando con Figma

Herramientas de Co-creación: comentarios

Agilidad y consistencia a través de componentes

Organiza tus componentes

Prototipado: dale vida a tu interfaz

Prototipado: conectando frames

Transiciones más suaves con Smart Animate

Versionamiento: recupera el pasado

Librerías de estilos y componentes

Plugins: extiende funcionalidades

Community: colaboración universal

Proyecto Final: Budgetrip

Mentoría Expert

Prototipado en vivo: Figma