Copy icon

🔥 Copyicon Blog

Discover product updates, tutorial, design knowledge...

The fastest way to create SVG table in Figma, XD

26/05/2023 · Tutorial
When designing a data table in XD or Figma, if you want to create a table with realistic sample data, it can take quite a lot of time. However, with the SVG Table tool, you can create this data table quickly and easily.

SVG table

First, you open Adobe XD or Figma and determine the width of the table you want to create.

determine the size of the table

Continue, you need to access: https://copyicon.com/generator/svg-table and fill width of table

Config SVG table

You can configure the data for each column in the table by clicking on the gear icon on each column. If you want to set the width of a column, you can enter a specific value for the column width. If the column width is set to 0, it will automatically be evenly distributed based on the width of the table.

In this configuration screen you can also change, edit sample data types, delete columns...

After setting up the configuration information of the table, you copy and paste it into XD or Figma, so you have completed creating an SVG table extremely easily and quickly.

Inside XD or Figma, you can fully edit all the components of the table that you just pasted. Isn't that amazing? If you find it useful, feel free to share it with your friends.

Tags: svg table
`