Skip to content

Updated

Copy page

Empty state screens

What a screen shows when it has nothing to show, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system. All four use one Empty State component: an icon, a headline, one line and the action that fills the screen.

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.

Empty state screens393 x 852 each, Light and Dark
Booking app Trips screen with no bookings: a suitcase icon, No trips booked yet, one line of guidance and a Start searching button above a floating tab barBooking app Trips screen in dark mode with no bookings: a suitcase icon, No trips booked yet, one line of guidance and a Start searching button above a floating tab bar
Booking app, Trips empty
Foodie app Cart screen with nothing in it: a shopping bag icon, Your cart is empty, one line explaining that nothing is ordered until you confirm, and a Browse restaurants buttonFoodie app Cart screen in dark mode with nothing in it: a shopping bag icon, Your cart is empty, one line explaining that nothing is ordered until you confirm, and a Browse restaurants button
Food delivery app, Cart empty
Empty state screen: a wallet icon in a pale blue circle, the headline No transactions yet, a line saying activity will appear after the first transaction, a filled Add money button and a quiet Go back buttonEmpty state screen in dark mode: a wallet icon in a dark blue circle, the headline No transactions yet, a line saying activity will appear after the first transaction, a filled Add money button and a quiet Go back button
Empty state, Add money
Error state screen: a red circle with a white x, the headline Something went wrong, a line asking the user to check the connection and try again, a filled Try again button and a quiet Go back buttonError state screen in dark mode: a red circle with a white x, the headline Something went wrong, a line asking the user to check the connection and try again, a filled Try again button and a quiet Go back button
Empty state, Error
Screens, app, screen, what it shows, page
AppScreenWhat it showsPage
Booking appTrips emptyThe state of a traveler with no bookingsDocs
Food delivery appCart emptyThe state of a cart with nothing in itFood delivery app cart
Empty stateAdd moneyNothing has happened yet and one action fixes thatDocs
Empty stateErrorA request failed and the user can retry or go backDocs

Which components carry the empty state pattern?

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

Empty state, live componentsKit geometry, light and dark

Empty State, Info

No trips booked yetWhen you book a stay it will wait for you here.

Empty State, Error

Something went wrongCheck your connection and try again.

What does every empty state screen do?

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

Rules, rule, why
RuleWhy
Say what is missing, then what fills itNo trips booked yet, then Start searching. The headline names the empty thing and the button is the first step to change it.
Keep the frameAn empty list keeps its top bar and tab bar, so people know where they are and how to leave.
An error is an empty state with a retryA failed request uses the same component in its error type, with Try again first and Go back second.

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/min-touch-target4448
platform/bar/bottom-height4964
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
DialogiOS / Alert, 300 wide at radius 32M3 / Basic dialog, 304 wide at radius 24Material has Basic, List and Scrollable list dialogs, iOS draws the alert as glass

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