Frames vs. Groups in Figma - Why I Never Use Groups

Рет қаралды 23,731

3 жыл бұрын

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! kzfaq.info/get/bejne/q9WbodmIzN3JY4U.html
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: www.linkedin.com/in/javieralaves/
Chapters:
0:00 - Welcome
0:29 - Groups
4:53 - Frames
10:47 - Constraints
17:35 - Conclusion

Пікірлер: 65

@SuperDuce74 2 жыл бұрын

As someone who just began using Figma, thank you for the clear explanation and demonstration. Incredibly useful and well done. Thank you!

@bhagyashingale5663 2 жыл бұрын

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.

@JaviAlaves 2 жыл бұрын

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!

@mitrakm5221 9 ай бұрын

Your video was more detailed and demonstrative than the other videos that talk about Groups vs. Frames on KZfaq. I learned so much from you, thanks for making it easier :)

@OddWikingRahlffVisma 2 жыл бұрын

You are an excellent teacher, Javier! Good work! Much appreciated.

@JaviAlaves 2 жыл бұрын

Thank you, I appreciate your comment!

@cyandiana 2 жыл бұрын

Great video, thank you! A lot of useful tips for me, and the pace of the tutorial is consistent and clean. Great work!

@JaviAlaves 2 жыл бұрын

Great to hear, thank you for your comment!

@karolispulokas1364 Жыл бұрын

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 😀

@AlexYaroshuk 3 жыл бұрын

very solid, thanks

@natikartartist6230 2 жыл бұрын

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!

@JaviAlaves 2 жыл бұрын

My pleasure! I’m happy to hear that you’re finding these videos helpful 🙏🏽 I’m here if you have any questions.

@laxmanpatil81 Жыл бұрын

Awesome Video. Thanks for the Clear explanation.

@albertoserna6043 3 жыл бұрын

Thanks, Javi, great work as always.

@JaviAlaves 3 жыл бұрын

Thank you Alberto! 🙏

@priyan0481 2 жыл бұрын

Thanks Javier, My day start with your video to fix the issue on my project !!!!

@JaviAlaves 2 жыл бұрын

I'm really glad to hear that the video was useful to you, thank you for sharing!

@mstislavgrivachev3915 2 жыл бұрын

Cheers mate, rly nice tutorial on a grouping mess in Figma. Keep up the good work :)

@managebetterinc Жыл бұрын

Great content, very helpful comparison

@k-turner 2 жыл бұрын

Thank you for your knowledge! It’s very helpful for us newbies with Figma!

@JaviAlaves 2 жыл бұрын

Thank you for watching, Kevin! I’m glad to hear that these videos are helpful ⚡️

@GabrielaTelles-b4h 16 күн бұрын

Thanks! This was so helpful

@adl_219 2 жыл бұрын

You’re doing a better job teaching me this than the bootcamp I’m taking 😅

@tanishqvaibhav9744 Жыл бұрын

bro its help me a alot please make more videos in figma which helps us to build our skills .

@marieltorres2873 Жыл бұрын

thanks for your video, it helped me a lot !

@ufufu001 Жыл бұрын

good video. thank you king

@martynakowalczyk748 Жыл бұрын

Loved it

@viniciuspinheiro1431 2 жыл бұрын

Great video, very helpfull!

@JaviAlaves 2 жыл бұрын

Thanks Vinicius, I appreciate you dropping your thoughts!

@ludwigvillalba1886 3 жыл бұрын

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.

@JaviAlaves 3 жыл бұрын

Will definitely be doing more of these. Thanks for the suggestion!

@AnDurneva 2 жыл бұрын

thanks for youre work =)

@PimpMyYugioh 2 жыл бұрын

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

@jean-francoisdubos8955 2 жыл бұрын

Just great, you're a brilliant teacher mate :-) all the best

@JaviAlaves 2 жыл бұрын

Much appreciated, thank you for your comment!

@ashikprasannan9145 2 жыл бұрын

Thank you 🥳.

@JaviAlaves 2 жыл бұрын

Thank you for watching! ⚡️

@siyabongamabundza5834 2 жыл бұрын

Fantastic! Subscribed🔥

@JaviAlaves 2 жыл бұрын

Much appreciated! :)

@melissabarrow9204 2 жыл бұрын

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. 🤪

@JaviAlaves 2 жыл бұрын

I'm really glad it was helpful, Melissa! Indeed, once you move to frames there's just so much more value unlocked 🤓

@juliavera7768 2 жыл бұрын

Hi Melissa, may I know how do I sign up for Google's UX Design Certification?

@amirrezatavakol9676 2 жыл бұрын

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

@sandeeprathi3399 3 жыл бұрын

Great 🙏🙏🙏

@oliverskjnnemand5222 3 жыл бұрын

nice vid

@prajwalsharma2794 Жыл бұрын

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?

@driftingtales1984 2 жыл бұрын

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.

@JaviAlaves 2 жыл бұрын

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!

@driftingtales1984 2 жыл бұрын

@@JaviAlaves Thanks a ton man.

@hiphiphorhayy Жыл бұрын

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

@mandysaikia6984 3 жыл бұрын

Hey man , how you enabled the scale or ruler on top and side..

@JaviAlaves 3 жыл бұрын

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 :)

@mandysaikia6984 3 жыл бұрын

@@JaviAlaves thanks man 👍

@archerius2 2 жыл бұрын

Thank you Javi, why is it NOT possible to adjust a frame? Especially if it is in a component?

@JaviAlaves 2 жыл бұрын

Hey Arash, what do you mean by adjusting a frame? Could you add more details to what you're trying to do?

@archerius2 2 жыл бұрын

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

@olalolalola 2 жыл бұрын

I can not switch objects when grouped.how can I fix it

@JaviAlaves 2 жыл бұрын

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