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
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.
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.
Your class was precise, but I did not understand the last part. I'm a beginner student and did not know all the quick commands. That's why I'm going to give you a bad rating, also because there is no follow-up video that will take me to learn the last part.
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 🤝
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!
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?
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!
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.
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 )
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
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
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!
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)?
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 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!
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.
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?
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).
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!
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
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).
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.
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
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
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.
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
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.
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!
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
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.
Extremely helpful, learned so much in 20 mins. Thanks a lot
i really apreciate your help with dowloanding this software
Great tutorial, thanks. I'm glad someone could take me through rows.
My pleasure, I’m glad to hear it was helpful!
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!
Finally, a good tutorial about how to make tables using components and variants! Thank you mate
Happy to hear it was helpful!
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
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.
This tutorial could be the best Figma table solution I have seen on the internet, thank you for this great content.
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.
Hi Javier, can you please share the published version URL, as I am unable to see this in FIGMA community.
Thank you very much for explaining! Now I understand better how to design tables
Your class was precise, but I did not understand the last part. I'm a beginner student and did not know all the quick commands. That's why I'm going to give you a bad rating, also because there is no follow-up video that will take me to learn the last part.
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
🤝
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!
Thanks Javier, great refresher for me - haven't done tables in a while - really great tutorial
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?
@Javier Thank you for the tutorial. Could you please share a link to the file you are using here? Thanks!
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!
Great job Javier!!!
Is there a Figma file for this tutorial? Thank you!
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
Javier Alaves
How you have duplicated cards inside the auto layout? at 6:55mins
Basically, this is not for everyone; all the smartest guys know a lot but not able to see from the learner's view
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
12:41 - when I change the width of the column picture changes its size. how do you fix that
On row selection, how do we make visible a hidden button like Gmail selection
maybe I missed it, but how to add another row with the "column model"?
You remind me of the original Steve from Blues Clues.
Is it just or does he soft a little bit like Sansa Stark from ga of thrones?
If tNice tutorials isnt the most true tNice tutorialng ive ever read
Is this figma file available to be duplicated?
Hi, I wonder what is the length of the Divier?
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
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
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!
watch more and learn more your are great thanks.
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?
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?
Very well explained thanks a lot
I'm in love with this video. God bless you. Let's take your channel to 100k 🚀
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!
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 Mr. You are great ! I will watch every video you make, It’s very helpful 👍🏻
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?
I can not thank you enough! After watching 100 of Videos!! You really did help me!!!
Thanks for the tutorials they are really helpful. I might suggest checking your mic sound levels. It makes a weird sound sometimes 0:02
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
Nice work mate!
Solid tutorial - Cheers
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!
looking forward to learning from the rest of your videos. Subscribed!
also - 11:40 - how d you add a column
Very interessant ! Thanks !
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 🤞
Thank you Javier
Thanks for letting me know how to use Autolayout Frame :)
Wow... amazing how you explained everything!
How did you do the header?
Awesome!! Very well explained concept of autolayout
Share the Figma file
you saved my life
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).
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!
Thank you for great tutorial. Really helped me a lot!!
Thank you Javier for crystal clear explanation
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 :)
excellent tutorial, everything is clearly explained.
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
Thanks, Javier. Very useful and well explained!
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).
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!
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
This is so helpful, thank you!!
perfect video thanks much
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
very well explained autolayout!!
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
you're e great teacher :) thanks
Thank you so much
Thank you for watching ✌️
Perfectly explained, thanks!
new subscriber here! great content Javier! thank you for this!
Thanks for subscribing, I’m happy to hear it was helpful!
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!
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
thanks a lot bro, keep like that!
Amazing! Thank you :)
Thank you for watching!
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
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.
Great video! Thanks 👏
Thank you
Great
This video helped me a lot
Happy to hear it was helpful!
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!
Thank you Javier :))
That was wonderful, thank you!
You're very welcome!
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!
This was fantastic, thanks!
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! 🙏🏼
Thank you!!!! This was very helpful!!!
Happy to hear it was helpful!
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.
Thank you for the tutorial! You made my life much easier :))
I'm really glad to hear it was helpful!
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! - ua-cam.com/video/PSSwXeIccpw/v-deo.html
really good tutorial, thanks!
You're welcome!
Super demo! Very nice Javier!
My pleasure :) Happy to hear you enjoyed it!