Updated
Food delivery app restaurant menu
Ordering from one place in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: the Ramen Kitchen storefront with a 4.9 rating, Popular, Ramen, Sushi and Drinks tabs, dish rows with a blue add button and a View cart bar, and a Dish sheet with a size choice and extras.
Updated
Preview
Restaurant, Dish, from the Foodie page of the Appetite UI Figma file. The theme switch shows the dark frames.
| Screen | What it shows |
|---|---|
| Restaurant | A storefront photo, rating, menu tabs and dish rows with an add button |
| Dish | One dish with a size choice, extras and an Add to cart bar |
Which components carry the detail pattern?
The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.
Rating, Score
Badge, pill
List, toggle rows
Button, Fill
How does this screen follow the detail pattern?
The rules every detail screen in the kit follows, and what this one does with each.
| Rule | On the food delivery app |
|---|---|
| The action rides along | View cart with 2 items and $32.90 rides at the bottom of the menu, and Add to cart at the bottom of the dish sheet. |
| Proof before price | The rating, 4.9 from 320 ratings, and Open until 22:00 sit above the menu tabs, before any price. |
| Buttons on photos are overlay buttons | Back and favorite over the storefront photo are Button / Overlay; the delivery label on the picture is Badge / Overlay. |
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 |
|---|---|
| Button / Overlay | Restaurant, Dish |
| Badge / Overlay | Restaurant |
| Rating / Score | Restaurant |
| Tabs | Restaurant |
| Button | Restaurant, Dish |
| List | Dish |
| Radio | Dish |
| Toggle | Dish |
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 |
platform/list-row/min-height | 44 | 56 |
| 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.