We create the color palette with 4 main colors that are neon green, purple, grey and white, combining with 3 differents shade of colors - strong (S), normal and light (L).
We did research some of the ways of using variant component in Figma, combining with prototyping in components. We first came with many different types of navigation bars.
At first, it was 5 tabs on it with a white background, the chosen icon would be fulfilled with purple and green.
Then the round checkbox with thin white stroke and filled with green.
Our very first navigation bar.
Our very first version of our checkbox.
These components above did not turn out very well in our final design, so we decide to re-create it again with another version.
This is our final design components after several changing times.
https://www.figma.com/file/kZ3ZQIFpJr9vzfFx0irQue/Bills-Keeper?node-id=17%3A41&t=DjoEQ7cKqVfBfUxZ-1
