Skip to content

Updated

Copy page

Finance app dashboard

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.

Copy page

Updated

On this page
  1. Preview
  2. Live components
  3. The pattern
  4. Built from
  5. iOS and Material
  6. Related
  7. Get the file

Preview

Dashboard, Cards, from the Finance page of the Appetite UI Figma file. The theme switch shows the dark frames.

Finance app, dashboard393 x 852 each, Light and Dark
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 barFinance app Dashboard screen in dark mode: a dark 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
Dashboard
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 rowsFinance app Cards screen in dark mode: 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
Cards
Screens, screen, what it shows
ScreenWhat it shows
DashboardTotal balance, four quick actions and the latest transactions
CardsThe card, four card actions and spending by category

Which components carry the dashboard pattern?

The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.

Dashboard, live componentsKit geometry, light and dark

Quick Action Button

Navigation, four tabs

How does this screen follow the dashboard pattern?

The rules every dashboard screen in the kit follows, and what this one does with each.

The pattern, rule, on this screen
RuleOn the finance app
One thing leadsThe 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 onSend, 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 outBoth screens carry the Navigation tab bar; Dashboard has no top bar at all, so the balance header starts under the status bar.

What is it built from?

Every control with a component is an instance of it, so one token change moves these screens with the rest of the file.

Built from, component, screens
ComponentScreens
SearchDashboard
AvatarDashboard
ButtonDashboard
Quick Action ButtonDashboard, Cards
Section HeaderDashboard
NavigationDashboard, Cards
Top BarCards
Progress BarCards
ListCards

What changes between iOS and Material?

The frames are drawn in the ios-md Platform mode. Switch a frame to android and these variables take the Material values; the components below are where the two systems draw the same need differently.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/bar/bottom-height4964
platform/min-touch-target4448
platform/screen-padding1616
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
NavigationiOS / Tab Bar, floating capsule 62 high, two to five tabsM3 / Navigation bar, 412 × 80, three to five itemsMaterial is a full width bar with a separate 24 high Gesture Navigation component, iOS floats on glass
Top bariOS / Toolbar on a 44 high top barM3 / Top app bar, Small 64 high, Medium 112, Large 152Material has four bar types: Small, Center-aligned, Medium and Large

Start from these screens.

Every frame on this page is part of the Appetite UI file, drawn from its components and bound to its variables, so one brand edit moves every screen in light and dark.

The file holds 589 variables in 6 collections and exports its token values to SwiftUI, Jetpack Compose, Flutter and CSS. Solo covers one designer and Team up to ten people. You pay once and keep lifetime updates. Price goes up Nov 1

The read-only Figma preview opens the whole file, every screen and every variable, before you buy.

Get lifetime accessOpen the Figma previewSee the plans