# Food delivery app restaurant menu

> A restaurant menu and dish screen for a Figma food delivery app: a storefront, rating, menu tabs, dish rows with add buttons, sizes and extras.

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.

Page: https://www.appetiteui.com/screens/food-delivery/restaurant-menu. Every screen of the app: https://www.appetiteui.com/docs/screens-foodie.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Restaurant | A storefront photo, rating, menu tabs and dish rows with an add button | Button / Overlay, Badge / Overlay, Rating / Score, Tabs, Button |
| Dish | One dish with a size choice, extras and an Add to cart bar | List, Radio, Toggle, Button / Overlay, Button |

- Restaurant, light: Foodie app Restaurant screen: the Ramen Kitchen storefront photo with back and favorite buttons and an Open until 22:00 label, a 4.9 rating from 320 ratings, Popular, Ramen, Sushi and Drinks tabs, dish rows with a price and a blue add button on each photo, and a View cart bar with 2 items and $32.90
  Picture: https://www.appetiteui.com/images/au_foodie_restaurant_light.webp (dark: https://www.appetiteui.com/images/au_foodie_restaurant_dark.webp)
- Dish, light: Foodie app Dish screen: a sheet over a bowl of shoyu ramen with a close and a favorite button, the description and the price $12.90, a Choose a size choice between Regular and Large, Add extras switches for Extra egg and Chili oil, and an Add to cart bar
  Picture: https://www.appetiteui.com/images/au_foodie_dish_light.webp (dark: https://www.appetiteui.com/images/au_foodie_dish_dark.webp)

## How the screen follows the detail pattern

| Rule | On this screen |
| --- | --- |
| 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. |

## Built from

| Component | Screens |
| --- | --- |
| Button / Overlay | Restaurant, Dish |
| Badge / Overlay | Restaurant |
| Rating / Score | Restaurant |
| Tabs | Restaurant |
| Button | Restaurant, Dish |
| List | Dish |
| Radio | Dish |
| Toggle | Dish |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |

| 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 |

## Related

- Food delivery app: [Food delivery app home](https://www.appetiteui.com/screens/food-delivery/home)
- Food delivery app: [Food delivery app cart](https://www.appetiteui.com/screens/food-delivery/cart)
- Food delivery app: [Food delivery app checkout](https://www.appetiteui.com/screens/food-delivery/checkout)
- Food delivery app: [Food delivery app order tracking](https://www.appetiteui.com/screens/food-delivery/order-tracking)
- Docs: [Foodie app screens, every screen and token](https://www.appetiteui.com/docs/screens-foodie)
- Pattern: [Detail screens](https://www.appetiteui.com/screens/patterns/detail)
- Fitness app: [Fitness app workout screen](https://www.appetiteui.com/screens/fitness/workout)
- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Rating](https://www.appetiteui.com/docs/rating)
- Docs: [Badge](https://www.appetiteui.com/docs/badge)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)