Designing tables can be tricky. There are multiple ways to design responsive tables using Figma. I've found the below method to be effective and easy to design.

Kindly reach out on Twitter / Email for any improvements or a better way to design the same. 😀

Individual Components

• List down all the different types of individual data points in the table.
• Create individual components of all the identified data points.

I usually create individual header and content components depending on the requirements. I found this to be easier to scale.

Group them into relevant and meaningful categories and create variants accordingly.

• I have created two variants - Header and content.
• Make sure to give a unique property name to the variants.
• Ensure the height is consistent for all individual content components.
• Use the Fill container property for the width constraint. It will help with the responsive spacing of the table. Feel free to play around to suit your requirements.

Grouping Components

Once the individual components and variants are created, group them into a column component.

I prefer column-based layouts over rows as they are effective in responsive designs.

If proper variants/components are designed for the different data points of the table, a single column component will suffice.

Once the column component is created, duplicate the same, modify the data and use auto-layout to create a table.

You can create table variants with unique properties if you have a clearly defined scope. Table variants are modular and easy to scale but require significant additional work.

Some Helpful Resources

• Ultimate Table Design Guide by Molly Helmuth- Highly Recommended

• Responsive Table Design Tutorial from Mizko