How to Make a Table in Figma: A Complete Guide

Figma Design has no table tool. There’s a frame tool, a rectangle, a text tool, and then nothing that draws a grid of cells for you.

So tables get built out of frames, auto layout and components. Pricing tables, dashboards, comparison layouts, all of it assembled by hand and then handed to developers through Dev Mode.

If that sounds tedious, it is, which is why Table Creator exists. It generates a grid capped at 50 columns and 50 rows, per its own Figma Community listing.

What Is a Table in Figma

Rows and columns, sure. Underneath, though, it’s frames nested inside frames with auto layout handling the spacing, all sitting in a normal Figma Design file.

Nothing in the toolbar builds that for you. Search Figma’s community forum and you’ll find the same request going back years, with the same answer every time: build it manually.

FigJam is a different product with a different answer. Figma’s whiteboard ships a real table you drop onto the board with a shortcut. Figma Design still doesn’t.

Every method starts from the same primitive. A single cell gets built the way you’d normally set up a frame in Figma, then duplicated into a full grid.

From there it splits. You can nest auto layout frames by hand, which is slow but gives you everything. You can run a community plugin like Table Creator and let it generate the grid. Or you can pull a prebuilt table component out of a UI kit on Figma Community and accept whatever styling came with it.

A few numbers worth having in your head before you start.

Table Creator won’t go past 50 columns and 50 rows in a single run. Shift + T drops a native table onto a FigJam board and does nothing at all inside Figma Design. And at Figma’s Config 2026 keynote on June 24, 2026, Figma Motion shipped and Code Layers entered early access, while a native table for Figma Design still didn’t.

How Does Auto Layout Build a Table’s Rows and Columns

Stack frames in one direction, fix the spacing between them, and you have a row. Rotate the idea and you have a column.

A table stops being a pile of rectangles the moment you learn how to use auto layout in Figma to stack cells instead of positioning them by hand.

One frame handles the vertical stack of rows. Inside each row, a second auto layout frame handles the horizontal stack of cells.

Nesting Auto Layout for Rows Inside Columns

The outer frame runs vertical auto layout, one child per row. Each row frame runs horizontal auto layout, one child per cell. Gap and padding get set once on the parent, and every child picks them up from there.

Skip auto layout on any single row inside that stack and the whole thing stops behaving like a table. Cells drift out of alignment the moment content changes length.

Bitovi, an official Figma partner, builds table rows around a slot, a horizontal auto layout frame that holds instances of a cell component, so the row’s content stays swappable without breaking the parent’s spacing rules.

Hug Contents vs Fill Container for Table Cells

Cell width comes down to one setting.

Hug contents shrinks the cell down to whatever text is in it. That’s what you want on a status column, or anything short and predictable.

Fill container goes the other way. The cell claims its share of the row’s total width, which is the behavior a description column needs if the text isn’t going to look cramped.

Mixing the two inside a single row is normal. A name column set to fill container next to a status column set to hug contents is a common pattern in dashboard tables.

Get the constraint wrong on a nested frame and resizing the outer table produces a squashed cell instead of a wider one. That single setting causes most of the layout complaints tied to Figma tables.

How Do You Turn Table Cells Into Reusable Components

A cell only becomes maintainable once it stops being a one-off group of shapes and text.

Once you know how to use components in Figma, converting a styled cell into a main component means every duplicate updates together the moment the source changes.

Setting Up Component Variants for Cell States

A default body cell. A header cell. Whatever the row looks like when it’s selected or hovered. And an empty placeholder for the rows that haven’t been filled in yet. Those four cover most tables, and each one earns a variant.

Grouping them under a single component with a state property beats keeping four disconnected components, mainly because swapping states later becomes a dropdown instead of a hunt through the layers panel.

The team at Galvanize documented converting their DataTable into full variants for their UI kit, and deliberately saved it for last on their component backlog because table variants turned out to be the hardest set to structure cleanly (Carol Chan, Medium).

Component properties push this further, letting a single cell swap its text or icon per instance without breaking the underlying structure. That’s the difference between editing 40 cells and editing one.

Styling the Header Row as a Separate Variant

Header rows carry different rules than body rows, so they earn their own variant rather than a manually recolored duplicate.

The header usually wants bolder text, a distinct fill, and a locked width across every column so nothing shifts when data loads. Body rows stay lighter, neutral, sized by their content.

This is where how to create variants in Figma stops being theory. One property swap moves a row between the two states, instead of a manual restyle every time a new table gets built.

How Do You Style a Table in Figma

Styling comes after structure, never before it.

A cell that resizes correctly but looks unfinished is a five-minute fix. A cell that looks finished but doesn’t resize is a rebuild.

• Flat, low-contrast fills on body cells, since a busy background fights with the data sitting on top of it
• A single 1px divider between rows, which reads cleaner than a stroke drawn around every individual cell
• Corner radius on the table’s four outer corners only, never on every cell, which is the detail that separates a polished table from a grid of rounded boxes
• Consistent horizontal and vertical padding inside every cell so text isn’t crowding the divider lines

Getting comfortable with how to round corners in Figma matters here specifically, because rounding the wrong layer, an inner cell instead of the outer frame, is one of the most common table styling mistakes.

Alternating row color works best as a fill style swap applied through a variant property, not a manual repaint of every second row. Repaint it by hand once and the next data update forces you to redo it.

Which Method Should You Use to Build a Table in Figma

The trade-offs here are predictable enough to lay out side by side.

Method choice matters most when a table has to survive contact with real data. A table built for a one-off mockup rarely needs the same rigor as one going into a shared library.

Anyone thinking seriously about what is a design system in the first place should default to the manual auto layout route, since it’s the only one of the four built to hold up under repeated reuse across a team.

The Moove It product design studio, now part of Qubika, built a reusable table component set modeled on its internal Hiedra design system, borrowing structural cues from MUI’s data table before publishing the file to Figma Community.

Teams that follow published Figma components best practices tend to land on the manual route by default, then reach for a plugin only when speed matters more than polish.

Is the Table Creator Plugin Worth Using

Table Creator automates the part of table building nobody enjoys, which is duplicating a cell across dozens of rows and columns by hand.

Point it at a linked cell component and it generates the full grid, then gives you commands to select an entire row or column at once for bulk edits. Custom interaction states, non-grid layouts, anything past its own size ceiling, none of that is in scope.

The upside is real. Grid generation takes seconds. The selection commands genuinely speed up edits. Components stay linked, so restyling the source cell updates the whole table.

The limits are just as real.

• Capped at 50 columns and 50 rows per table
• No support for custom prototype interactions on individual rows
• Generated structure still needs manual cleanup for anything beyond a basic grid

Worth using for a first draft or a client mockup. Worth skipping for a production data table headed into a shared design system, where hand-built auto layout gives more control over the long run.

When Should You Use FigJam Instead of Figma Design for a Table

The honest answer depends on whether the table is a deliverable or a conversation.

Live Data Sessions in FigJam

FigJam’s table exists for the moment when a group needs to fill in cells together, in real time, without anyone touching auto layout or components.

Figma’s own investor disclosures put its monthly active users above 13 million, and roughly two out of three of them are non-designers, people like product managers and researchers who show up to edit a file rather than build one from scratch (Figma S-1, 2025).

That’s exactly the audience FigJam’s table was built for. Anyone can click and drag, add a row, and start typing.

Styled Handoff Tables in Figma Design

A table meant for a developer handoff needs fixed styling, consistent components and specs that survive inspection.

Reach for FigJam when the table is temporary, or collaborative, or being filled in during a live meeting. Figma Design is for the permanent case, the table that’s an actual UI element with defined fills, strokes and states.

Pasting a FigJam table’s content into a Figma Design file rarely works cleanly. The two are separate objects, and the FigJam version carries none of the component structure a shipped interface needs.

How to Build a Table in Figma Step by Step

Every build follows the same order, whether the table ends up with ten rows or two hundred.

None of these steps are optional. Skip one and the next step gets harder, not easier.

1. Draw one frame and set fixed padding on all four sides for the first cell
2. Add the text layer, then set its resizing to hug contents or fill container
3. Convert the finished cell into a main component
4. Duplicate the component sideways into a horizontal auto layout row
5. Duplicate that row downward into a vertical auto layout table
6. Style the header row last, once the body grid holds up on its own

Turning that first cell into a proper component matters more than any later step. Anyone still fuzzy on how to make components in Figma should stop here and get that right before duplicating anything.

Following a solid Figma auto layout guide for steps four and five saves the most time, since nested auto layout is where most manual builds go wrong.

Style the header before the body grid resizes correctly and you’ll be redoing the header work later. Order matters more than it looks like it should.

How Do You Populate Table Cells With Content

Content gets in one of a few ways, and which one you pick mostly depends on how many cells you’re dealing with.

Typing Content Manually

Manual typing works fine for a handful of rows, a pricing table with three tiers, or a comparison table with five items.

Once you’re comfortable with how to edit text in Figma, updating a small static table takes seconds per cell.

Somewhere under twenty cells, and only if the table isn’t going to change much after the first draft. Past that, it stops being worth it.

Using Content Reel for Placeholder Data

The Content Reel plugin ships with built-in data categories that include names, phone numbers, addresses, numbers, emails, URLs, companies, usernames and countries, according to its Figma Community listing.

Dropping placeholder rows in with Content Reel beats typing generic filler text into every cell, mainly because realistic names and numbers expose spacing problems that filler text hides. A column that looks fine full of “Lorem ipsum” falls apart the first time a real surname shows up.

• Select a text layer inside the cell component
• Open the plugin and pick a data category
• Apply it once, then duplicate the populated row

Pasting Data From a Spreadsheet

Pasting rows from a spreadsheet works, but not the way people expect.

Figma pastes spreadsheet content as a grid of separate text layers rather than matching it to existing cell components, so the pasted grid usually needs to be rebuilt into the table’s real structure by hand.

The faster route is to paste the raw data into a temporary frame first, then move each value into the matching cell inside the real table one column at a time. Still manual. Just less manual.

How Do You Make a Figma Table Resize Without Breaking

A table that looks right at one width and falls apart at another usually has one wrong constraint hiding somewhere in the nesting.

Figma’s own constraints documentation lists five horizontal options and five vertical options for any layer, with every new layer defaulting to Top and Left.

Constraints handle a single frame being resized. A table that needs to look different on a phone versus a desktop needs a second layer of control, usually a component variant swapped at the breakpoint rather than the same table stretched thin.

That second layer sits closer to responsive design in the broader sense, where the layout itself changes shape instead of just resizing.

Fixed width columns sitting next to fill container columns in the same row is the most common setup. It’s also the most common source of a table that resizes fine until one column hits its content limit and pushes the row wider than the frame.

How Do You Hand Off a Figma Table to Developers

A table hands off cleanly when a developer can open it and read every value without asking a follow-up question.

Dev Mode is where that happens. Selecting a cell there surfaces its exact fill, stroke, padding and spacing values instead of leaving someone to eyeball them off the canvas.

Peloton cut its manual design inspection time from 15 minutes down to 3 using Dev Mode, part of a broader handoff process the company reports now runs five times faster overall (Figma customer case study, Peloton).

Good Figma developer handoff practice for a table means marking the finished grid as ready for development, not just leaving it sitting on the canvas.

Export goes one of two ways. A flattened image is fine for documentation or a static reference. Keeping the live component structure is the better call when the table needs to stay editable after handoff.

Color and spacing values tied to a Figma variables guide style setup carry an extra benefit here. A single variable change updates every cell across every table using it, light mode and dark mode included.

When a Figma Table Does Not Work

Nothing about this breaks quietly. It shows up the moment a table gets big, gets interactive, or needs editing by someone who isn’t a designer.

Where Figma Tables Break in Prototypes

Row and column hover states are the first thing to fail, because a Figma table has no single object for an interaction to attach to.

Each cell is its own layer, so a hover or click interaction set up through how to prototype in Figma triggers on one cell at a time rather than the full row underneath it.

Size is the second failure point. Figma files run inside a 2GB per-tab memory ceiling, according to Figma’s own Help Center, and a table built from hundreds of individually placed cell layers is one of the fastest ways to approach that limit.

• Prototype clicks fire per cell instead of per row
• Files with hundreds of rows start lagging on scroll and selection
• Pasted spreadsheet data breaks the moment a column gets reordered

When a Native Table Tool Fits Better

Notion or Whimsical is the better call when the table itself, not a mockup of one, is the actual deliverable someone keeps editing after the design phase ends.

FigJam covers the other case, where the goal is capturing data live with a group rather than shipping a styled interface.

Figma’s own community forum carries repeated requests for a built-in table object, including designers who note the current toolkit still forces a trade-off between flexible interactive elements and a grid that stays easy to maintain.

Stick with a hand-built Figma table only when the end goal is a styled interface element. For anything else, a tool built around tables from the start saves more time than it costs to switch.

FAQ on How To Make A Table In Figma

Is a Figma table the same thing as a table component from a UI kit?

No. A UI kit’s table component is a pre-built instance with fixed styling, ready to drop in.

A hand-built Figma table gives full control over structure through auto layout and custom components, but takes longer to assemble.

Is Notion or Whimsical a better choice than Figma for building tables?

Yes, when the table is the deliverable itself.

Notion and Whimsical store real, editable data natively, while a Figma table only simulates that structure visually inside a static design file.

Do you need a paid Figma plan to build a table?

No. Auto layout, components and Figma’s plugin library, including Table Creator, all sit on the free Starter plan.

Dev Mode, needed later for developer handoff, is the one related feature that sits behind a paid seat.

What keyboard shortcut makes a table in Figma?

None, inside Figma Design. Frame (F), Rectangle (R) and Auto Layout (Shift+A) build the pieces, but no single shortcut generates a full table.

FigJam is the only Figma product with a dedicated shortcut, Shift+T, for dropping in a native table.

How many rows and columns can a Figma table plugin handle?

Table Creator caps out at 50 columns and 50 rows per run.

Building manually through auto layout carries no plugin ceiling, though every Figma file still runs inside a 2GB memory limit that a large hand-built table can approach faster than expected.

What Should You Fix First in How To Make A Table In Figma?

A Figma table needs its frame, auto layout and component structure fixed first, ahead of styling or content, since every later step depends on that structural base holding together under real data.

Fixing anything out of order costs more time than it saves.

• Structure comes first: frames, auto layout, a linked cell component
• Then behavior, meaning constraints plus the hug contents and fill container settings
• Content and handoff last, once populated cells, header styling and Dev Mode annotations have something stable to sit on

Locking down structure before content means early drafts stay unstyled longer, a trade-off worth it since restyling a table that already resizes correctly takes minutes, while restructuring one already populated and styled can take an afternoon.

Once a cell component behaves reliably across different row counts and screen widths, the next reasonable step is folding it into a broader design system in Figma rather than rebuilding the same grid inside every new file.