How to Make a Table in Figma (and a Faster Way for Complex Tables)

How do you make a table in Figma? Build one cell as a component, combine cells into a row with horizontal auto layout, then stack rows with vertical auto layout. Make a header variant of the cell, set columns to fixed or fill widths, and use component properties for text and states. The result resizes cleanly when content changes.

Step 1: Build a cell component

Create a frame with a text layer, add auto layout with padding, and turn it into a component. Add variants for header, default, hover and selected, plus left- and right-aligned versions for text and numbers.

Step 2: Build a row

Place one cell instance per column inside a frame with horizontal auto layout. Set each cell's width to fixed for narrow columns (status, dates) and fill container for the column that should absorb extra space (usually the name).

Step 3: Stack rows into a table

Duplicate the row and wrap all rows in a frame with vertical auto layout and zero spacing. Put the header row first.

Step 4: Make columns resize together

This is where Figma tables usually break: change one cell's width and the column no longer lines up. Two common fixes are building the table column-first (each column a vertical auto layout frame) or keeping every cell in a column on the same fixed width and changing them together.

Step 5: Fill it with realistic data

Placeholder text hides problems. Paste in real-looking names, codes and numbers to check widths, wrapping and alignment.

Where Figma tables get painful

• Adding or reordering a column means touching every row.
• Nested or expandable rows mean duplicating and repositioning groups of cells by hand.
• Developers still rebuild the table from scratch in code.

Figma has added AI features that generate table layouts on the canvas, which speeds up the first draft. Structural changes are still where most of the time goes.

A faster way for complex tables

For data-heavy product tables, you can build the table in a dedicated table builder like GridForge, where columns, nested rows and frozen headers behave like a real table, then copy the finished table to Figma and export the code for developers.

For the design principles behind a good table, read Data table design: a practical guide.