Buenos días a todos,

Para este segundo reto lo primero que realicé fue el UI KIT. Ya que de la manera que yo tenía pensado mostrar las galería de instancias muchos de los componentes contenían iconos, lo primero que quise realizar fueron los elementos de estilo, posteriormente la iconografía y finalmente los elementos de interacción, ya que de esta manera podría utilizar las referencias que había creado antes para ir mucho más rápido.

El primer frame corresponde a los dos primeros apartados, los elementos de estilo y la iconografía. Dentro de él encontramos 4 secciones, la tipografía, la cual utilizando el inspector en la página web averigüé que se trata de «Inter», la paleta de colores en el cual existen 6 primarios, y luego tanto el amarillo como el verde son colores que he encontrado en los switch y por eso he querido añadirlos.

Posteriormente, en cuanto a los estilos de forma, averigüé que Grover utiliza unos recuadros siempre de la misma tonalidad gris clara con un grosor de 2px en sus espacios, y que los radios de las esquinas principalmente son de 8px para los recuadros más grandes y 5px para alguno en concreto más pequeño. En Grover también es muy habitual el uso de elipses que yo he creado mediante un rectángulo y poniéndole de corner-radius la mitad de la altura de dicho recuadro.

Los iconos los hay de muchos estilos, pero principalmente son de un tamaño de 24x24px y luego pues los hay con fondo, sin fondo, gris/negros, blancos, banderas…

Finalmente, el el segundo frame recreé los diversos estilos de interacción que fui encontrando tanto por la App como en la web, ya que para esta segunda entrega me he centrado mucho en la web porque podía utilizar el inspector para conocer mejor los tamaños de los elementos, los padding…

El resultado de este segundo frame se traduce en una galería de instancias que puede visitarse en el siguiente link:

https://www.figma.com/proto/iJ429W8f5InZsxIKdLhlz6/Prototipado_Reto2?page-id=2083%3A498&node-id=2083-499&p=f&viewport=25%2C260%2C0.21&t=kvAa52N4yAFH54vp-1&scaling=min-zoom&content-scaling=fixed

Muchas gracias por la atención,

Aitor Umerez

Hola a todos,

En esta publicación os voy a compartir el trabajo realizado para este primer reto.
El objetivo principal del reto era crear un Prototipo interactivo que replique la App móvil de Grover, en mi caso la versión de Android y un UI Kit con los componentes presentes en la pantalla.

Lo primer que he hecho ha sido tomar como referencia el siguiente video, analizando el flujo de la app:

Posteriormente, utilizando algunas capturas de pantalla de la App he sacado desde Adobe Illustrator los colores que iba a utilizar en mi prototipo. Para la tipografía, he utilizado MyFonts pero aquella que me proporcionó no estaba en Figma así que decidí utilizar la tipografía Inter, la cual consideré la más similar. Para los tamaños y estilos, utilicé algunas capturas de pantalla sacadas de la App, aunque a lo largo del proceso he tenido que ir añadiendo alguna más que las que inicialmente creé.

Para los iconos, he utilizado dos plugins disponibles en Figma, como son «Unicons by IconScout» y «Mono Icons by Iconduck». La razón de utilizar dos plugins diferentes ha sido intentar buscar los iconos más similares a los de la App original.

La creación de componentes ha sido el aspecto más complicado del reto, ya que esta era la primera vez que utilizaba Figma. Yo al principio cree todas las pantallas y posteriormente quería animarlas, ya que no tenía ningún conocimiento sobre los componentes. Una vez conocí la existencia de estos, tuve que modificar las pantallas iniciales, sintiendo haber perdido mucho tiempo. Algunos de los componentes han sido sencillos de crear, como el corazón que cambia de color al pulsar o el periodo de alquiler. Respecto a este último, lo que no conseguí es enlazarlo con los cambios de precio, pero creo que el desconocimiento es también parte del aprendizaje. Otro de los aspectos que no pude recrear relacionado con los componentes es el proceso de «añadir a la cesta». Si pude recrear la animación, pero luego no pude hacer que ese componente activará la apertura del overlay al ocurrir toda la animación.

Finalmente, en este video se muestra lo que he podido obtener:

Finalmente, os dejo el link a la presentación de Figma:

https://www.figma.com/design/Rdie5JACUyd3h7fJnzJKaT/Prototipo-de-Grover?node-id=1-2&t=vtIm6tyEEJ1KP7Rq-1

Muchas gracias por vuestra atención. Cualquier feedback es bien recibido.