Skip to content

Updated

Copy page

Task manager app board

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.

Copy page

Updated

On this page
  1. Preview
  2. Live components
  3. The pattern
  4. Built from
  5. iOS and Material
  6. Related
  7. Get the file

Preview

Board, Table, Timeline, from the Tasks page of the Appetite UI Figma file. The theme switch shows the dark frames.

Task manager app, board393 x 852 each, Light and Dark
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 buttonTasks app Board screen in dark mode: 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
Board
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 rowsTasks app Table screen in dark mode: 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
Table
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 legendTasks app Timeline screen in dark mode: 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
Timeline
Screens, screen, what it shows
ScreenWhat it shows
BoardThe Product project as columns of task cards
TableThe same tasks as rows with Due and Status, plus a status split
TimelineThe same tasks as bars across a week

Which components carry the board pattern?

The kit's components, drawn live from the same tokens as the frames. Tap them: they behave as the Figma prototype does.

Board, live componentsKit geometry, light and dark

Badge, labels

DesignDue todayDone

Checkbox

Segmented Control

How does this screen follow the board pattern?

The rules every board screen in the kit follows, and what this one does with each.

The pattern, rule, on this screen
RuleOn the task manager app
One task set, three viewsBoard, 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 cardEvery 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 viewNew 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.

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.

Built from, component, screens
ComponentScreens
BadgeBoard
AvatarBoard, Timeline
ButtonBoard, Table, Timeline
ChipBoard, Table, Timeline
TableTable

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.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
platform/min-touch-target4448
Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
ChipNo counterpartM3 / Chip, 32 high at radius 8The Apple pages have no chip

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.

Get lifetime accessOpen the Figma previewSee the plans