Skip to main content
A.J
A.J
New Participant
April 4, 2022

Tables for Figma

  • April 4, 2022
  • 23 replies
  • 2524 views

It’s the year 2023, and Figma still doesn’t have native table support.

I just spent 30 minutes re-jigging all the “cells” in a four-row, six-column fake table because I had to delete one column, add another, add icons, and then manually re-fit/resize all the cells to get things to align properly.

I can either fake a table row with a horizontal autolayout, or fake a table column with a vertical autolayout, but it’s still not a table.

I want the ability to create a special frame called a Table, that:

  • has an arbitrary number of columns and rows
  • auto-resizes columns evenly based on content width
  • has one or more Header / footer rows
  • can scroll with overflow content (optional)
  • has optional properties for hover / click states (cell, column or row)
  • has optional properties for alternate-line shading
  • can toggle columns or rows to hide as needed
  • can merge or split cells as needed
  • can set text alignment for a column (center, left, right, or currency / decimal)
  • can set to automatically use monospace / lining text figures for numbers
  • can contain triggers like checkboxes / batch select etc.
  • can be sortable based on column header (click twice to sort a-z/z-a, etc.)

If these features existed, I could speed up my work by at least 75%, because enterprise IT interfaces are full of tables and forms, and putting together text boxes with autolayouts to fake it is like tying post-its together with rubber bands and string. 🙂

    23 replies

    Show previous replies
    Tom_Auger1
    Tom_Auger1
    New Participant
    July 27, 2026

    Now with the Figma Agent, a semantic table tool is still sorely needed. How can the Agent understand that your group of shapes and layers is actually a table? If Figma had native table support, maybe it could help the Agent better semantically understand table structures, and thus become more helpful. Right now, it destroys tables because I think it just doesn’t understand what they ‘are’, if that makes sense.

    Brian, I agree that having a native understanding of tables should in theory make it a lot easier when translating designs to code - almost every coding framework that touches UI has that native understanding - for example, HTML understands this concept very well and has since the beginning!

    All that being said, I just tried a single prompt in Figma Design to build out a robust DataTable system, and it worked first try with a little bit of minor autolayout adjustment needed afterward (the AI didn’t set it to Hug, which it needed).

    Here is the prompt unedited. I’m sure your mileage will vary but feel free to “steal” and modify the prompt to suit your own purposes.

    Okay, now we are going to tackle a complex component that composes multiple levels of nested instances. This parent component will be a DataTable. It will compose one or more TableColumn components, which themselves compose a TableHeader and multiple TableCell components.

    As a default, the DataTable component will lay out multiple TableColumn components in a horizontal autolayout. TableColumn components will have multiple variants - each column variant will compose a TableHeading sub-component and 10 TableCell components all of the same variant - this means that for each variant of TableCell component created, we need a matching TableColumn component (this makes sense because generally in a data table, all cells in the same column typically have the same data type.

    TableHeader component has a property for HeaderText, a boolean property for show/hide Sort icon, a nested instance property for the Sort icon (select the Ascending/Descending variant).

    TableCell component has multiple variants, which would dictate the properties associated with the component as different cell variants have different data display needs.

    TableCell variants will include: Text (readonly), Currency, Date, Time, DateTime, Checkbox, Actions (which compose a TableAction component featuring a number of action icons such as Delete, Edit, Process, Checkmark), TextInput.

    Design the DataTable component and all child components using the currently style of the Web3.0 components. As always, use existing Theme color and weight variables. If you need a new color or style, stop and ask me for guidance.

    Tom_Auger1
    Tom_Auger1
    New Participant
    July 27, 2026

    All that being said, this only solves the visual creation of a table-like structure, but a native Table construct and a RepeatGrid are still sorely needed as of mid-2026.

    Ricardo_Pitanga
    Ricardo_Pitanga
    New Member
    September 25, 2026

    2026 and still no table feature in sight… no wonder Canva is growing fast (I know its not the same target audience, but still). AI is not the answer. This is a basic layout structure.

    Terms & ConditionsAccessibility statement