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.