Figma Table

Preview

Figma Table

Figma Table Component

The Table component organizes data into rows and columns, mimicking the familiar spreadsheet layout for easy comprehension and analysis. Our Table UI provides two structure variants, with a row and column-based Auto layout approach.

Test both Auto Layout options to see which works better for your data - they stack differently;
Build custom tables by stacking individual cells - each one can have its own unique style.

Table Anatomy

Set	Variants	Properties
TableCell	30	Type Progress, Toggle, Avatar, Checkbox, TextSize Large, Medium, SmallState Focused, Default
TableHeader	2	Type Icon, Checkbox

Table has no single variant set. You build it from TableCell and TableHeader.

The table has no single variant set — it is assembled from TableCell in Text, Avatar, Checkbox, Toggle and Progress types at Small, Medium and Large sizes with Default and Focused states, and TableHeader in Icon and Checkbox types, with Rows and Columns example boards showing both auto-layout structures.

The file includes Rows and Columns example boards.

Table AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a data table system in Figma from cells. TableCell: a cell with Type property — Text for plain values, Avatar with an avatar, name and email, Checkbox for row selection, Toggle for a switch, and Progress for a labelled progress bar — in Small, Medium and Large row heights, with Default and Focused states where Focused tints the row. TableHeader: a header cell in Icon type with a sort arrow and Checkbox type with a select-all control. Compose two example boards: a Rows structure where each row is a horizontal auto layout of cells and rows stack vertically, and a Columns structure where each column is a vertical stack of cells placed side by side, so the user can test which resizes better for their data. Build a complete Users table from the Rows structure: a toolbar with search, filter and Add user buttons, a header, eight rows mixing the cell types, a status badge column, a row-actions menu and a pagination footer. Keep borders and fills on variables for light and dark mode.

Source