No video :(

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

Подписаться 7 тыс.

Просмотров 24 тыс.

50% 1

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/...
LinkedIn: / javieralaves
Chapters:
0:00 - Welcome
0:29 - Groups
4:53 - Frames
10:47 - Constraints
17:35 - Conclusion

Опубликовано:

16 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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 10 месяцев назад

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

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

@OddWikingRahlffVisma 3 года назад

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!

@GabrielaTelles-b4h Месяц назад

Thanks! This was so helpful

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

@tanishqvaibhav9744 Год назад

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

@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

@adl_219 2 года назад

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

@laxmanpatil81 Год назад

Awesome Video. Thanks for the Clear explanation.

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

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

@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

@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 ⚡️

@mstislavgrivachev3915 2 года назад

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

@albertoserna6043 3 года назад

Thanks, Javi, great work as always.

@JaviAlaves 3 года назад

Thank you Alberto! 🙏

@ufufu001 Год назад

good video. thank you king

@marieltorres2873 Год назад

thanks for your video, it helped me a lot !

@AlexYaroshuk 3 года назад

very solid, thanks

@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

@jean-francoisdubos8955 2 года назад

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

@JaviAlaves 2 года назад

Much appreciated, thank you for your comment!

@martynakowalczyk748 Год назад

Loved it

@viniciuspinheiro1431 2 года назад

Great video, very helpfull!

@JaviAlaves 2 года назад

Thanks Vinicius, I appreciate you dropping your thoughts!

@siyabongamabundza5834 2 года назад

Fantastic! Subscribed🔥

@JaviAlaves 2 года назад

Much appreciated! :)

@AnDurneva 2 года назад

thanks for youre work =)

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

@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

@ashikprasannan9145 2 года назад

Thank you 🥳.

@JaviAlaves 2 года назад

Thank you for watching! ⚡️

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

@statusquoreject Год назад

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

@archerius2 3 года назад

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

@JaviAlaves 3 года назад

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

@archerius2 3 года назад

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

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