Designing Responsive Tables with Auto Layout in Figma

Learn how to design fully responsive and interactive tables in Figma with Auto Layout and Interactive Components in this video where I walk you through the process across every step of the craft!

I will be publishing this component as an open source design in the Figma Community later this month. Until then, connect with me on Twitter to receive an update once it's ready! I will also be updating this description with the Figma Community link, and if I haven't, please ping me in the comments section below and I'll get right to it.

Was this video helpful? Do you have any questions about responsive design or table UI that you'd like me to cover in future videos? Any suggestions for improvement? Please let me know in the comments section below 💬

If you are new to my channel, welcome! Don't forget to hit subscribe if you'd like to keep up with my weekly dose of product design videos and tutorials to help you build great products and bring your ideas to life.

Don't be a stranger and connect with me here 👋

Chapters:
0:00 - Welcome
1:25 - Auto Layout review
5:28 - Column model
9:30 - Responsive table design
13:40 - Table as a component
15:35 - Interactive rows
22:00 - Conclusion

[Alberfinder]

This tutorial could be the best Figma table solution I have seen on the internet, thank you for this great content.

[Rydian]

Finally, a good tutorial about how to make tables using components and variants! Thank you mate

[philippefutureboy]

Hey Javier! That's a wonderfully useful tutorial, which I will apply right away! 💝
Here's a quick improvement to your model: Rather than making columns variants for each data type, make a component that is composed of variants for each data type; then make a single column type that takes that generic data type, and voilà! Now you can have tables that have dynamic data types. You'll need a bit of clicking to change all the rows of a column, but I find that better than having pre-modeled combinations of columns with fixed data types.

[mamishin]

I can not thank you enough! After watching 100 of Videos!! You really did help me!!!

[JohnMooney-eh]

Thanks Javier, great refresher for me - haven't done tables in a while - really great tutorial

[ozanarslan]

Thank you Mr. You are great ! I will watch every video you make, It’s very helpful 👍🏻

[marcusgrajam]

Wow... amazing how you explained everything!

[wjlarsen]

Using rows is better than columns in building a Figma table. I'm glad you showed both ways but after a lot of stress testing, building the columns inside the rows gives much more flexibility.

[enriquebraga]

Extremely helpful, learned so much in 20 mins. Thanks a lot

[akopovaann]

I am so happy that I have found this tutorial. Finally, everything is clear and explained in simple language! Thank you!

[yuliabilonoh]

Thank you very much for explaining! Now I understand better how to design tables

[nicolasmoreno]

looking forward to learning from the rest of your videos. Subscribed!

[emmanuelolubodun]

I'm in love with this video. God bless you. Let's take your channel to 100k 🚀

[jacorachan]

Hey, thanks for making these videos. They are helping a lot to learn all bits and pieces from Figma.

[sathyapriya]

Thank you Javier for crystal clear explanation

[ModestPlanet]

wow- thank you for making this! So far this has been my favorite explanation of auto-layout & figma tables!

[ykhi]

This tutorial is amazing. The only thing was that I had to look for your shortcuts but then I just learned the shortcuts by googling so it was only beneficial in the end:D (Like when you say just 'drag' you don't explain you have to press alt for it to work. @ 9:24 )

[chandnianand]

Awesome!! Very well explained concept of autolayout

[rosieliciious]

You make it seem SO EASY!!! First, I watched the video to clarify my ideas, and I try not to fully copy from your vid 'cause I'm supposed to understand it, but when I do it by myself, IT'S a NIGHTMARE!.
But I have to say that I'm impressed with how easy you make it seem! So, thank you for that.

[박경호-sf]

Thanks for letting me know how to use Autolayout Frame :)