How to Make a Table in Figma: A Complete Guide

Tables look simple until you try building one in Figma. Then you’re stuck deciding: rows or columns first? Components or plain frames?

Learning how to make a table in Figma the right way saves hours of frustration when clients inevitably request changes.

The trick is using auto layout and component variants together. This combination creates tables that resize properly, update globally, and don’t fall apart when you add new data rows.

This guide walks you through building a responsive table component from scratch in 7 steps.

You’ll create reusable cell variants, structure columns with nested auto layout, and set up proper constraints for different viewport sizes.

Takes about 15 minutes. Works for dashboards, pricing pages, admin panels, or any design that needs organized data.

How to Make a Table in Figma

Making a table in Figma is the process of building structured data components using frames, auto layout, and component variants.

You need this when designing dashboards, admin panels, pricing pages, or any user interface that displays organized information.

This guide covers 7 steps requiring 10-15 minutes and basic Figma knowledge.

Prerequisites

Before you start building your table component, gather these requirements:

• Figma account (desktop app or browser, version 116.0 or later)
• Basic understanding of the layers panel and properties panel
• Familiarity with how to make a frame in Figma
• Time estimate: 10-15 minutes
• Skill level: Beginner to intermediate

You should also know how to use auto layout in Figma since tables rely heavily on this feature.

Step One: How Do You Create the Base Cell Frame?

Select the Frame Tool (F), draw a rectangle 200px wide by 40px tall on the canvas, then set the fill color to white to create the foundation for all table cells.

Action

Press F on your keyboard to activate the Frame Tool.

Click and drag on the canvas to create a frame with these dimensions:

• Width: 200px
• Height: 40px

In the properties panel on the right, set the fill color to #FFFFFF.

Add a 1px stroke with color #E5E5E5 for cell borders.

Purpose

This base cell frame becomes the building block for your entire table structure.

Every header cell, data cell, and text cell will inherit from this foundation.

Consistent dimensions create proper alignment when you stack rows and columns later.

Step Two: How Do You Apply Auto Layout to the Cell?

Select your cell frame, press Shift+A to add auto layout, set padding to 12px horizontal and 8px vertical, then configure alignment to left-center for proper text positioning.

Action

Click on your cell frame to select it.

Press Shift+A to wrap it in auto layout.

Configure these settings in the properties panel:

• Horizontal padding: 12px
• Vertical padding: 8px
• Alignment: Left, Center
• Gap between items: 8px

The cell now adapts to content while maintaining consistent spacing.

Purpose

Auto layout makes your cells responsive and flexible.

When you add text or icons, the cell expands or contracts automatically.

This is how professional design systems handle table design in Figma.

Step Three: How Do You Convert the Cell Into a Component?

Right-click your auto layout cell frame, select “Create component” from the menu, or press Ctrl+Alt+K (Cmd+Option+K on Mac) to make the cell reusable across your entire design file.

Action

Select your cell with auto layout applied.

Use one of these methods to create a component:

• Right-click > Create component
• Press Ctrl+Alt+K (Windows) or Cmd+Option+K (Mac)
• Click the component icon in the toolbar

Rename the component to “Table Cell” in the layers panel.

The component border turns purple, indicating it’s now a main component.

Purpose

Components let you update all instances at once from one source.

Change the main component’s padding, and every table cell updates automatically.

This approach follows user experience best practices for maintainable design systems.

Learn more about how to use components in Figma if you’re new to this concept.

Step Four: How Do You Create Cell Variants for Headers and Data?

Select your Table Cell component, click the + icon in the properties panel to add a variant, then style the header variant with a gray background (#F9FAFB) and bold text to distinguish it from data cells.

Action

Click your Table Cell main component.

In the properties panel, click the + next to “Variants” to create a component set.

Configure these variants:

• Header cell: Fill #F9FAFB, text weight Bold, text color #111827
• Data cell: Fill #FFFFFF, text weight Regular, text color #374151
• Hover state: Fill #F3F4F6 for interactive feedback

Rename the variant property to “Type” with values “Header” and “Data.”

Purpose

Variants let you swap between cell types without breaking the table structure.

One component set handles all your table cell needs.

Step Five: How Do You Build a Column Using Cell Components?

Drag instances of your header and data cell variants onto the canvas, select all cells vertically, press Shift+A to apply auto layout with vertical direction, then set spacing to 0px for seamless borders.

Action

From the assets panel, drag one Header cell instance to the canvas.

Drag 4-5 Data cell instances below it.

Select all cells, then press Shift+A to wrap them in vertical auto layout.

Set these properties:

• Direction: Vertical
• Gap: 0px
• Alignment: Left

Name this frame “Column” in the layers panel.

Purpose

Columns become the structural units you’ll combine into a complete table.

Zero gap ensures borders don’t double up between cells.

Step Six: How Do You Combine Columns Into a Complete Table?

Duplicate your column 3-5 times, select all columns, apply horizontal auto layout with Shift+A, set gap to 0px, then wrap everything in a parent frame to create the final table component.

Action

Select your Column frame and press Ctrl+D (Cmd+D on Mac) to duplicate it 4 times.

Select all 5 columns and press Shift+A for horizontal auto layout.

Configure the settings:

• Direction: Horizontal
• Gap: 0px
• Alignment: Top

Convert this grouped structure into a component named “Table.”

Your data table now functions as a single reusable element.

Purpose

The nested auto layout structure (cells inside columns inside table) creates a fully responsive table that adapts to content changes.

Step Seven: How Do You Make the Table Responsive?

Select individual columns, set their width to “Fill container” in the properties panel, adjust constraints to “Scale” horizontally, then test by resizing the parent table frame to verify cells expand proportionally.

Action

Click on individual columns within your table.

In the properties panel, change width from “Fixed” to “Fill container.”

For cells that should stay fixed width (like checkbox columns), keep them at “Hug contents.”

Test responsiveness:

• Drag the table frame edges to resize
• Columns should expand proportionally
• Text should remain aligned

Purpose

Fill container settings let your table adapt to different viewport sizes.

Critical for responsive design workflows.

Verification

Test your table to confirm everything works correctly.

Double-click any cell instance and change the text content. The cell should resize while maintaining padding.

Switch a cell’s variant from Data to Header using the properties panel. Styling should update instantly.

Resize the entire table frame horizontally. Columns with “Fill container” should expand; fixed columns stay put.

Check that all borders align without gaps or overlaps.

Troubleshooting

Issue: Cells Not Aligning Properly

Solution: Select the parent column frame, verify auto layout direction is set to Vertical, and confirm gap is 0px. Check that all cell instances have identical heights.

Issue: Table Not Resizing as Expected

Solution: Select columns that should stretch, change width to “Fill container” instead of “Fixed.” Ensure at least one column uses Fill; otherwise the table can’t expand.

Issue: Component Variants Not Switching

Solution: Verify you created a proper component set (purple dashed border), not separate components. The variant property must exist in the properties panel with defined values.

Issue: Double Borders Between Cells

Solution: Apply stroke to only one side of each cell (bottom for rows, right for columns), or set gap to -1px to overlap borders. Most designers use single-side strokes.

Alternative Method: Table Creator Plugin

The Table Creator plugin generates tables automatically if you need speed over customization.

Access it through Resources > Plugins > search “Table Creator” > Run.

When to Use Each Method

• Manual method (this guide): 10-15 minutes, full control over styling, reusable component system, ideal for design systems
• Plugin method: 1-2 minutes, pre-built structure, limited customization, good for quick mockups

Choose manual when building a component library. Choose the plugin for one-off presentations.

Related Processes

After mastering tables, explore these connected Figma skills:

• How to create variants in Figma for advanced component states
• How to make components in Figma for deeper component knowledge
• How to create a design system in Figma to organize your table components
• How to prototype in Figma for interactive table sorting and filtering

Tables often appear in dashboards, so knowing how to make a grid in Figma helps with overall layout structure.

For exporting your designs to developers, learn about accessible tables to ensure your table meets web accessibility standards.

FAQ on How To Make A Table In Figma

What is the easiest way to create a table in Figma?

Use the Table Creator plugin for speed. Access it through Resources > Plugins, search “Table Creator,” then specify rows and columns. For more control over styling and reusability, build tables manually using auto layout and components.

Can you make responsive tables in Figma?

Yes. Set column widths to “Fill container” instead of fixed values. Use nested auto layout for rows and columns. The table then expands or contracts when you resize the parent frame, matching different screen sizes.

How do I add rows to an existing Figma table?

Select a row instance inside your table, press Ctrl+D (Cmd+D on Mac) to duplicate it. Auto layout automatically repositions all elements. You can also drag new cell instances from the assets panel into the column frame.

Should I build tables by rows or columns in Figma?

Build by columns. This approach lets you resize column widths independently and swap column order easily. Rows become difficult to manage when you need different cell variants or column-specific styling across the table.

How do I style header cells differently from data cells?

Create component variants for your table cell. Add a “Type” property with “Header” and “Data” values. Style headers with bold text and gray backgrounds. Switch between variants using the properties panel on any instance.

Why won’t my Figma table cells align properly?

Check that all cells have identical fixed heights. Verify auto layout direction matches your structure (vertical for columns, horizontal for rows). Set gap to 0px between cells. Misaligned cells usually mean inconsistent component dimensions.

Can I import data from spreadsheets into Figma tables?

Not directly in Figma Design. FigJam supports pasting from Google Sheets and CSV files. For design files, use plugins like “Google Sheets Sync” or manually copy text into cell instances one column at a time.

How do I create hover states for table rows?

Add a “State” variant property to your cell component with “Default” and “Hover” values. Apply a subtle background color change (#F3F4F6 works well) to hover variants. Use how to make Figma interactive for prototype connections.

What’s the best way to handle table borders in Figma?

Apply strokes to one side only per cell (bottom or right). This prevents double borders where cells meet. Set stroke width to 1px with a light gray color (#E5E5E5). Alternatively, use gap of -1px to overlap borders.

How do I export Figma tables for developers?

Use Dev Mode to show CSS specifications including layout and spacing values. Developers can inspect auto layout settings directly. Export static versions as PNG or SVG for documentation purposes.

Conclusion

You now know how to make a table in Figma using the component-based approach that professional designers rely on.

The combination of frames, auto layout, and variants gives you a table structure that actually scales.

No more rebuilding from scratch when stakeholders request an extra column.

Your reusable table components will update globally across every instance in your design file. Change the cell padding once, and every table reflects it instantly.

Start with simple data tables. Then expand to more complex patterns like sortable headers, selection states, and pagination controls.

The layer hierarchy you built here supports all of it.

Tables show up everywhere in UI design. Dashboards, settings panels, checkout flows, analytics screens. Master this pattern and you’ve solved a problem you’ll face on nearly every project.

Open Figma and build your first table component today.