Figma Tables: How to Create One Step by Step

New to this topic? Start with our step-by-step guide: How to Make a Wireframe in Figma (Step by Step).

Figma tables are built, not inserted: Figma Design has no table tool, so you make one from auto layout frames (a cell, then a column, then the table), turn the cell into a component when the table needs to be reused, or use the native tables in Figma Slides and FigJam. This guide walks through each method step by step, with the shortcuts, sizing rules and alignment fixes that keep columns straight.

Does Figma have a table tool?

Not in Figma Design. As of October 2026 there is no “insert table” command in a design file, and the feature request is still open. Figma Slides can create a table or import a CSV, and FigJam has a simple table for whiteboards.

In Figma Design the quick version is:

1. Type one cell and press Shift + A to give it auto layout, padding and a fixed width.
2. Duplicate the cell down (Ctrl/Cmd + D) and wrap the stack with Shift + A to make a column.
3. Duplicate the column across and wrap the columns in a horizontal auto layout frame.
4. Style the header row, right-align numbers and, if the table will be reused, turn the cell into a component.

Method 1: Build a table with auto layout (step by step)

This is the method the screenshots below follow. The idea is simple: a cell is a text layer wrapped in an auto layout frame, cells stack into a column, and columns sit side by side to form the table. Because every level is an auto layout frame, you can add rows or widen a column later without nudging anything by hand. If auto layout is new to you, skim our Figma auto layout guide first (Figma’s own auto layout reference lists every property); the rest of this page assumes you know the Shift + A shortcut.

Step 1: Create a file and draw the table frame

Open a new Figma Design file and press F to pick the frame tool. Drag a frame roughly the size you expect the table to be and rename it Table in the layers panel (double-click the name). The exact size does not matter yet; auto layout will resize it to fit the columns later.

Step 2: Type the first cell

Press T, click inside the frame and type the first column heading, for example First name. Set the font size now (14 px is a common body size for tables) because every cell will inherit it when you duplicate.

Step 3: Turn the text into a cell with auto layout

Select the text layer and press Shift + A. Figma wraps it in an auto layout frame; rename that frame Cell. In the right-hand panel set padding to 12 top and bottom, 16 left and right, set the width to Fixed (140 px is a good start) and leave the height on Hug so long text can wrap without breaking the row. Fixed width is the single most important setting here: it is what keeps columns aligned later.

Step 4: Add a bottom border and duplicate the cell

With the cell selected, add a Stroke in the properties panel, open the stroke settings and keep only the bottom side at 1 px in a light grey. This gives you row dividers without boxing every cell. Now press Ctrl + D (Cmd + D on Mac) four or five times to create the cells for the first column, and drag the duplicates below the original.

Step 5: Stack the cells into a column

Select all the cells (Shift-click them on the canvas or in the layers panel) and press Shift + A again. Figma creates a vertical auto layout frame; set its gap to 0 and rename it Column. From now on, resizing this column frame resizes every cell inside it, which is exactly what you want.

Step 6: Duplicate the column and wrap the table

Duplicate the Column frame once per column you need (Ctrl/Cmd + D) and drag the copies to the right. Then select all the columns, press Shift + A one last time, set the direction to horizontal and the gap to 0. That outer frame is the table. Rename the columns and type the real headings and values; for a user list that might be First name, Last name, Email, City and Plan.

Step 7: Style the header and cells

Select the top cell in every column (hold Shift) and give the header row a light fill, a semibold weight and a slightly darker bottom border so it reads as a header. Keep body cells on a white or very light background and let the 1 px dividers do the work. If a column holds numbers, set its text alignment to the right so the digits line up. The result is a clean, editable table that you can resize from the outer frame.

Method 2: Make the table reusable with components

If the table will appear in more than one screen, or more than one teammate will edit it, promote the cell to a component before you duplicate it. Figma tables built this way update everywhere when you change the component once.

1. Make the cell a component. Select the Cell frame from Step 3 and press Ctrl/Cmd + Alt + K.
2. Add variants. Duplicate the component, style one copy as a header cell and one as a right-aligned numeric cell, select them all and choose Combine as variants. Name the property Type with values Header, Body and Number. Add a boolean property such as Selected if rows need a highlighted state.
3. Expose the text. Add a text property so the cell’s label can be edited from the properties panel without entering the layer.
4. Build columns from instances. Repeat Steps 5 and 6 with instances instead of plain frames. Swap the first instance in each column to the Header variant.
5. Publish to a library if your team uses one, so the same table cell appears in every file.

This is also where Figma’s grid mode for auto layout becomes useful: a single frame set to a grid layout can hold cell instances in rows and columns without the nested column frames. It suits tables whose shape is fixed, and our auto layout guide covers the grid properties in detail. Our UI/UX trends roundup shows how data-heavy products present tables in practice.

Method 3: Native tables in Figma Slides and FigJam, or a plugin

Sometimes you do not need a designed table at all; you need the data on a slide or a board. Figma Slides has a table object: insert one from the toolbar, set rows and columns, or import a CSV file and Slides builds the table for you. You can resize rows, columns or the whole table with handles, and style cells from the right panel. FigJam offers a lighter table for workshops and planning, with the same row and column resizing. Both are documented in Figma’s help center linked above.

Back in Figma Design, the Community has plugins that generate a table from pasted spreadsheet data or a CSV. Open the Resources panel (Shift + I), switch to Plugins and search for “table”. They are the fastest way to lay out fifty rows of real data, but the output is usually plain frames, so you still apply the alignment and styling rules below. Check a plugin’s last update date and reviews before relying on it in a client file.

Keep columns aligned

Misaligned columns are the most common problem with Figma tables, and almost always come from building rows first. When each row is its own horizontal frame, one long value pushes the cells after it to the right in that row only. Building columns first (as in Method 1) fixes this because the width is set once on the column. If you inherited a row-based table, give every cell in a column the same fixed width, or rebuild it column-first. For tables wider than the screen, decide early whether the table will scroll horizontally or collapse into cards on mobile, and design both states.

Make Figma tables readable

• Right-align numbers and left-align text. Digits line up for comparison; words read naturally.
• Use dividers or light striping, not full borders. A 1 px bottom line per row is enough; boxes around every cell add noise.
• Keep header text distinct. Semibold weight and a subtle fill are enough; all-caps headers at 12 px are hard to read.
• Check contrast. Grey text on a striped background often fails the 4.5:1 ratio; test it with a contrast plugin before handoff.
• Set a consistent row height. Hug height with equal padding keeps rows even; avoid manually dragged heights.
• Use tabular figures if the font offers them (OpenType feature “tnum” in the text settings) so numbers in a column share the same width.

Common mistakes with Figma tables

• Groups instead of frames. Groups have no padding or auto layout, so cells drift. Always use Shift + A, never Ctrl/Cmd + G.
• Hug width on cells. Cells that hug their text produce ragged columns. Use fixed width on the column.
• Detached instances. Detaching a cell to tweak it breaks the link to the component; use a variant or an override instead.
• Manual dividers. Lines drawn between rows do not move when rows are added. Use the cell’s bottom stroke.
• One giant text block. Typing a whole table into one text layer with tabs looks fine until the font or width changes.

Want to go further? Our guides on Figma auto layout and the Figma and UI/UX category cover components, variables and design systems step by step. If you would rather hand the work to a designer, see our UI and UX design services.

Frequently Asked Questions

How do I create a table in Figma?

In Figma Design, build it with auto layout, because there is no table tool: type one cell, press Shift + A, duplicate the cell into a column, wrap the column with Shift + A, duplicate the column across, then wrap all the columns in a horizontal auto layout frame. If you only need data on a slide or a board, Figma Slides and FigJam have native tables, and Slides can import a CSV. See Figma’s help on tables in Slides and tables in FigJam.

Does Figma have a built-in table feature?

Figma Design does not. Tables there are built from auto layout frames or components, or generated by a Community plugin. Figma Slides and FigJam both include native tables, and Slides can import a CSV file directly as a table.

How do I create a table in Figma with auto layout?

Type one cell, press Shift + A to wrap it in auto layout with padding and a fixed width, duplicate it down into a column, wrap the column with Shift + A at gap 0, duplicate the column across, then wrap all columns in a horizontal auto layout frame. That outer frame is your table.

How do I keep table columns aligned in Figma?

Build the table column-first and set a fixed width on each column frame. Row-first tables drift because a long value only widens its own row. If you must use rows, give every cell in a column the same fixed width.

Can I import a spreadsheet or CSV into Figma?

In Figma Slides, yes: the table feature accepts a CSV import. In Figma Design, use a Community plugin that converts pasted spreadsheet data into frames, then apply your own cell styling.

What size should table cells be in Figma?

A common starting point is 14 px text with 12 px vertical and 16 px horizontal padding, which gives a row height of about 44 px. Dense data tables can drop to 8 px vertical padding; touch interfaces should stay at 44 px or more.

How do I make a Figma table responsive?

Set the outer table frame to fill its container and give the flexible column (usually the text-heavy one) a Fill width while the others stay fixed. For phone widths, design a second state where each row becomes a card, because most tables do not fit a 375 px screen.