Updated
Food delivery app order tracking
Where the food is, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: Order AP 4192 on a map with its route, Arriving in 12 minutes, a timeline that stops at Idris picked up your order, and Idris with chat and call buttons. Orders shows the same delivery as an In progress card with a Track order button.
Updated
Preview
Tracking, Orders, from the Foodie page of the Appetite UI Figma file. The theme switch shows the dark frames.
| Screen | What it shows |
|---|---|
| Tracking | A map, the arrival time, a delivery timeline and the courier |
| Orders | The order in progress with its steps, and past orders |
Which components carry the order tracking pattern?
The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.
Progress Steps, step 3 of 4
Button, Fill and Weak
How does this screen follow the order tracking pattern?
The rules every order tracking screen in the kit follows, and what this one does with each.
| Rule | On the food delivery app |
|---|---|
| Lead with the arrival time | Arriving in 12 minutes is the largest line on Tracking and Arriving at 19:20 on the Orders card: the time leads, the steps follow. |
| Steps, not a percentage | The four stages are named rows on Tracking and a Progress Steps line on Orders, so both say what happens next instead of a percentage. |
| The person is one tap away | Chat and call sit on the courier’s row, beside Idris and his Avatar. |
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.
| Component | Screens |
|---|---|
| Top Bar | Tracking |
| Avatar | Tracking |
| Button | Tracking, Orders |
| Lucide icons | Tracking |
| Section Header | Orders |
| Progress Steps | Orders |
| Badge | Orders |
| List | Orders |
| Navigation | Orders |
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/min-touch-target | 44 | 48 |
| Component | iOS | Material 3 | What differs |
|---|---|---|---|
| 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.