Updated
Task manager app home
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.
Updated
Preview
My work, Inbox, from the Tasks page of the Appetite UI Figma file. The theme switch shows the dark frames.
| Screen | What it shows |
|---|---|
| My work | The personal queue: a week summary, a Today, Upcoming and Done switch, task rows |
| Inbox | Notifications grouped by day |
Which components carry the dashboard pattern?
The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.
Quick Action Button
Navigation, four tabs
How does this screen follow the dashboard pattern?
The rules every dashboard screen in the kit follows, and what this one does with each.
| Rule | On the task manager app |
|---|---|
| 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. |
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 |
|---|---|
| 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 |
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/bar/bottom-height | 49 | 64 |
platform/min-touch-target | 44 | 48 |
platform/screen-padding | 16 | 16 |
| 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 |
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.