# Food delivery app home

> A food delivery app home screen for Figma: delivery or pickup, the address, search, cuisines, a promo and nearby restaurants, with a cuisine category screen.

The first screen of a food delivery app in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: a Delivery and Pickup switch, the address, a Dishes or restaurants search field, cuisines from Pizza to Ramen, a Free delivery all week promo and Fastest near you. Category narrows it to one cuisine.

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

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Home | A Delivery and Pickup switch, the address, a search field, cuisines, a promo card and nearby restaurants | Segmented Control, Search, Quick Action Button, Section Header, Vertical Card, Horizontal Card, Navigation |
| Category | Restaurants for one cuisine with the delivery time on each photo | Top Bar, Chip, Vertical Card, Badge / Overlay, Navigation |

- Home, light: Foodie app Home screen: a Delivery and Pickup switch with a notification button, the address Prinsengracht 512, Amsterdam, a Dishes or restaurants search field, a row of cuisine buttons from Pizza to Ramen, a blue Free delivery all week promo card with an Order now button, and Fastest near you restaurant cards with delivery times above a floating tab bar
  Picture: https://www.appetiteui.com/images/au_foodie_home_light.webp (dark: https://www.appetiteui.com/images/au_foodie_home_dark.webp)
- Category, light: Foodie app Category screen: Salad with Sort, Fastest, Top rated and Free delivery chips, the line 18 places deliver salads to you, and restaurant cards for Green Bowl with a 15 to 25 min label on the photo, a favorite heart, a 4.9 rating and 1.2 km Free delivery
  Picture: https://www.appetiteui.com/images/au_foodie_category_light.webp (dark: https://www.appetiteui.com/images/au_foodie_category_dark.webp)

## How the screen follows the dashboard pattern

| Rule | On this screen |
| --- | --- |
| One thing leads | The address and the search field lead, because where the food goes and what someone wants decide every result under them. |
| Actions sit next to what they act on | Delivery and Pickup is a Segmented Control at the very top: it changes what every card below promises, so it sits above them all. |
| The tab bar is the way out | Home ends on the floating Navigation tab bar, and Category keeps it, adding Sort, Fastest, Top rated and Free delivery chips. |

## Built from

| Component | Screens |
| --- | --- |
| Segmented Control | Home |
| Search | Home |
| Quick Action Button | Home |
| Section Header | Home |
| Vertical Card | Home, Category |
| Horizontal Card | Home |
| Navigation | Home, Category |
| Top Bar | Category |
| Chip | Category |
| Badge / Overlay | Category |

## 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 |
| --- | --- | --- | --- |
| Tab bar height | 49 pt | 64 dp | `platform/bar/bottom-height` |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Screen side padding | 16 pt | 16 dp | `platform/screen-padding` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Navigation | iOS / Tab Bar, floating capsule 62 high, two to five tabs | M3 / Navigation bar, 412 × 80, three to five items | Material is a full width bar with a separate 24 high Gesture Navigation component, iOS floats on glass |
| Top bar | iOS / Toolbar on a 44 high top bar | M3 / Top app bar, Small 64 high, Medium 112, Large 152 | Material has four bar types: Small, Center-aligned, Medium and Large |

## Related

- Food delivery app: [Food delivery app restaurant menu](https://www.appetiteui.com/screens/food-delivery/restaurant-menu)
- 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: [Dashboard screens](https://www.appetiteui.com/screens/patterns/dashboard)
- Finance app: [Finance app dashboard](https://www.appetiteui.com/screens/finance/dashboard)
- Fitness app: [Fitness app dashboard](https://www.appetiteui.com/screens/fitness/dashboard)
- Social media app: [Social media app feed](https://www.appetiteui.com/screens/social/feed)
- Task manager app: [Task manager app home](https://www.appetiteui.com/screens/tasks/my-work)
- Docs: [Navigation](https://www.appetiteui.com/docs/navigation)
- Docs: [Button](https://www.appetiteui.com/docs/button)
- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Glossary: [Tab bar](https://www.appetiteui.com/academy/glossary/tab-bar)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Glossary: [Safe area](https://www.appetiteui.com/academy/glossary/safe-area)
- Article: [How to design one app for iOS and Android in Figma](https://www.appetiteui.com/blog/design-one-app-for-ios-and-android-in-figma)
- Article: [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android)