Frames slow you down especially when you're starting a design and have no clue about what goes where, the sizing, layouts , etc. At that point you need to quickly try various looks and you need speed, groups with their easy manoeuvring and quick scaling give you that. Towards the final stages , I think the constraints, spacing and other features can be helpful.
Great points, I totally agree that an earlier exploratory stage, many designers prefer to use groups for the reasons that you describe. Thank you for sharing!
Your video was more detailed and demonstrative than the other videos that talk about Groups vs. Frames on UA-cam. I learned so much from you, thanks for making it easier :)
Feedback/Reactions/commentary to existing web/product designs could be cool. Maybe Figma templates where one can dive into details like responsiveness/breaking points, best practices, etc.
Amazing video. I come from development backgroung and your video is immensely useful. Finally I can design in a way that clearly translates to CSS and as a bonus I can even use flexbox-like behaviour. Many thanks 😀
Thanks for clearing up the mystery between these 2, Javi, you explained it in a way that finally helped me grasp something I've been struggling with in Course 3 of Google's UX Design Certification. It would be great if the Google instructors in that course suggested tutorials like yours to us students. I've been dominating my wireframing and component design with groups that I later add Auto Layout to, and wondering why it doesn't work well. 🤪
Hi Melissa, I've been also attending Google's UX design course, and I've used groups a million of times! and now I understand what that mess came from :D haha
Very useful. I would like to see every keyboard button that you pressed appear on the screen so that I know all the shortcuts you use and can navigate Figma easily
@@JaviAlaves I think I meant the layer boundaries. You know the blue keyline representing the layer? sometimes it is not possible to change it especially if it is defined in an autolayout.
How many layers do you have selected? I believe they all have to be at the same distance from each other in order to work, and then you need to zoom in enough to see that they can be switched. Let me know if this helps
Hi Javier, I have seen many Figma tutorials and then I stumbled up on yours. Honestly man you are doing a pretty good job with your tutorials, very good explanations. I have a confusion with auto layout function man. Can we do a responsive hero banner with headline on top of the image with auto layout? I have tried many times but the auto layout isn't allowing me to keep headline on top of an image. Are there any solutions? I really appreciate if you can shed some light. Thank you, Shylesh.
Thank you for your comment! And yes, try this. Create an empty frame the size of your banner, and then add the text inside. Set up the Auto Layout however you want it. Now, go to the frame Fill property, as if you wanted to change the frame color, but instead of selecting a color choose Image. It’ll allow you to set an image as the fill of your banner, without counting as an additional layer towards your Auto Layout. Let me know if this works!
As someone who just began using Figma, thank you for the clear explanation and demonstration. Incredibly useful and well done. Thank you!
Frames slow you down especially when you're starting a design and have no clue about what goes where, the sizing, layouts , etc. At that point you need to quickly try various looks and you need speed, groups with their easy manoeuvring and quick scaling give you that. Towards the final stages , I think the constraints, spacing and other features can be helpful.
Great points, I totally agree that an earlier exploratory stage, many designers prefer to use groups for the reasons that you describe. Thank you for sharing!
Your video was more detailed and demonstrative than the other videos that talk about Groups vs. Frames on UA-cam. I learned so much from you, thanks for making it easier :)
Feedback/Reactions/commentary to existing web/product designs could be cool. Maybe Figma templates where one can dive into details like responsiveness/breaking points, best practices, etc.
Will definitely be doing more of these. Thanks for the suggestion!
You are an excellent teacher, Javier! Good work! Much appreciated.
Thank you, I appreciate your comment!
Great video, thank you! A lot of useful tips for me, and the pace of the tutorial is consistent and clean. Great work!
Great to hear, thank you for your comment!
Thanks! This was so helpful
Awesome Video. Thanks for the Clear explanation.
Amazing video. I come from development backgroung and your video is immensely useful. Finally I can design in a way that clearly translates to CSS and as a bonus I can even use flexbox-like behaviour. Many thanks 😀
Thanks Javier, My day start with your video to fix the issue on my project !!!!
I'm really glad to hear that the video was useful to you, thank you for sharing!
bro its help me a alot please make more videos in figma which helps us to build our skills .
thanks for your video, it helped me a lot !
You are great, Javier! I am watching your figma videos and I am sure will have some questions later. Just starting. Thanks for helping us all!
My pleasure! I’m happy to hear that you’re finding these videos helpful 🙏🏽 I’m here if you have any questions.
Great content, very helpful comparison
You’re doing a better job teaching me this than the bootcamp I’m taking 😅
Thanks for clearing up the mystery between these 2, Javi, you explained it in a way that finally helped me grasp something I've been struggling with in Course 3 of Google's UX Design Certification. It would be great if the Google instructors in that course suggested tutorials like yours to us students. I've been dominating my wireframing and component design with groups that I later add Auto Layout to, and wondering why it doesn't work well. 🤪
I'm really glad it was helpful, Melissa! Indeed, once you move to frames there's just so much more value unlocked 🤓
Hi Melissa, may I know how do I sign up for Google's UX Design Certification?
Hi Melissa, I've been also attending Google's UX design course, and I've used groups a million of times! and now I understand what that mess came from :D haha
Thanks, Javi, great work as always.
Thank you Alberto! 🙏
Hey man , how you enabled the scale or ruler on top and side..
You can use the Shift+R keyboard shortcut to show and hide rulers, and then drag from either side to add rulers to your frame :)
@@JaviAlaves thanks man 👍
Very useful. I would like to see every keyboard button that you pressed appear on the screen so that I know all the shortcuts you use and can navigate Figma easily
Thank you for your knowledge! It’s very helpful for us newbies with Figma!
Thank you for watching, Kevin! I’m glad to hear that these videos are helpful ⚡️
Cheers mate, rly nice tutorial on a grouping mess in Figma. Keep up the good work :)
Can I nest a frame within a group or group within a frame? Will it create any problem in future like dev handoff or any other problem?
Thank you Javi, why is it NOT possible to adjust a frame? Especially if it is in a component?
Hey Arash, what do you mean by adjusting a frame? Could you add more details to what you're trying to do?
@@JaviAlaves I think I meant the layer boundaries. You know the blue keyline representing the layer? sometimes it is not possible to change it especially if it is defined in an autolayout.
I can not switch objects when grouped.how can I fix it
How many layers do you have selected? I believe they all have to be at the same distance from each other in order to work, and then you need to zoom in enough to see that they can be switched. Let me know if this helps
very solid, thanks
Just great, you're a brilliant teacher mate :-) all the best
Much appreciated, thank you for your comment!
good video. thank you king
Great video, very helpfull!
Thanks Vinicius, I appreciate you dropping your thoughts!
Fantastic! Subscribed🔥
Much appreciated! :)
Loved it
I only had to learn the difference as a beginner because I want to use the figma to webflow plugin and theres side effects with using groups
Hi Javier, I have seen many Figma tutorials and then I stumbled up on yours. Honestly man you are doing a pretty good job with your tutorials, very good explanations.
I have a confusion with auto layout function man. Can we do a responsive hero banner with headline on top of the image with auto layout? I have tried many times but the auto layout isn't allowing me to keep headline on top of an image. Are there any solutions? I really appreciate if you can shed some light.
Thank you,
Shylesh.
Thank you for your comment! And yes, try this. Create an empty frame the size of your banner, and then add the text inside. Set up the Auto Layout however you want it. Now, go to the frame Fill property, as if you wanted to change the frame color, but instead of selecting a color choose Image. It’ll allow you to set an image as the fill of your banner, without counting as an additional layer towards your Auto Layout. Let me know if this works!
@@JaviAlaves Thanks a ton man.
Thank you 🥳.
Thank you for watching! ⚡️
thanks for youre work =)
Please, 4K max quality videso : (
Noted, maybe soon!
Great 🙏🙏🙏
Great video but I feel the volume level was a bit low. Without headphones it was a bit hard to hear everything you’re saying
5:55 - I wish you just explained the differences, instead of having to watch this at 3.2x speed...
nice vid
ure cute. thanks