Building a Manageable Table Workflow in Figma

Tables are among the most common yet tedious elements in UI design. A typical table combines text, lines, rectangles, and icons, and it becomes unwieldy when you need responsive behavior, reorderable columns, or realistic data. The approach below reduces the initial setup to two core components and builds from there.

Start With Just Two Components

Using the Ant Design System table components as a reference, the foundation is minimal:

  • A head cell component.
  • A row cell component.

Set the text alignment with Left or Center in the Constraints panel.

To scaffold the table, duplicate the cells using Alt/Option + Shift + left mouse click to copy, then press Ctrl/Cmd + D to repeat the action. After arranging the cells, select them and create a component with Alt/Option + Ctrl/Cmd + K.

Zero spacing between cells yields a clean grid. If you need vertical separators, use a 1 px gap instead. Name every component at each level from the start; this organization pays off when the system grows.

Adding Structure and Styling

Table lines and borders are handled by wrapping the row cells in a frame, not by drawing individual strokes. The frame provides the fill and stroke color, while Auto layout aligns the rows.

For a table with 1 px blue horizontal lines between rows, a green outer stroke, and a 15 px corner radius:

  1. Group the row elements into a single frame.
  2. Set the corner radius to 15 px.
  3. Apply a 1 px stroke with color #49E36B.
  4. Set the frame fill to #278EEE.

The frame fill colors the lines between rows and the outer border. Enable “crop frame content” to keep the stroke within the rounded corners.

Adding or removing rows is straightforward: copy or delete line elements directly.

Filling Real Data and Adjusting Columns

To replace placeholder text with realistic content, hold Ctrl/Cmd to select the text layers inside the frame. The Content Reel plugin is a convenient source for sample data.

Column order and width adjustments come from Auto layout: hold Shift and double-click to select a column, then resize it.

Making the Table Responsive

To support different screen widths, the table requires a mix of fixed and flexible columns. The goal for a typical configuration:

  • Head cell (140): fixed at 140 px.
  • Row cell (140): fixed at 140 px.
  • Other head cells: responsive.
  • Other row cells: responsive.

Enable Auto layout on the horizontal frame and set the row size mechanism to Fixed. For the fixed columns, apply Fixed sizing horizontally. For the flexible columns, use Fill horizontally.

Convert the entire table into a Frame. Within that frame, every row's horizontal Constraints must be Left and right. Once these constraints are in place, the table stretches and compresses with the viewport.

A Basic Reusable Table Kit

Production tables need more than a single state. A minimal kit is built around two primary components linked as variants. The kit should include:

  • Table-specific icons.
  • Header state variations.
  • Cell state variations.

Icons

Icon libraries often contain hundreds of options, which invites inconsistency on multi-designer teams. Isolating the icons used in tables into their own library keeps the designs aligned.

Common Cell Combinations

Most tables reduce to a few cell patterns:

  • Text only.
  • Icon or icon set only.
  • Mixes of text, icons, and controls like checkboxes or toggles.

Avoid hiding layers within components. They become invisible dependencies that get forgotten and confuse future users of the design system. Build the states explicitly so their anatomy is clear.

Structure and Flexibility

The more complex states are assembled with Auto layout so spacing and alignment remain consistent. Once those states exist, replace the simple cells of the original frame with the richer variants.

Component properties, a feature introduced at Figma Config 2022, can make these kits more compact and manageable. The Figma team’s tutorial on component properties covers the instructions.

The arrangement described is one approach among many. Larger projects often require deeper kits whose structure is tailored to the specific product.

A ready-made Figma Design file is available for deconstruction and following along with the steps described here.

Choosing a Strategy That Scales

There is no single right way to build tables in Figma; the best approach depends on the product you are designing. That said, a few practices tend to make tables easier to maintain as your project grows.

Keeping line components on the design system side means you can update every table in a project from one place. The trade-off is that every adjustment requires publishing changes at the design-system level. If you work across multiple documents, disconnect a file from the design system when you do not want those automatic updates flowing in.

Resizable components may look appealing initially, but they become unwieldy when you need distinct styles at different sizes. If your tables vary in line height, create individual components for each size rather than forcing one component to stretch. Similarly, while minimizing the total number of components is an option, you will usually interact with those components through their variants, not by looking at the components themselves. It is better to have enough separate components with clear variants than to bury layers, Auto Layout settings, and nested components that are hard to manage later.

From a practical standpoint, every table cell should support at least two lines of text; setting line spacing to 16 px is a reliable way to make room for that. Define a minimum width for parent components, meaning each column gets a default minimum size. Confirm those defaults with front-end developers early, because they may have constraints of their own, and you want the design to be implementable without surprises.

Two supporting pieces make table styling more consistent. Create a dedicated color palette for tables in your design system. Shared palette colors work up to a point, but changing text, background, or accent colors for tables alone becomes painful without a specific set. Also define separate text styles for tables. Tables often need more compact line spacing than news feeds or articles, and separate text settings prevent those styles from conflicting later.

Community Approaches and Further Reading

Tables are an active topic in the Figma community, with several useful resources and creative solutions. Some approaches worth exploring:

  • Creating tables with components and Atomic Design: A guide from Sasha Belichenko on building tables component-first and integrating them into a design system. (Smashing Magazine)
  • Populating designs with real data: Bryan Elkus covers the Google Sheets Sync plugin, which pulls content directly from Google Sheets into Figma for more realistic prototypes. (Atomic Object)
  • Fully fluid tables: Gavin McFarland’s tutorial demonstrates — with an inspectable community file — how to modify tables that stay flexible using Auto Layout. (Figma Community)

Several designers have shared their own workflows on Twitter, offering practical alternatives. One technique uses component props to build what one designer calls "infinite tables," toggling rows and columns on as needed. This prevents maintaining large variant sets for every table permutation, though it is a workable approach mainly when your product has only a few tables — scaling the system becomes a problem otherwise.

Other conversations highlight the tension between wanting more native table features in Figma versus building workarounds using existing tools. A short Twitter thread from Vincent van der Meulen, for example, mentions the Configurator plugin developed at Uber to streamline table workflows for their designers.

"I found a pretty reliable way to create flexible, responsive custom tables in Figma. I'll do a video walkthrough at some point, but if you want to play…" — Buzz Usborne

As the interest from the community suggests, tables remain a complex component to design well. These recommendations should give you a starting point; once you try them, you will likely develop your own refinements for your particular workflow.