Frames vs. Groups in Figma - Why I Never Use Groups
Vložit
- čas přidán 5. 08. 2024
- Learn about the differences between managing layers in frames vs. groups in Figma, and why I personally never use groups in production design. There's just a few things I'm very opinionated about when it comes to Figma, this is one of them! What are your thoughts? Let me know in the comments! Specially if you have a radically different opinion, I'd love to hear 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 layer management 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
0:29 - Groups
4:53 - Frames
10:47 - Constraints
17:35 - Conclusion - Věda a technologie
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 CZcams. I learned so much from you, thanks for making it easier :)
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! This was so helpful
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!
You are an excellent teacher, Javier! Good work! Much appreciated.
Thank you, I appreciate your comment!
Cheers mate, rly nice tutorial on a grouping mess in Figma. Keep up the good work :)
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.
Awesome Video. Thanks for the Clear explanation.
Thanks, Javi, great work as always.
Thank you Alberto! 🙏
very solid, thanks
Great content, very helpful comparison
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!
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 ⚡️
You’re doing a better job teaching me this than the bootcamp I’m taking 😅
Loved it
good video. thank you king
Great video, very helpfull!
Thanks Vinicius, I appreciate you dropping your thoughts!
Just great, you're a brilliant teacher mate :-) all the best
Much appreciated, thank you for your comment!
bro its help me a alot please make more videos in figma which helps us to build our skills .
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!
Fantastic! Subscribed🔥
Much appreciated! :)
thanks for your video, it helped me a lot !
thanks for youre work =)
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
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 🥳.
Thank you for watching! ⚡️
Great 🙏🙏🙏
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?
nice vid
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.
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 👍
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
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
Please, 4K max quality videso : (
Noted, maybe soon!
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
ure cute. thanks
5:55 - I wish you just explained the differences, instead of having to watch this at 3.2x speed...