# Task manager app board

> A kanban board for a Figma task manager app, with the same tasks as a table and a timeline: status, labels, due dates and owners on every card.

One project three ways in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: the Product project as To do and In progress columns of cards, the same tasks as a table with Due and Status and a status split, and as bars across the week of 8 September.

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

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| Board | The Product project as columns of task cards | Badge, Avatar, Button, Chip |
| Table | The same tasks as rows with Due and Status, plus a status split | Table, Button, Chip |
| Timeline | The same tasks as bars across a week | Avatar, Button, Chip |

- Board, light: Tasks app Board screen: the Product project with a Board view switch, search, sort and filter buttons and a New button above To do and In progress columns of task cards with labels, due dates, comment counts and assignee avatars, and an Add task button
  Picture: https://www.appetiteui.com/images/au_tasks_board_light.webp (dark: https://www.appetiteui.com/images/au_tasks_board_dark.webp)
- Table, light: Tasks app Table screen: Product tasks sorted by due date in a table with Task, Due and Status columns, a By status bar that splits 18 tasks into To do, In progress, In review and Done, and Group by, Columns and Export rows
  Picture: https://www.appetiteui.com/images/au_tasks_table_light.webp (dark: https://www.appetiteui.com/images/au_tasks_table_dark.webp)
- Timeline, light: Tasks app Timeline screen: the week of 8 September as day columns with the 10th highlighted, seven task bars carrying assignee avatars and durations, and a To do, In progress, In review and Done legend
  Picture: https://www.appetiteui.com/images/au_tasks_timeline_light.webp (dark: https://www.appetiteui.com/images/au_tasks_timeline_dark.webp)

## How the screen follows the board pattern

| Rule | On this screen |
| --- | --- |
| One task set, three views | Board, Table and Timeline are three views of the same tasks; the view switch in each toolbar names the view that is open. |
| Status, label and owner on every card | Every card carries its label and due date as Badges and its owner as an Avatar, and the table keeps the same status as a column. |
| The view switch names the view | New sits in the toolbar beside search, sort and filter, and Add task at the foot of the columns, so a task starts where it will live. |

## Built from

| Component | Screens |
| --- | --- |
| Badge | Board |
| Avatar | Board, Timeline |
| Button | Board, Table, Timeline |
| Chip | Board, Table, Timeline |
| Table | Table |

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

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Chip | No counterpart | M3 / Chip, 32 high at radius 8 | The Apple pages have no chip |

## Related

- Task manager app: [Task manager app home](https://www.appetiteui.com/screens/tasks/my-work)
- Docs: [Tasks app screens, every screen and token](https://www.appetiteui.com/docs/screens-tasks)
- Docs: [Table](https://www.appetiteui.com/docs/table)
- Glossary: [Chip](https://www.appetiteui.com/academy/glossary/chip)