Para el diesño en Figma decidí crear una página que contiene los átomos del proyecto, como pueden ser los colores, las fuentes de letra, los componentes con sus diferentes estados…
Aquí se puede ver la fidelidad media de las versión desktop del proyecto.
Este otro enlace lleva a la fidelidad media del proyecto en versión mobile.
Las fidelidades media cuentan con algunas interacciones entre páginas para poder navegar entre ellas utilizando el Playground de Figma.
Se ha hecho uso, tanto en la fidelidad media como en la alta, de layouts y métodos similares para conseguir un posicionamiento de los elementos mucho más robusto, así las distintas secciones y componentes de las páginas no están sueltos por el frame, sino que tienen una posición y tamaño concretos dependiendo siempre de donde se encuentren y como están pensados.
Pasando a la fidelidad alta de los dos proyectos: desde el principio tenía claro que quería intentar implementar la posibilidad de cambiar entre tema claro y oscuro, por lo que diseñé la página con dicha idea siempre en mente para poder tener claro qué colores utilizar en la implementación con código, para no ir a ciegas una vez estuviera desarrollando la app real.
Para ello, creé variables de color desde el principio, ademaás de las variables de fuentes de letra para siempre utilizar las mismas fuentes.
Los colores y fuentes utilizados a lo largo de todo el proyecto pueden verse desde Figma o en el archivo CSS global de cada proyecto.