Skip to content

Updated

Copy page

Dashboard screens

The first screen after sign in, drawn six ways in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. Each one leads with the number or the list its app is opened for and keeps every other block under it.

Copy page

Updated

On this page
  1. Screens
  2. Live components
  3. The rules
  4. iOS and Material
  5. Related
  6. Get the file

Screens

Every screen of the Appetite UI Figma file that shows the pattern, light and dark. The theme switch shows the dark frames.

Dashboard screens393 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
Finance app, Dashboard
Fitness app Dashboard screen: Today with a week strip and Wednesday 30 selected, Move 486 of 600 kcal, Exercise 38 of 45 min and Stand 9 of 12 h beside three activity rings, Heart rate 62 bpm and Sleep 7h 42m cards, and an Up next Legs and Power workout card on a photo above the tab barFitness app Dashboard screen in dark mode: Today with a week strip and Wednesday 30 selected, Move 486 of 600 kcal, Exercise 38 of 45 min and Stand 9 of 12 h beside three activity rings, Heart rate 62 bpm and Sleep 7h 42m cards, and an Up next Legs and Power workout card on a photo above the tab bar
Fitness app, Dashboard
Foodie app Home screen: a Delivery and Pickup switch with a notification button, the address Prinsengracht 512, Amsterdam, a Dishes or restaurants search field, a row of cuisine buttons from Pizza to Ramen, a blue Free delivery all week promo card with an Order now button, and Fastest near you restaurant cards with delivery times above a floating tab barFoodie app Home screen in dark mode: a Delivery and Pickup switch with a notification button, the address Prinsengracht 512, Amsterdam, a Dishes or restaurants search field, a row of cuisine buttons from Pizza to Ramen, a blue Free delivery all week promo card with an Order now button, and Fastest near you restaurant cards with delivery times above a floating tab bar
Food delivery app, Home
Booking app Explore screen: a Start your search capsule with a filter button, Stays and Experiences tabs, Popular in Lapland and Weekends by the sea rows of cabin cards with a favorite heart, rating and price per night, and a floating tab barBooking app Explore screen in dark mode: a Start your search capsule with a filter button, Stays and Experiences tabs, Popular in Lapland and Weekends by the sea rows of cabin cards with a favorite heart, rating and price per night, and a floating tab bar
Booking app, Explore
Social app Home screen titled For you: a row of stories with You, Leila, Priya and Erik, a post by amara_diallo with a Follow button, a photo, 1.2k likes, 48 comments and the caption Starting the day right, above the tab barSocial app Home screen titled For you in dark mode: a row of stories with You, Leila, Priya and Erik, a post by amara_diallo with a Follow button, a photo, 1.2k likes, 48 comments and the caption Starting the day right, above the tab bar
Social media app, Home
Tasks app My work screen: a This week card with 12 of 23 done, 4 due today, 7 in progress and 12 done, a Today, Upcoming and Done switch, task rows with checkboxes, labels and assignee avatars, and a floating add button above the tab barTasks app My work screen in dark mode: a This week card with 12 of 23 done, 4 due today, 7 in progress and 12 done, a Today, Upcoming and Done switch, task rows with checkboxes, labels and assignee avatars, and a floating add button above the tab bar
Task manager app, My work
Screens, app, screen, what it shows, page
AppScreenWhat it showsPage
Finance appDashboardTotal balance, four quick actions and the latest transactionsFinance app dashboard
Fitness appDashboardThe day: a week strip, activity rings, heart rate, sleep and the next workoutFitness app dashboard
Food delivery appHomeA Delivery and Pickup switch, the address, a search field, cuisines, a promo card and nearby restaurantsFood delivery app home
Booking appExploreA capsule search, Stays and Experiences tabs and two rows of stay cardsDocs
Social media appHomeStories and the feed, titled For youSocial media app feed
Task manager appMy workThe personal queue: a week summary, a Today, Upcoming and Done switch, task rowsTask manager app home

Which components carry the dashboard pattern?

Drawn live from the kit's tokens, at the kit's geometry. Tap them: they behave as the Figma prototype does.

Dashboard, live componentsKit geometry, light and dark

Quick Action Button

Navigation, four tabs

What does every dashboard screen do?

The rules the screens above share. Each app's page says how its screen applies them.

Rules, rule, why
RuleWhy
One thing leadsA balance, a day of activity, a queue of tasks: the screen opens on the one figure or list the app is opened for, set larger than anything else on it.
Actions sit next to what they act onQuick actions stand directly under the figure they change, so the commonest task is one tap from the first screen.
The tab bar is the way outEvery dashboard carries the Navigation component, the app’s top level sections, and nothing else at the bottom of the screen.

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.

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