It took me such a long time to realise these things but I'm very happy that you're doing an epic job at sharing valuable knowledge.

Bruh, please. more videos like that. I find your channel on of the best tutorial that ever exist.

Super helpful! The best tutorial on this subject that I've found so far.

This video has helped me so much to create a dynamic and flexible workflow in Figma. Thanks Danny!

Epic. Thanks for explaining this so well and succinctly!

Wonderfully helpful! Thank you Danny!

Great tutorial. I have been making variants and adding properties via layer name updates using Rename to add new Property=Thing, Another Property=Something, and values. I never knew how to use the Variant panel or what the [+] button did at the bottom-right corner of the - - - variant - - - container. Rebuilding AAAALLL of my components/variants this week. Putting the Primary, Secondary and Tertiary buttons in one instance still, just using this new base component technique.

Nice and simple tutorial. Thank you:)

bit confusing at first time. Then i practiced it became easy ..thanks to u Danny..

Thank you, Danny!

Really helpful thank you

What if you want to have a variant with an icon on the left, right AND bottom center of the button? Like a chevron for instance. I'm unable to place the bottom one cause it doesn't wanna go there with the auto layout being on. It goes to the left or right like a magnet where the two other icons are.

Thanks you for the tutorial but I am getting a big bounding box when I hide the other elements at 3:17. Any idea what I am doing wrong?

Super handy. Great tutorial ✌ Q: How would you add an hover state to the .main button like a subtle fill or underline the text?

@dsapio

2 жыл бұрын

Styling can be added right into the variants, no need to add it to the main component. If you need a new element for the hover state then add it to the main but otherwise you can change the fill of the variants.

Interesting approach, should help to things faster, thanks! I wouldn't put the dropdown inside because usually in has to be with position absolute in my cases of using it. Cheers!

How did you get the fontawesome icon onto your artboard to begin with? When I drag and drop them, nothing happens.

What is the period at the beginning to hide it from showing in the library?. Can you please take time to explain some little details?

What about different sizes? Can you use one ButtonBase or do you need to make a ButtonBase for each size?

@dsapio

2 жыл бұрын

Not necessarily. You can adjust the padding or just use the scale tool (cmd + K) to scale a variant instance to the size you need.

Never knew on/off had the same boolean effect as true/false. Thanks for making this tutorial. It's a gem. Btw, do u know of any way to directly delete a property from the property section in the variant setup to the right in Figma? Im talking about those gray pill shaped labels that states the property.

@dsapio

2 жыл бұрын

You can delete those little pills indicating a property by deleting it from your instances. If an instance is using a property "active" for example, remove "active from that element or change to another property for it to be removed.

@Underhills

2 жыл бұрын

@@dsapio Yes, I tried this but it didn't work every time, it seems unstable. Do you hit enter or tab after deleting the property name inside the input area? I had to repeat it until it suddenly worked. I was hoping the label pills could be deleted instead, would be a more intuitive way to operate. Figma isn't all that intuitive. Thanks for sharing your tutorials.

when you duplicate the main component as a copy why do you need to do auto-layout again? i feel like that's one step extra?

Only problem it's hyde part of component for create the others, leave your figma file heavy, or do you have memory in your machine for this.

@lukaslow4828

Жыл бұрын

entered a workplace where this way of building components by hiding layers made the components close to unusable, to their complexity & heavyness

Nice! Thanks a lot. But One question - is it possible to create a "base component" from an existing component ?

@dsapio

Жыл бұрын

Yes, check out a plugin called Master

Can the dropdown be added later to the master component?

@dsapio

Жыл бұрын

Yeah any of the elements can be added later as needed.

You’re saying that start designing variants from a instance.

Hello. What should I do if I want to add a component to the main button ?

@dsapio

Жыл бұрын

Adding more components to your main component is encouraged. Simply add it in to the original then apply component properties help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties. You can then simply activate that component where you need it.

Are there any use-cases for this technique now that there are component properties?

@dsapio

Жыл бұрын

Yes it changes things a bit - I have a new video now Figma / Creating Input Fields with Auto Layout + Base Components kzread.info/dash/bejne/aGakw7qhZqWacrA.html

@jasmines6768

Жыл бұрын

@@dsapio this makes sense now thanks! Do you recommend any best practices when it comes to organizing the base and nested components in the library?

@dsapio

Жыл бұрын

Add a “.” before your base component and it will be hidden from your library when you publish it. The base component isn’t intended to be used in designs

@jasmines6768

Жыл бұрын

@@dsapio 💡🔥

how come you say the .main button doesnt show up in the library? For me, I do see it in the library.

@dsapio

2 жыл бұрын

If you add "." before a component name it hides it from your library. So if you'd like the main component included in your library then remove the "."

@Underhills

2 жыл бұрын

@@dsapio It shows up in my asset library too, even with . or _ infront of the component name. What that does is preventing it from being published if your publishing something else on the same page - right? The components will always be available in the local asset pane when it's made. You have to delete it on the page to remove it from the assets panel. That's at least what I experience. Figma on W10.

When I switch on and off the icons in the main component file all the components in the instance section also gets the same change, so I have to leave the main empty with no layers visible. Then I cannot see the contents of the main unless I turn on all the layers ...and then it's just a messy circle. So how does that work? I've seen main components with all the contents on without it affecting the instance components. Don't know how.

@dsapio

2 жыл бұрын

I normally leave all the elements in my main component then just click "delete" to hide them from the variants. If you add new elements later on to your main though you will have to again delete this element from all of your variants.

@Underhills

2 жыл бұрын

@@dsapio But if I delete them from my instances I won't receive any future updates from the main, and the whole operation and purpose of having a main is gone? Instead I'm just hiding the elements I don't want from the instances with the eye icon in Figma. But the thing is, I can't see what's in my main cause the second I turn on the contents in the main all that gets applied to the instances as well, so then I'm stuck with an empty main in order for this thing to work. But looking at other projects I have seen main files with all the contents visible and at the same time having the instances being totally unique. I don't get it. What have I failed to comprehend here?

@Underhills

2 жыл бұрын

I went back and had another look. So, Figma is not really deleting when deleting? That's weird. When I hit the delete key on an icon in the variant setup it only closes the eye and hides it, but when I went straight to the eye icon in my main and shut that off it didn't have same effect, cause then all the icons would be turned ON when I turned it on in the main. This is weird at best, very strange logic. So to keep my main variants all visible all the time I must delete (not hide with eye in the layer) the icons from the variant setup cause if I only turn it off via the eye icon it also gets turned off in the main. Figma puzzles me.

Its very handy but it will make the file more and more bigger since each variant will have the main component inside. But very thank you for your share