Figma Kanban

Preview

Figma Kanban

Figma Kanban Template

A kanban board shows work as cards moving through columns, one column per stage. The Frames X template ships the full screen in desktop, tablet and mobile sizes: a sidebar, a tabbed header and three columns, To Do, In Progress and Done, built from the kit’s cards and badges.

You can use predesigned Kanban cards to demonstrate the overall progress or design the roadmap for your project.

What is in the kanban template

Screens. Desktop with the full sidebar, tablet with a rail, and mobile with the columns stacked under a navbar.
Board columns. Each column heads with a badge for the stage label, with the task cards below.
Task cards. One kit card component carries every task, instanced across all three screens.
Header. A title row with an avatar group and actions, and a tab line for board views.

How to make a kanban board in Figma

Build one card first. A surface with the task title, assignee avatar and a label, in auto layout so it grows with content.
Stack cards into a column frame with a fixed width and a gap, and head it with a stage badge.
Duplicate the column per stage and keep the card an instance, so one edit updates every task.
Let each column scroll on its own, with the board scrolling sideways when stages outgrow the screen.
On mobile, stack the columns vertically under the navbar. The template ships that layout ready.

Kanban UI best practices

Cap work in progress. Kanban works when columns stay short, so collapse or archive the Done column once it grows.
Keep the card scannable. Title, assignee and one label read in a pass, and detail opens in a modal.
Name stages by state, not by team. To Do, In Progress and Done travel across projects, and custom stages multiply columns.
Use color for priority only. When every label has a color, none of them reads as urgent.
Align the columns to one grid, so cards keep their width when they move between stages.

Kanban AI prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a kanban board in Figma. Structure: a sidebar, a title row with an avatar group and actions, a tab line for views, and three columns for To Do, In Progress and Done. Each column is a fixed-width auto layout frame headed by a stage badge, with task cards below showing a title, assignee avatar and a label. Keep the card one component instanced everywhere, make desktop, tablet and mobile layouts with columns stacked vertically on mobile, and bind fills to theme variables.

Figma kanban FAQ

What is a kanban board template?

A ready screen with work-stage columns and task cards, shipped in desktop, tablet and mobile layouts. Drop tasks into the cards and rename the stage badges, the structure is already wired.

What is the anatomy of a kanban board?

Columns for stages, a header badge per column, and cards for tasks. The template adds the app shell around it: a sidebar, a title row with an avatar group, and tabs for switching views.

How many columns should a kanban board have?

Three cover most flows: To Do, In Progress and Done. Add a Review or Blocked column only when the team actually gates work there, and keep the board under six.

Can the kanban cards be customized?

Yes. Every task is an instance of one kit card component, so changes to the base card update the whole board, and each instance takes its own text and avatar.

Does the template work on mobile?

Yes. The mobile layout stacks the three columns vertically under a navbar, with the same cards and badges as desktop.

Source