Table Creator

Custom-styled tables with resize capabilities, if you want to make changes in the table design; or a responsive underlying structure set up after all. You can control how your tables look by changing the different components. Tables should be updated with every revision of your design. To select Columns And Rows, you may use plugin commands.

Image Video: see the plugin working in action

Creating a table

Run the command Create Table

Follow the onboarding prompts

Customise your table (as shown)

Click Create Table

After creating a template, you have full freedom to change the appearance of your tables by modifying this template.

The Table Creator Starter Kit shows how to generate those tables in more complex examples.

Number of columns and rows

Select number of columns and rows. Up to a maximum of 50. The **$** symbol will mean the number of columns or rows should be based on the template.

Table Creator UI Kit

Change HUG to any number you wish which defines the width and height for creating a table with special dimensions Set the value to HUG, and that should fix this if you decide you want it back again. If you want the width or height based on your template, use $.

Cell width

Insert any numerical width you would like the Cell to be. To make them grow with the table, change their value to FILL If you want the width based on template use $ symbol.

Using with libraries

You must be on the Pro plan (or higher) to Poll circuits.

Add template in library

Publish the template

Use the plugins in your files so you can use it everywhere but only refactors on save

Choose Import Template

Expand the Assets panel and drag a single instance of each template onto an available area on canvas.

Select a library

Click Import

This will freely designer a template and others can bring the templates with that file as well.

If you create or delete any templates since enabling the library built-in, you will need to re-run (or run) plugin in library / import new templates.

Editing text

Double-click the centre of a cell to edit its text while holding down cmd/ctrl

If you want a cell to contain other content make sure that there is another version of the same with no prop. From there the other content of yours will consist only in icons or form controls. To convert a table, select the cells you want to change and set it from the Property Panel in Figma when creating ( or converting) that variant type.

Selecting cells

If you hover your mouse over the edge/border of a cell, hold down cmd/ctrl

SHIFT + CMD select multiple cells (or use command below to select all in column/row)

Selecting columns and row

Select one or more cells

Run the Select Column or Select Row command

Plugin will highlight the entire column:

Take the liberty to resize or reorder as you please 🙂

Column and row resizing

Default Column Resizing is True. Once you have a table, you can resize cells in the first row to determine how wide each of your columns will be. By clicking on the table, you can enable and disable Column Sizing in Plugin of Property Panel with left side click Toggle Resizing.

Detached cells

On table creation, the cells are wired up to its parent by design. To prevent this, along with detached them when the table is created select You open plugin ui window (bottom right icon in sidebar) click 3 dots button and check Detached Cells.

Alternating Columns or Rows

We can also switch columns with rows or vice versa.

Select a table

In the Properties Panel under Plugin click Switch Axes.

Using with plugin parameters

Plugin parameters help you to create tables easily From the Quick Actions bar, search for “Create Table” and press tab.

Select the Template for Your Table

Select how many columns and rows the table will contain, e.g., a 4×10 (four column by ten row) table

Define the size of your table (e.g. 600xHUG)

After entering above command press Enter to create the table.

Duplicating tables

If you copy a table that was made by Column Resizing(default), it has the local component for first row. This implies the copy itself is tied in with any duplication that you to. One workaround would involve either reapplying the column sizing, or disconnecting the table and rows.

Please note:

This is a somewhat resource intensive process so it might take up to (a few) minutes.

Select a table

Next from the Properties Panel scroll down and under Plugin click Toggle Resizing or Detach Table.

Inserting a column

Creating a table and adding new column sounds easy but it can be tricky Fortunately the plugin has a command for that as well which makes it maybe even simpler. Select a table or specific cell, and then right-click to run Insert Column in the Quick Actions menu. Next, you will choose to insert your new column above or below the selected cell as well as how many columns are being inserted

Configuring a template

If you recreate any elements from the template, however, you will have to re-configure that part of the template.

Select a Template to configure:

Run the command Create Table

1- Open UI window and click the dropdown on its top

Local Templates should be highlighted

Place your mouse on the template you want to edit and press hover

Click the pencil icon

When configuring some part of the template:

Tap on a layer within your template in the canvas

You will now see the part list in your plugin window, hover over a part and click the + icon;

If you want to delete one part of the configuration just click on minus icon.

Those layers can not be set as part of any kind. The type of part cannot be in a Vector or Group.

Moving table components

If you simply want to move any of the plugin used components into another file, we advise following Figma guidance on moving Components.

We will add in future this more intelligent way of relinking existing tables with new or moved templates.

Limitations

This plugin doesn’t allow for managing your rows as a variants. I have not figure out a way to do this which is why there are so many steps but maybe something I can add in future update.

What is not supported: Merging cells. Sadly, it proved simply too hard to ensure that.

The most effective way to make columns that hug their contents is switch the axes- obviously, column –> row.

When a table is created without header row and using Column Resizing the text can be seen repeated in each cell of column

Known issues

Insert Column doesn’t work when the cells become detached

FIXED Tables with mixed values, e.g. different border widths are cannot be refreshed as fixed issue

Overrides: Toggle Resizing (all apart from text) /FIXED

Auto Layout properties are lost when applying Toggle Resizing causing the layout issues IMMOVABLE – Are those Fixed Auto…

Component properties are not correctly copied across when creating a template (FIXED)