Table Creator

Table Creator

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 Creator UI Kit

To create a table with a specific width and height change the value from HUG to any numeric value you want. To change it back just enter HUG as the value. Use the $ symbol if you want the width or height to be based on 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 a library
  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 4×10 (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 recreate any parts of the template you may need to re-configure the template.

Choose a templates 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.

Better support for relinking previously created tables with new templates or moved templates will be added in a future update.

Limitations

  • 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.
  • Merging cells is not supported. Unfortunately it’s too difficult to enable this reliably.
  • The only way to create columns that hug to their contents is to switch axes to columns
  • If you create a table without a header and use Column Resizing the text is replicated in each cell in column

Known issues

  • FIXED Insert column doesn’t work if cells are detached
  • FIXED Tables with mixed values such as different border widths can’t be refreshed
  • FIXED Overrides aren’t preserved when applying Toggle Resizing (apart from text)
  • FIXED Auto Layout properties are lost when applying Toggle Resizing causing the layout issues
  • FIXED Currently component properties aren’t copied across correctly when creating a template.

Show less

  • Author: Gavin McFarland
  • Categories: Templates
Share

Items you may also like

UI Design System
Dashboard

A UI Design System is a collection of reusable components, patterns, and guidelines that are used to create cohesive and consistent user interfaces. It provides...

Cryptocurrency Landing Page
Landing Page

In the competitive world of cryptocurrency, a well-designed landing page can be the difference between attracting potential investors and losing their interest. Whether you're launching...

Coke Design Concept
Mobile

The Coke Design UI Kit is a meticulously crafted collection of UI elements, including buttons, forms, icons, navigation bars, and much more. Developed with a...

Ultimate Icon Pack
Icons

The Ultimate Icon Pack: Elevate Your Designs with a Sea of Stylish Icons Icons are the unsung heroes of design. Those tiny visual elements can...

Dynamic components & Variants
Templates

Dynamic Components & Variants: Power Up Your Design System Introduction Designing user interfaces requires efficiency and consistency. But how do you achieve this when projects...

3D Icon Set
Icons

Level Up Your Marketplace & SEO with Stunning 3D Icon Sets In today's digital marketplace, grabbing attention and conveying information quickly is crucial. Here's where...

Real Estate SaaS Web and Mobile UI Kit
Landing Page

Building Your Real Estate Empire: The Power of Real Estate SaaS Web and Mobile UI Kits The real estate industry is undergoing a digital revolution....

NFT Marketplace Web UI Kit
Dashboard

Dive into the Metaverse: Building Your Dream NFT Marketplace with a Web UI Kit The NFT (Non-Fungible Token) market has exploded in popularity, creating a...

CRM Dashboard & Landing page UI Kit
Dashboard

Streamline Your Sales & Marketing: Boost Efficiency with a CRM Dashboard & Landing Page UI Kit In today's competitive business landscape, having a strong Customer...

LInkedin UI Design Kits
Mobile

LInkedin UI Design Kits Free are collections of pre-designed elements, such as buttons, icons, fonts, and color schemes, packaged together to facilitate the creation of...

Mobile Ecommerce UI Kit
Mobile

Redefining Home Decor Shopping: The Power of Mobile Ecommerce

Mobile

The Rise of Mobile eWallets: Transforming the Way We Pay Convenient and Secure Transactions: Gone are the days of carrying bulky wallets or worrying about...

Air Flight UI KIT
Mobile

How the Air Flight UI Kit revolutionizes the flight booking experience, making travel planning a breeze.

ZenSocial Dashboard
Dashboard

The key features and benefits of ZenSocial Dashboard, empowering you to optimize your social media strategy with ease.

Journal App
Apps

Discover the convenience and power of journaling with our innovative journal app. Organize your thoughts, memories, and goals effortlessly across all your devices. With robust...

In this blog post, we'll explore a free modal upload files kit that includes four distinct modes, each designed to cater to different user needs.

Profile UI Kits
Templates

Key Features of Tbean's Profile UI Kits: Customizability: Tbean's Profile UI Kits are designed with flexibility in mind. Developers and designers can easily tailor the...

Free No-code SaaS Website
Illustrations

In conclusion, the Free No-Code SaaS Website UI Kit for Framer and Figma is a game-changer for designers and entrepreneurs looking to create stunning websites...

Hands
Illustrations

The Hands Collection isn't just another set of illustrations—it's a meticulously crafted library of 3D models that capture the intricacies and nuances of human hands....