Skip to main content

Command Palette

Search for a command to run...

Building a Financial Management App with React Native - Part 5

Designing Home Page with Figma

Published
1 min read
F

Web Dev - Nairobi, Kenya

For the home page, I wanted something simple. I wanted to show the user their total weekly spending, a chart showing how much they've been spending, and a small list of their most recent spending and earnings. Also, I included a floating button from which the user can add new spending or new earnings.

For inspiration and design ideas, I headed over to Dribble and mixed ideas from a couple of designs. I also maintained the app's colour and font-family. I grabbed the coloured icons from icons8 and am hoping I'll be able to get them as a library when implementing the design. The resulting design is as follows:

The second image shows the modal when the floating button is clicked. The profile circle on the top left also opens a navigation drawer, as shown in the third image.

Now onto implementing the design 🥳.

React Native Financial Management App

Part 4 of 7

In this series i will build a finance management app with react native whereby the user is able to upload their daily expenses and income.

Up next

Building a Financial Management App with React Native - Part 6

Implementing Home Page Design