# Task manager app home

> A task manager home screen for Figma: a week summary, a Today, Upcoming and Done switch, task rows with checkboxes and owners, and an inbox of mentions.

A personal queue in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: a This week card with 12 of 23 done, a Today, Upcoming and Done switch, task rows with checkboxes, labels and assignee avatars, and a floating add button. Inbox groups mentions and assignments by day.

Page: https://www.appetiteui.com/screens/tasks/my-work. Every screen of the app: https://www.appetiteui.com/docs/screens-tasks.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| My work | The personal queue: a week summary, a Today, Upcoming and Done switch, task rows | Avatar, Badge, Checkbox, Segmented Control, Floating Action Button, Navigation |
| Inbox | Notifications grouped by day | Segmented Control, Avatar, Button |

- My work, light: Tasks app My work screen: a This week card with 12 of 23 done, 4 due today, 7 in progress and 12 done, a Today, Upcoming and Done switch, task rows with checkboxes, labels and assignee avatars, and a floating add button above the tab bar
  Picture: https://www.appetiteui.com/images/au_tasks_my_work_light.webp (dark: https://www.appetiteui.com/images/au_tasks_my_work_dark.webp)
- Inbox, light: Tasks app Inbox screen: a 2 unread count, All, Mentions and Assigned tabs, and notifications grouped under Today and Yesterday, each with an avatar, an action mark and a time
  Picture: https://www.appetiteui.com/images/au_tasks_inbox_light.webp (dark: https://www.appetiteui.com/images/au_tasks_inbox_dark.webp)

## How the screen follows the dashboard pattern

| Rule | On this screen |
| --- | --- |
| One thing leads | The week summary leads: 12 of 23 done, then 4 due today, 7 in progress and 12 done, before any single task. |
| Actions sit next to what they act on | Each task is ticked off on its own row with a Checkbox, and a new one starts from the Floating Action Button above the tab bar. |
| The tab bar is the way out | My work carries the Navigation tab bar; Inbox narrows its list with All, Mentions and Assigned in a Segmented Control instead of a menu. |

## Built from

| Component | Screens |
| --- | --- |
| Avatar | My work, Inbox |
| Badge | My work |
| Checkbox | My work |
| Segmented Control | My work, Inbox |
| Floating Action Button | My work |
| Navigation | My work |
| Button | Inbox |

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

- Task manager app: [Task manager app board](https://www.appetiteui.com/screens/tasks/board)
- Docs: [Tasks app screens, every screen and token](https://www.appetiteui.com/docs/screens-tasks)
- 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)
- Food delivery app: [Food delivery app home](https://www.appetiteui.com/screens/food-delivery/home)
- 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)