Updated
Food delivery app cart
The basket in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Your order from Ramen Kitchen arriving 19:20 to 19:35, Shoyu ramen and Sushi set with steppers, a subtotal of $32.90 and a service fee of $1.49, and Go to checkout with $34.39. Empty, the same screen says Your cart is empty and offers Browse restaurants.
Updated
Preview
Cart, Cart empty, from the Foodie page of the Appetite UI Figma file. The theme switch shows the dark frames.
| Screen | What it shows |
|---|---|
| Cart | Items with steppers, a price breakdown and a Go to checkout bar |
| Cart empty | The state of a cart with nothing in it |
Which components carry the checkout pattern?
The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.
List, Price Row
Stepper
Button, Fill, large
How does this screen follow the checkout pattern?
The rules every checkout screen in the kit follows, and what this one does with each.
| Rule | On the food delivery app |
|---|---|
| Show the total before the button | Subtotal and service fee sit directly above the Go to checkout bar, which repeats the total, $34.39. |
| The button says what it does | The button says Go to checkout, not Pay: this screen builds the order and the next one takes the money. |
| Every choice is a row | Quantities are Steppers on each item, and Add a promo code and Add cutlery are List rows, so the cart never grows a form. |
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.
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.
| Variable | iOS (ios-md) | Android |
|---|---|---|
platform/sheet/corner | 12 | 28 |
platform/list-row/min-height | 44 | 56 |
platform/min-touch-target | 44 | 48 |
| Component | iOS | Material 3 | What differs |
|---|---|---|---|
| Sheet | iOS / Sheet - Full Screen | M3 / Bottom sheet 412 wide and Side Sheet 320 wide | Material adds a side sheet for large screens |
| List | iOS / List with a 44 minimum row | M3 / List Item, 56, 72 or 88 high by Lines | Material sets the row height by lines of text, iOS sets only a minimum |
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.