Designing Responsive Tables with Auto Layout in Figma

[@Alberfinder]

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

[@Rydian7]

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

[@JaviAlaves]

Happy to hear it was helpful!

[@philippefutureboy7348]

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.

[@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.

[@mamishin3199]

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

[@JohnMooney-e5h]

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

[@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.

[@emmanuelolubodun1]

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

[@marcusgrajam]

Wow... amazing how you explained everything!

[@ozanarslan5175]

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

[@akopovaann]

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

[@박경호-s4f]

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

[@yuliabilonoh2402]

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

[@enriquebraga2464]

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

[@nicolasmoreno8209]

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

[@sathyapriya4972]

Thank you Javier for crystal clear explanation

[@chandnianand584]

Awesome!! Very well explained concept of autolayout

[@ModestPlanet]

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

[@JaviAlaves]

Thank you, I’m stoked to hear that :)

[@gabrielmicko4771]

Nice work mate!

[@jacorachan]

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

[@JaviAlaves]

My pleasure, happy to hear they're helpful!

[@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 )

[@JaviAlaves]

Thanks for the feedback Erik! You’re right, I’ll be extra thorough next time :)

[@flimbo123]

You just saved me couple of minutes ! :D thanks

[@idrisayinde1612]

Hello Javier! Thank you for this video. It been helpful in helping me understand Interactive Component, Variant and Responsive Design.

[@JaviAlaves]

My pleasure, thank you for watching!

[@klarisse410]

Hello! I'm new to Figma, and just to help out fellow new users, if you try the scaling like what he's doing @7:14 and it's not working, make sure to set the "constraints" of the text boxes to "scale". I've been trying to figure this out since last night. :c But nice video nonetheless!

[@JaviAlaves]

Hi Klarisse, thank you for noting this! That's correct, in order for the resizing to work as intended, the inner layers should also be set to the right resizing too. I'm sorry to hear that this was unclear and complicated your learning journey. If anything like this ever comes up, please feel free to always drop a comment and I'll reply as soon as possible.

[@klarisse410]

@@JaviAlaves No problem at all. This video is such a great help!!! Looking forward to watching and learning more from your other vids :D

[@Mark-vm4bb]

OMG! Was wondering what I did wrong, thank you 🙏

[@callmemarkus]

Same with divider - set to left and right

[@carolinamcgarity2135]

This is so helpful, thank you!!

[@MrJmhess77]

Solid tutorial - Cheers

[@larrycold]

Great tutorial, thanks. I'm glad someone could take me through rows.

[@JaviAlaves]

My pleasure, I’m glad to hear it was helpful!

[@AlphaWitcher]

Thanks for video. I had self learnt this table design after playing around with tailwind design system. Responsive part was new for me. I like how you included interactive table rows but it had its disadvantages too in terms of removing table columns. Very indepth video.

[@JaviAlaves]

Thanks for watching, and happy to hear you found it useful!

[@hajarakbar6869]

i really apreciate your help with dowloanding this software

[@katherinePH4728]

excellent tutorial, everything is clearly explained.

[@agencevacarme]

Super demo! Very nice Javier!

[@JaviAlaves]

My pleasure :) Happy to hear you enjoyed it!

[@OddWikingRahlffVisma]

Thanks, Javier. Very useful and well explained!

[@HugoFrossard]

Very well explained thanks a lot

[@zhannavoskanyan8589]

Thank you for great tutorial. Really helped me a lot!!

[@chandnianand584]

very well explained autolayout!!

[@ludwigvillalba1886]

Thanks for sharing. A video specifically on when to use groups, frames and/or auto-layout would be interesting.

[@JaviAlaves]

I'd love to do a video on groups vs. frames. Thanks for the suggestion!

[@JaviAlaves]

Here it is! - kzbin.info/www/bejne/hoS2qIubfsiWptk

[@panidacharusathit8619]

Quality in-depth and practical video. Big thanks to you. Subscribed :)

[@JaviAlaves]

My pleasure, and thank you for subscribing :) I’m happy to hear it was helpful!

[@hurricanehordak]

Perfectly explained, thanks!

[@venrick.a]

new subscriber here! great content Javier! thank you for this!

[@JaviAlaves]

Thanks for subscribing, I’m happy to hear it was helpful!

[@paulamourad4699]

Thank you!!!! This was very helpful!!!

[@JaviAlaves]

Happy to hear it was helpful!

[@shivamsrivastava3515]

@Javier Thank you for the tutorial. Could you please share a link to the file you are using here? Thanks!

[@julialubitsch6716]

Thank you for the tutorial! You made my life much easier :))

[@JaviAlaves]

I'm really glad to hear it was helpful!

[@Bixler415]

Great job Javier!!! Is there a Figma file for this tutorial? Thank you!

[@mithilinamdar2783]

If tNice tutorials isnt the most true tNice tutorialng ive ever read

[@annas9544]

That was wonderful, thank you!

[@JaviAlaves]

You're very welcome!

[@SahitiSeemakurti]

really good tutorial, thanks!

[@JaviAlaves]

You're welcome!

[@talafim]

Great video! Thanks 👏

[@joenguyenle7018]

wow love the video. But is there a tutorial showing how to create the table cell like User in this video? I think the structure of how to group/auto layout those layers is important and I am still having issues w/ it. Appreciate any pointer. Thanks!

[@ab86goel]

Hi Javier, can you please share the published version URL, as I am unable to see this in FIGMA community.

[@olalolalola]

also - 11:40 - how d you add a column

[@jonadogg]

What a great tutorial! Thanks so much for sharing. I am new to trying to build tables in Figma but this will help a lot! One thing I'm wondering after looking at your file as well, when you build your header row, you will need to know beforehand all the cells that need to be there, right? You can't add more cells on the fly in the designs or what? But I guess I will find out as I need to build a lot of different tables and try this out. Thanks again :)

[@JaviAlaves]

I really appreciate your comment, and I’m glad it was helpful! You’re right on that note, this approach is ideally better suited for tables where you know the columns in advance. You can definitely add more columns on the go, but it’ll take some work at the expense of the other benefits. Have a good time designing all those tables, it’s fun!

[@bekabuchashvili]

you saved my life

[@MahmoudMahmoudTobi]

Thanks for the tutorials they are really helpful. I might suggest checking your mic sound levels. It makes a weird sound sometimes 0:02

[@olalolalola]

12:41 - when I change the width of the column picture changes its size. how do you fix that

[@LivviaL]

Thank you Javier for your in-depth tutorial, it's given me a hope I'll finally master complex tables creation. I'm just starting with Figma, so I study your video carefully and practice at the same time. Unfortunately I have a trouble to achieve the same responsiveness with the Users column. Can you please show elements included in an Auto-Layout of "User" and their settings (6:29)?

[@JaviAlaves]

Hey there, happy to help! Could you please provide with more details regarding what you're having trouble with?

[@joenguyenle7018]

@@JaviAlaves I am having the same problem. How did you construct and create the Users column to make it responsive?

[@CXNLunix]

watch more and learn more your are great thanks.

[@fan1over]

Hi, I wonder what is the length of the Divier?

[@omkarnilapwar5353]

Javier Alaves How you have duplicated cards inside the auto layout? at 6:55mins

[@rickgutierrez8244]

Hello Javier. Great stuff! really helpful. Not talking about this specific tutorial (I am just getting started). More a general observation from all the tutorials of yours I have worked through so far. They have been great but I feel would be even better if the lower left of the screen wasn't always covered by the inset video screen of you talking. Not trying to be rude, so I hope I don't sound like that but I have found that many times I want to check understanding by verifying what I see in the layers panel is the same as what you are building and often those things are covered up by the inset video of you talking. My experience would be greatly improved if I could always see the layers you are working on in that layers panel view. I don't know if others feel the same or not, but I do appreciate you providing these tutorials. They helped me get up to speed as I have not used Figma that much and not at all in about 2 years. I have to convert from Sketch, Abstract and Miro to Figma and FigJam for work so I appreciate what you've done to help us all learn some very in-depth concepts step-by-step. Thank you!

[@JaviAlaves]

Hey Rick, really appreciate your thoughtful comment! I’m totally onboard with what you’re saying here, so I try to keep my overlay small and make sure that any layers I’m working with are always visible. I’ll continue to keep a close eye on these things moving forward!

[@robbiecapp7719]

Beautiful tutorial. Can you show you you get to that first cell you show at t=6:22s? I see there is an horizontal autolayout containing 2 lines of text and an image. What's inside that autolayout? How do you build it? I am unable to replicate. Thanks.

[@JaviAlaves]

Hey Robbie, if you head over to the Experimental page in this file, you'll be able to inspect the properties of that cell in detail. Let me know if it helps! www.figma.com/community/file/971408767069651759/Chakra-UI-Figma-Kit

[@marcosporto8092]

Ur tutorial is perfect, the best at the moment. Do u have publishing this component as an open source design in the Figma?

[@JaviAlaves]

Yes! You can find it within the experimental components page in this Chakra UI Figma Kit in my profile: www.figma.com/community/file/971408767069651759

[@marcosporto8092]

@@JaviAlaves You are amazing. Thank you very much!

[@JaviAlaves]

@@marcosporto8092 Happy to help! 🙏🏼

[@LaneGoodman]

This was fantastic, thanks!

[@robertbethanis1397]

I used your table method, but turned off the fill on the cells, then dropped another component under them called "row highlighter". Then grouped them. This way, all the cell interactions as you described them work and remain, but the highlighter still works on hover, even though it's a layer under the table. Basically just two components stacked.

[@talielnussen3867]

Make a tutorial please 🙏 😅😅😅. And show us

[@hakankaplan4077]

The issue I had was that I knew how auto-layout works, but I kept trying to make rows with all the content. That would be almost impossible to allign the content of 1 row to a title on the top. Working in columns make more sense... Thank you!

[@eth_fish]

Hey Javier, just found your channel and love the way you communicate. Could you share the file you are working on in this video? I would love to look at how you structure things!

[@JaviAlaves]

Thank you Ethan, I appreciate your comment! You can find this as a part of the Chakra UI Kit that I recently published here, it's under Experimental: www.figma.com/community/file/971408767069651759/Chakra-Figma-UI-Kit

[@leedelgadodesign]

Would love to see how you set up the borders on the cell. Will you be posting this in the Figma community?

[@JaviAlaves]

Yes! You can find this as part of the Chakra UI Kit, in the experimental components section, which is in my Figma Community profile at www.figma.com/@javi

[@MortyAkard]

Thank you Great This video helped me a lot

[@JaviAlaves]

Happy to hear it was helpful!

[@karanchawla9888]

Hi Javier, thank you for this amazing tutorial. But let's say there's a container with a width of 400px, with Text left-aligned and three icons right-aligned. But when the container's width is less than 300px, the icons on the right align One below another. How can we do that? Thanks

[@brunanascimento6186]

How did you do the header?

[@farshadamirshoghi9323]

Thank you Javier

[@alexisvaysse2254]

Very interessant ! Thanks !

[@martabologna7150]

you're e great teacher :) thanks

[@nellydashyan5622]

Hello Javier, thank you for your tutorial. I got a question,do you make entire raw as a variant and then switch on and off?

[@layfusiv4045]

maybe I missed it, but how to add another row with the "column model"?

[@beyzapoyraz531]

perfect video thanks much

[@Kiriamon]

Hi Javier, when you say you added another column (arround 11:42 ), what shortcut did you press to make it added atomatically? Nice content mate!

[@JaviAlaves]

Thank you, I appreciate it! It's a simple copy and paste of the column that was already there :) Auto Layout is set to horizontal, so if I hit CMD+C on any column within it, CMD+V will automatically translate into adding the copy right next to the column that you have actively selected (which in this case was the one I had copied).

[@JuhiGoyal]

Amazing! Thank you :)

[@JaviAlaves]

Thank you for watching!

[@SwapnaranjitaNayak]

On row selection, how do we make visible a hidden button like Gmail selection

[@olalolalola]

11:31 - when I am resizing and changing the table to fill the first row adjust its size to the second, third row. I end up with the first column that "shrinks" the photo. Why is that and where is the mistake

[@JaviAlaves]

If the image in the first column is shrinking, it might be that the element constraint is set to left and right. If you head over to the experimental page in this file, you'll be able to see what a finished table looks like and what the constraints for each element are. Let me know if this helps, otherwise I'm happy to jump on a call and troubleshoot! www.figma.com/community/file/971408767069651759/Chakra-UI-Figma-Kit

[@1vanbrav0]

thanks a lot bro, keep like that!

[@joshuaschmitz720]

Thanks Ray Romano!

[@JaviAlaves]

Ray Romano?

[@melissacossio334]

Thank you for your video

[@JaviAlaves]

My pleasure 🙏

[@stephle9943]

Is this figma file available to be duplicated?

[@Simplejidad]

How do you create the toggle for the variants?

[@JaviAlaves]

Sorry for the late reply, Santiago. The toggle gets automatically generated when you set to variant properties as True or False (or alternatively On, or Off also works).

[@shanehe729]

do you still have the working file for this? super curious to see how you structured the table variants

[@JaviAlaves]

Yes! You can find these components in the Experimental page inside this file. I hope it helps! www.figma.com/community/file/971408767069651759

[@vidhoo29]

can you please share how you have made a component

[@JaviAlaves]

Select any layer on your file and press cmd+k (or ctrl+k on Windows) to turn it into the component, or right-click and to find the option in the contextual menu as well. I hope this helps!

[@jennainkr]

Thank you Javier :))

[@prabhurajdesigner]

Hellow sir, request you to share the play book of this example of variants (switch on and off the table columns). I tried a lot, spent hours and hours but in vain. Kindly sharethe playbook of this file 🤝

[@CandygramMongo]

Question for anybody: I am using a custom set of responsive tables that i need to be a part of the Master pages, as a part of a document that will be used as a template for multiple people. But when i set the page as a master, the only thing on the page that doesnt work is the table.. any ideas?

[@peterdesignx]

Thank you so much

[@JaviAlaves]

Thank you for watching ✌️

[@haileyjamieson]

I'm struggling on how to auto layout text over a hero image? The text ends up above the image or under the image. Any tips on what I'm doing wrong?

[@JaviAlaves]

Is the image an image layer? If that's the case, Figma's going to treat the image and the text as two separate layers, and that's why the Auto Layout won't let you combine them into a single hero section. Instead, what you can do is create an empty frame, and then in the Fill setting, fill it with the image that you want as the hero section background. Inside that frame, you can place your text, and then configure the auto layout for that frame, and boom. You've got yourself a hero section with an image background and text overlay!

[@secession77]

Could you please publish the project? I can't figure out how did you put those coloured tags within each row.

[@JaviAlaves]

You can find these components in the Experimental components page inside the Chakra UI Figma Kit here: www.figma.com/community/file/971408767069651759/Chakra-UI-Figma-Kit

[@omairhussain86]

@@JaviAlaves A big thanks for sharing the Figma file... Kudos to you

[@jarosawbu5862]

How to enable interactive components 🤔? Can't see this feature. I know that there is live beta for this feature but can I somehow request this?

[@JaviAlaves]

Hey, yes! It's currently in beta. You can apply for access here: help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants#h_01EZBVA7GFS7BG0E89CSQNG47D

[@rakkeshkiren2267]

Great tutorial! Neatly explained. Quick question, if I were to use a plugin like Anima to generate code for this design, will it incorporate all those state changes and responsiveness into the code or is that done manually by the coder?

[@JaviAlaves]

I haven't tried to export via a third-party plugin, but what I do know is that if you inspect within Figma itself, any Auto Layout setup is treated as CSS Flex, which is directly applicable in code. Let me know if you give it a shot, I'd be curious to know whether what you're describing works or not.

[@misguidedmonkey]

You remind me of the original Steve from Blues Clues.

[@helenemartin6864]

Hello Javier, Happy New Year to you... sorry I have an unrelated question in regard to Figma and your community CV template.. I can't edit the text eg "Product Designer" I can edit the rest but not this title.. I can't find any answers on Figma community.. sorry to reach you via this channel. best wishes

[@JaviAlaves]

Helene, happy new year to you too! 🎉 Hm, that's strange. Are you referring to the text in the title at the top, under the name, or to the heading text for each of the work experience items? I'm assuming it's the former, which is in the same text layer as the name. What exactly happens when you have the text selected and try to type something new?

[@helenemartin6864]

@@JaviAlaves Hey Javier, thanks for your wishes and for getting back to me! I managed to fix the issue and finally sent my CV off, thank you :)!

[@JaviAlaves]

@@helenemartin6864 Woo, amazing! Best of luck 🤞

[@emmanueluchewa7052]

please say the shortcut commands you make use of, so that others can follow

[@JaviAlaves]

I'll put together a separate video on shortcuts and let you know once it's ready!

[@samuelgodis6902]

This was really helpful, can we get the source file 🙏🏽

[@JaviAlaves]

Happy to hear it was helpful! You can find this as part of the experimental components in this Figma file: www.figma.com/community/file/971408767069651759

[@samuelgodis6902]

Thank you so much! I'm definitely subscribing and turning on post notifications.

[@JaviAlaves]

@@samuelgodis6902 Much appreciated! I hope that you continue to enjoy what’s to come 🤓✨

[@saivignesh2118]

Share the Figma file

[@impeRAtoR28161621]

What is point of anything responsive if you can't present this responsivness in presentation mode?

[@JaviAlaves]

For me, the biggest plus is having more flexible components to work with in case you need to resize things quickly

[@pedalpatrol]

You skipped the for me most important part which is the prototyping, i have some problems with to get this right so even tho this video is great in the first part you just skipped the other one :D

[@JaviAlaves]

Thanks for the feedback! Indeed, I didn't devote as much time in the video to prototyping, compared to getting the structure in place. By prototyping, you mean how to set up the interactive row hover and click effects?