# Finance app dashboard

> A banking and finance app dashboard for Figma: total balance, four quick actions and recent transactions, plus the card screen, in light and dark.

The home screen of a banking app in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: the total balance over a picture header, Send, Receive, Pay and Top up, and the latest transactions. The Cards tab beside it puts the card, its actions and the month’s spending on one screen.

Page: https://www.appetiteui.com/screens/finance/dashboard. Every screen of the app: https://www.appetiteui.com/docs/screens-finance.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Dashboard | Total balance, four quick actions and the latest transactions | Search, Avatar, Button, Quick Action Button, Section Header, Navigation |
| Cards | The card, four card actions and spending by category | Top Bar, Quick Action Button, Progress Bar, List, Navigation |

- Dashboard, light: Finance app Dashboard screen: a blue header with a search field, Total balance $28,401.75, a plus $1,240.50 this month badge, Send, Receive, Pay and Top up buttons, and a Recent transactions list with Northwind Media, Halcyon Store, Salary and Reelbox rows above a tab bar
  Picture: https://www.appetiteui.com/images/au_finance_dashboard_light.webp (dark: https://www.appetiteui.com/images/au_finance_dashboard_dark.webp)
- Cards, light: Finance app Cards screen: an Appetite Debit card ending 4242 with the edge of a second card beside it, Freeze, Details, Limits and Settings actions, $1,500.40 spent of a $2,000 limit with a progress bar, and Groceries and Transport spending rows
  Picture: https://www.appetiteui.com/images/au_finance_cards_light.webp (dark: https://www.appetiteui.com/images/au_finance_cards_dark.webp)

## How the screen follows the dashboard pattern

| Rule | On this screen |
| --- | --- |
| One thing leads | The balance is set at 60 Medium, the 6xl/emphasized style, with the cents smaller. It is the largest type in the whole Finance set. |
| Actions sit next to what they act on | Send, Receive, Pay and Top up are four Quick Action Buttons directly under the balance, and Cards repeats the pattern with Freeze, Details, Limits and Settings under the card. |
| The tab bar is the way out | Both screens carry the Navigation tab bar; Dashboard has no top bar at all, so the balance header starts under the status bar. |

## Built from

| Component | Screens |
| --- | --- |
| Search | Dashboard |
| Avatar | Dashboard |
| Button | Dashboard |
| Quick Action Button | Dashboard, Cards |
| Section Header | Dashboard |
| Navigation | Dashboard, Cards |
| Top Bar | Cards |
| Progress Bar | Cards |
| List | Cards |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Tab bar height | 49 pt | 64 dp | `platform/bar/bottom-height` |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Screen side padding | 16 pt | 16 dp | `platform/screen-padding` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Navigation | iOS / Tab Bar, floating capsule 62 high, two to five tabs | M3 / Navigation bar, 412 × 80, three to five items | Material is a full width bar with a separate 24 high Gesture Navigation component, iOS floats on glass |
| Top bar | iOS / Toolbar on a 44 high top bar | M3 / Top app bar, Small 64 high, Medium 112, Large 152 | Material has four bar types: Small, Center-aligned, Medium and Large |

## Related

- Finance app: [Finance app transaction history](https://www.appetiteui.com/screens/finance/transaction-history)
- Finance app: [Finance app payment screen](https://www.appetiteui.com/screens/finance/payment)
- Docs: [Finance app screens, every screen and token](https://www.appetiteui.com/docs/screens-finance)
- Pattern: [Dashboard screens](https://www.appetiteui.com/screens/patterns/dashboard)
- Fitness app: [Fitness app dashboard](https://www.appetiteui.com/screens/fitness/dashboard)
- Social media app: [Social media app feed](https://www.appetiteui.com/screens/social/feed)
- Food delivery app: [Food delivery app home](https://www.appetiteui.com/screens/food-delivery/home)
- Task manager app: [Task manager app home](https://www.appetiteui.com/screens/tasks/my-work)
- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Glossary: [Tab bar](https://www.appetiteui.com/academy/glossary/tab-bar)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Glossary: [Safe area](https://www.appetiteui.com/academy/glossary/safe-area)
- Article: [How to design one app for iOS and Android in Figma](https://www.appetiteui.com/blog/design-one-app-for-ios-and-android-in-figma)
- Article: [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android)