Designing Responsive Tables with Auto Layout in Figma
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- 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.
Are you new to product design and/or Figma and looking for a practical and guided step-by-step jumpstart? Have a look at my Beginners' Hands-On Tutorial and design the Google homepage, no prior experience required! • Designing with Figma -...
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 👋
Twitter: / javalaves
Figma: www.figma.com/@javi
LinkedIn: / javieralaves
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 - วิทยาศาสตร์และเทคโนโลยี
This tutorial could be the best Figma table solution I have seen on the internet, thank you for this great content.
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.
I can not thank you enough! After watching 100 of Videos!! You really did help me!!!
wow- thank you for making this! So far this has been my favorite explanation of auto-layout & figma tables!
Thank you, I’m stoked to hear that :)
Finally, a good tutorial about how to make tables using components and variants! Thank you mate
Happy to hear it was helpful!
Thank you Mr. You are great ! I will watch every video you make, It’s very helpful 👍🏻
Thanks Javier, great refresher for me - haven't done tables in a while - really great tutorial
Extremely helpful, learned so much in 20 mins. Thanks a lot
Hey, thanks for making these videos. They are helping a lot to learn all bits and pieces from Figma.
My pleasure, happy to hear they're helpful!
Thank you very much for explaining! Now I understand better how to design tables
Perfectly explained, thanks!
Wow... amazing how you explained everything!
Thank you Javier for crystal clear explanation
Thanks, Javier. Very useful and well explained!
Quality in-depth and practical video. Big thanks to you. Subscribed :)
My pleasure, and thank you for subscribing :) I’m happy to hear it was helpful!
looking forward to learning from the rest of your videos. Subscribed!
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.
Thanks for watching, and happy to hear you found it useful!
Thank you for great tutorial. Really helped me a lot!!
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.
excellent tutorial, everything is clearly explained.
Solid tutorial - Cheers
Hello Javier! Thank you for this video. It been helpful in helping me understand Interactive Component, Variant and Responsive Design.
My pleasure, thank you for watching!
This was fantastic, thanks!
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.
This is so helpful, thank you!!
I'm in love with this video. God bless you. Let's take your channel to 100k 🚀
Very well explained thanks a lot
Awesome!! Very well explained concept of autolayout
Great video! Thanks 👏
Great tutorial, thanks. I'm glad someone could take me through rows.
My pleasure, I’m glad to hear it was helpful!
Thank you for the tutorial! You made my life much easier :))
I'm really glad to hear it was helpful!
very well explained autolayout!!
i really apreciate your help with dowloanding this software
Super demo! Very nice Javier!
My pleasure :) Happy to hear you enjoyed it!
Thanks for letting me know how to use Autolayout Frame :)
I am so happy that I have found this tutorial. Finally, everything is clear and explained in simple language! Thank you!
That was wonderful, thank you!
You're very welcome!
Thank you!!!! This was very helpful!!!
Happy to hear it was helpful!
you saved my life
Very interessant ! Thanks !
thanks a lot bro, keep like that!
perfect video thanks much
really good tutorial, thanks!
You're welcome!
Thank you Javier
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
you're e great teacher :) thanks
Thank you Javier :))
Amazing! Thank you :)
Thank you for watching!
Thank you
Great
This video helped me a lot
Happy to hear it was helpful!
watch more and learn more your are great thanks.
new subscriber here! great content Javier! thank you for this!
Thanks for subscribing, I’m happy to hear it was helpful!
Thank you so much
Thank you for watching ✌️
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!
Thank you for your video
My pleasure 🙏
Thanks for the tutorials they are really helpful. I might suggest checking your mic sound levels. It makes a weird sound sometimes 0:02
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?
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 :)
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!
Thanks for sharing.
A video specifically on when to use groups, frames and/or auto-layout would be interesting.
I'd love to do a video on groups vs. frames. Thanks for the suggestion!
Here it is! - th-cam.com/video/PSSwXeIccpw/w-d-xo.html
@Javier Thank you for the tutorial. Could you please share a link to the file you are using here? Thanks!
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!
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 )
Thanks for the feedback Erik! You’re right, I’ll be extra thorough next time :)
You just saved me couple of minutes ! :D thanks
Thanks Ray Romano!
Ray Romano?
Great job Javier!!!
Is there a Figma file for this tutorial? Thank you!
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.
Make a tutorial please 🙏 😅😅😅. And show us
Hi, I wonder what is the length of the Divier?
Hi Javier, can you please share the published version URL, as I am unable to see this in FIGMA community.
How did you do the header?
maybe I missed it, but how to add another row with the "column model"?
12:41 - when I change the width of the column picture changes its size. how do you fix that
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?
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.
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!
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
If tNice tutorials isnt the most true tNice tutorialng ive ever read
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!
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!
On row selection, how do we make visible a hidden button like Gmail selection
Javier Alaves
How you have duplicated cards inside the auto layout? at 6:55mins
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)?
Hey there, happy to help! Could you please provide with more details regarding what you're having trouble with?
@@JaviAlaves I am having the same problem. How did you construct and create the Users column to make it responsive?
Would love to see how you set up the borders on the cell. Will you be posting this in the Figma community?
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
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?
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!
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).
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.
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
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!
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.
@@JaviAlaves No problem at all. This video is such a great help!!! Looking forward to watching and learning more from your other vids :D
OMG! Was wondering what I did wrong, thank you 🙏
Same with divider - set to left and right
also - 11:40 - how d you add a column
Is this figma file available to be duplicated?
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
🤝
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
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
do you still have the working file for this? super curious to see how you structured the table variants
Yes! You can find these components in the Experimental page inside this file. I hope it helps! www.figma.com/community/file/971408767069651759
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?
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!
Ur tutorial is perfect, the best at the moment.
Do u have publishing this component as an open source design in the Figma?
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
@@JaviAlaves You are amazing. Thank you very much!
@@marcosporto8092 Happy to help! 🙏🏼
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?
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
How do you create the toggle for the variants?
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).
Could you please publish the project? I can't figure out how did you put those coloured tags within each row.
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
@@JaviAlaves A big thanks for sharing the Figma file... Kudos to you
You remind me of the original Steve from Blues Clues.
can you please share how you have made a component
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!
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
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?
@@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 :)!
@@helenemartin6864 Woo, amazing! Best of luck 🤞
please say the shortcut commands you make use of, so that others can follow
I'll put together a separate video on shortcuts and let you know once it's ready!
This was really helpful, can we get the source file 🙏🏽
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
Thank you so much! I'm definitely subscribing and turning on post notifications.
@@samuelgodis6902 Much appreciated! I hope that you continue to enjoy what’s to come 🤓✨
Share the Figma file
What is point of anything responsive if you can't present this responsivness in presentation mode?
For me, the biggest plus is having more flexible components to work with in case you need to resize things quickly
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
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?
The most annoying thing about this way of doing tables is that you have to place text in each cell separately, instead of filling up a whole column as we're used to do in any other sheets software.
Yeah, I agree with you regarding the fact that it's not entirely straightforward. I wish it was easier!