Table Creator

About this plugin

Create custom-styled tables which can be easily resized, edited and automatically adjust to content. Control the design of your tables by modifying the components. Update all tables, anytime your design changes. Use the plugin commands to make selecting columns and rows easier.

Watch the video to see the plugin in action.

Creating a table

1. Run the command Create Table
2. Follow the onboarding prompts
3. Customise your table (see options below)
4. Click Create Table

Once you've created a template, you can customise the look of your tables by changing the template.

See the Table Creator Starter Kit for examples of creating more complex tables.

Number of columns and rows

Choose how many columns and rows you want. Up to a maximum of 50. Use the $ symbol if you want the number of columns or rows to be based on the template.

Table width and height

Tables are created by default with a specific width. Once created you can resize the table to the width you desire. To change it so the width or height is determined by the number of columns or rows, just enter HUG as the value. Use the $ symbol if you want the width or height to be based on height or width of the template.

Cell width

Enter any numeric value you want for the cell width. Change the value to FILL if you want them to resize with the table, rather than be a fixed width. Use the $ symbol if you want the width be based on the template.

Using with libraries

Only works if you are on the Professional plan or above.

1. Create a template in your library
2. Publish the template
3. Run the plugin in the file you wish to use the library with
4. Choose Import Template
5. Open the Assets panel and drag an instance of each template onto the canvas
6. Select the library from the list of recent files
7. Click Import

Once a template has been imported, other people will be able to use the templates with that file as well.

If you create or delete any templates since adding the library, you must run the plugin again in the library or import the new templates.

Editing text

1. While holding down cmd/ctrl double-click the centre of a cell to edit its text.

To include other content in a cell, create another variant of the cell in your template. Then you can include other content like icons or form controls. When you create a table, select the cells you want to change and choose the new variant type from the Property Panel in Figma.

Selecting cells

1. Hold down cmd/ctrl while hovering over the edge/border of cell
2. Hold down shift + cmd/ctrl to select multiple cells (use command below to select all cells in a column or row)

Selecting columns and row

1. Select one or more cells
2. Run the command Select Column or Select Row
3. Plugin will select all cells in the current column/row
4. Resize or reorder to your heart's content :)

Column and row resizing

By default Column Resizing is enabled. After you have created a table, resize the cells in the first row to control the size of the columns. You can toggle Column Sizing on and off by selecting the table and clicking Toggle Resizing in the Properties Panel, under Plugin.

Detached cells

By default when a table is created the cells remain connected to their main component. To disable this and detached them when the table is created, open the plugin UI window click icon with the three dots and enable Detached Cells.

Switching between columns or rows

Change a table from columns or rows or vice versa

1. Select a table
2. Then from the Properties Panel under Plugin click Switch Axes.

Using with plugin parameters

You can create tables easily using plugin parameters. Using the Quick Actions bar search for "Create Table" and then press tab.

1. Choose the template you want your table to be created from
2. Choose how many columns and rows you want your table to have, eg 4x10 (4 columns and 10 rows)
3. Choose what size you want your table to be, eg 600xHUG
4. Press enter to create the table

Duplicating tables

When you duplicate a table that was created using Column Resizing (default), it contains a local component for the first row. That means when it's duplicated, the copy is intrinsically linked. To get around this you can either reapply column sizing or detach the table and it's rows.

Warning: This is quite an intensive process so it can take up to a couple of minutes.

1. Select a table
2. Then from the Properties Panel under Plugin click Toggle Resizing or Detach Table.

Inserting a column

Adding a new column after creating a table can be a little tricky. The plugin has a command which makes this easier. Just select a table or a specific cell and run Insert Column from the Quick Actions menu. Then select whether you want the new column to appear before or after the selected cell and how many columns you want to be inserted.

Configuring a template

If you remove or change any parts of the template you may need to re-configure the template.

Choose a template to configure:

1. Run the command Create Table
2. Select the dropdown at the top of the UI window
3. Make sure Local Templates is selected
4. Hover over the template you wish to configure
5. Click the pencil icon

To configure parts of the template:

1. Select a layer inside the template on the canvas
2. Now in the plugin window, hover over a part in the list and click the plus icon
3. If you want to remove a part from the configuration, just click the minus icon

Some layers can't be configured as certain parts. When configuring a part, make sure the part is not a group, or vector.

Moving table components

If you want to move any of the components used by the plugin to another file you can do this by following the guidance from Figma on moving components.

Relinking tables to templates

Sometimes, a table may lose its connection to a template, preventing it from refreshing properly. This occurs when the table's stored metadata becomes outdated or corrupt. To fix this, select the affected tables and click the link icon next to the template in the template dropdown.

Relinking will not swap any instances that exist in the table if they have changes and that will need to be done manually.

Limitations

1. This plugin won't let you manage your rows as variants. This is tricky to do, it may be something I can add in a future update.
2. Merging cells is not supported. Unfortunately, it's too difficult to enable this reliably.
3. The only way to create columns that hug to their contents is to switch axes to columns
4. If you create a table without a header and use Column Resizing the text is replicated in each cell in the column
5. Support for hover states on rows is unfortunately not possible because rows are not built using components (that's how the plugin allows you to resize columns). There are workarounds but they don't suit every use case.