Viernes 19 Agosto 2022. El profesor nos da varios tips para estudiar y nos comenta en que consiste el prototipo.
https://zeroheight.com/blog/naming-conventions-for-your-design-system/
https://help.figma.com/hc/en-us/articles/360038663994-Name-and-organize-components
https://blog.thenounproject.com/microinteractions-in-ui-design-how-to-animate-icons-in-figma/
ventajas de hacer prototipos
Como te decía al principio un prototipo te servirá para dar vida a tu diseño. Esto tiene una ventaja clara: te será más fácil explicar cómo es la navegación y las diferentes interacciones a otros perfiles que quizás no estén tan familarizados con el proyecto, como la gente de marketing, ventas y otros stakeholders.
También te permitirá comunicarte mejor con el equipo de desarrollo, porque podrán interactuar con una versión casi real del diseño y entenderán más fácilmente cómo es el flujo y cómo se conectan las diferentes partes entre sí.
Cómo hacer un prototipo con Figma
Funcionalidades básicas
En el lado derecho de la interfaz de Figma tienes una columna que tiene tres elementos: Design, Prototype e Inspect. Si haces clic en Prototype verás que no cambia nada en la interfaz del programa, pero sí varía el contenido de la columna: allí podrás configurar las características del prototipo.
- Device: te permite seleccionar con qué dispositivo quieres que se visualice el prototipo. Puedes escoger entre diferentes modelos de Android y Apple, definir tú mism@ unas medidas personalizadas o no utilizar nada.
- Si seleccionas cualquier dispositivo podrás escoger el modelo y el color. Por ejemplo, si seleccionas el iPhone 13 podrás seleccionar Midnight, Pink, Blue, Starlight o Red.
- Background: te permite escoger qué fondo de pantalla quieres que acompañe al prototipo (si es un móvil, tendrás espacio a ambos lados de la pantalla). Yo suelo dejarlo en negro, pero puedes escoger cualquier color.
- Flows: más adelante te explico de qué van
Creando un prototipo con Figma paso a paso
Imagina que tienes esta aplicación de mensajería diseñada. Ya has definido el Device (iPhone 11 Pro) con el modelo Gold y quieres que el fondo de pantalla sea negro.
Para no perderte cuando hayas hecho muchas «conexiones de pantallas» te recomiendo que las ordenes en flujos horizontales, así podrás ver más fácilmente qué pantalla va detrás de cada una.
Como estás en la pestaña Prototype, cuando muevas el cursor encima de los diferentes Frames verás que aparecen marcados con un borde azul que tiene una pequeña bola blanca a la derecha: esto es un nodo y es lo que te permitirá enlazar un elemento con otro. Fíjate en el este ejemplo:
https://www.uifrommars.com/como-hacer-prototipos-en-figma/
Con este enlazado básico, si haces clic en el icono de Play que está situado al lado del botón de Share podrás visualizar el prototipo. Verás que si haces clic en un sitio en el que no hay ningún enlace definido se visualizarán brevemente unos rectángulos azules: estos te indican siempre donde existe una interacción 
Diseño web responsive
El diseño de un prototipo deberá adaptarse en función del tamaño y las capacidades del dispositivo; esto no significa que haya que tener en consideración todos los dispositivos. Lo mejor es tomar decisiones basadas en los que se usan más. Afortunadamente, Figma nos permite ver cómo se ve un diseño en diferentes tamaños. En el menú puedes elegir entre 7 teléfonos populares (iPhone, Galaxy, iPad, etc.), 3 tabletas diferentes, una vista de escritorio o un reloj inteligente. Simplemente arrastra los bordes del documento de diseño para ajustar el marco y te dará una idea exacta de cómo aparecerá en un dispositivo específico. Por último, Figma tiene una función inteligente que le permite conectarse a tu teléfono para que puedas ver cómo se ve en el dispositivo físico mientras diseñas.
Al diseñar un prototipo en Figma, hay cinco cosas principales a considerar:
- Pantalla
- Contexto de usuario
- Objetivo
- Alrededores
- Consistencia
Interacciones y animaciones para la creación de prototipos en Figma
Esto puede sonar un poco fuera de tu zona de confort, y puede que automáticamente te venga a la mente una película de Pixar o tus dibujos animados favoritos, pero confía en nosotros, la creación de interacciones y animaciones en prototipos; es más sencillo de lo que parece. Las animaciones y las interacciones van de la mano con las microinteracciones de un usuario. ¿Por qué? Porque guían al usuario para que comprenda cómo utilizar el producto de forma óptima. Por lo tanto, estas animaciones no son solo funciones divertidas (aunque realmente lo son). Son herramientas poderosas para crear un prototipo eficaz. Figma incluso permite a los usuarios tomar fotografías, bocetos o imágenes y convertirlas en prototipos interactivos.
