Components Inside Components… Inside Components. In Figma. How And Mainly, WHY?
HTML-код
- Опубликовано: 26 мар 2023
- In this video I’ll explain to you why and how you should use components within components, also known as nested components. I will show you an example from real life: header menu with menu items, where the menu items contain icons. Each of these is a separate component and I’m going to show you how by using nested components you can manage this logic better and take advantage of this option. I’ll also explain the topic of component overrides, again by using an example.
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
This tutorial is great for beginners because it explains a feature in Figma step-by-step and in simple, visual terms
how to use nested components in figma - how to put a figma component inside another figma component - why and how you should use nested components - what are figma component overrides - figma nested components and component overrides explained. I will be answering these questions and explaining these topics in this video
--------
© 2023 Mavi Design 
Хобби
2 weeks on your channel and i can say my designs have improved by a whole lot. Thank you so much Mavi deign 🙏
Thank for clearing the concept
Great explanation, just what I needed. I hope you will continue with these Figma videos
Is it possible to add one more menu in one header instance independently?
Hey Maviiiiii - Good explanation, But i am facing problem when i am using multiple variants instead of single (menu item button) e.g., Default state (menu item button) with different sizes i.e. small medium and large and same for hover state (menu item button) with different sizes, whenever i am choosing / selecting for these component properties/variants ---> colour of button is changing, icons is changing, all other properties are changing but ---->>> size is not changing after nesting so please help.
it would be nice if you also explain the difference between published and non published components.. when do you not publish it and what are the advantages or disadvantages?
great i am just doing something same n got struck , if i need to change Text (multi line text )and icon size on hover ? what will be the approach here.
Create a hover interaction for the “menu item” component
Hey Mavi! I have a question or a few. :D
1. So you mean that we don't have to create variants of an item, for example Home item, About us item etc (Stuff that usually goes in header) ? What if i need variants because i need a selected version and unselected version of an item, could i do that with only one item again, like in this video?
2. Also does this mean i never should put item components in header component? Only the instances of item components?
Im just trying to clear some things up in my head. Thank you!
Heyhey,
1) yes it’s better to create one component like “menu item” and then use instances of that. In the menu item component you can define the structure and states
2) yes always only use instances. Main components should always live in a separate place. Think of it as a concept of an object. The concept of a menu item isn’t in the menu. It’s a separate, “abstract” entity. The menu only has instances
@@mavidesign Wow you are so fast! 😂 That's really helpful, thank you a ton!! I will try this out rn 😄🙏 You are great at explaining btw, for real!
You are making it complicated when it is not! It's the way you elaborate the subject!
Heyy Maviiii i need help real quickk aaaa!! What happened with constraints section in Figma, why can't i find it? Also do they work only on auto layout and not after you make it a component? Thank you!!! I dont know who else to ask, i cant find anything on the net and i dont have any friends using Figma!!
Okay i got it, it was coz of the auto layout, i needed to remove it. Also how am i supposed to make responsive website layout if i cant make my navbar component be responsive, im so confused haha!
Next video on nested properties?
thanks, components are parent and the variants are the childers, modifying parent component reflects children variants. but modifying children varints does not reflects on parent component
Mavi, be honest bro... Do you ever get lost in your own nested components?
😂 I used to get soooo confused. Now I just make sure I don't go above 4-5 levels haha