How to Edit Components in Figma

let's take a look at how to edit a component here in figma so you might notice that I have this component out here that is a button I have some button options over here whether it's white or yellow some different variants with this component I also have some text in the shape of the button if you just start to edit this component itself you can make edits to it you can even change the word here maybe I'd like it to say submit I could change the height the width I can even adjust different things like the fill color but this doesn't edit the original component so if I were to come over into my assets and find that component again to bring it out here it's going to be the same as the original state of the component the original version of it so if you actually wanted to make edits to the component itself what you would need to do is find the main component this is an instance anything I drag out here is an instance of the component but not the main component the original component have a sub component enough to get to the main component the easiest way is to click on an instance and come over here into your properties area and you actually see this icon right here that allows you to go to the main component click on that it's going to take you there now this component does not have to be in the same page it could be on a totally different page in your project if we look at our layers panel we can see the difference between the instances of components and the main component each of these here is a component the main component has four squares in a diamond shape whereas any instance is an outlined diamond shape so you can see that difference here in your layers panel now when we have the main component out here we could change the text to say submit instead of a button right so I've just changed the main component which means any instance of it will carry that over unless I've made edits to the instance so if I zoom out here and go find those other instances you'll notice the one that I changed to submit still has that but any of the instances also change out here same thing if I were to adjust the width or any basic element to the component also now if I bring out this component you'll see it now says submit instead of button so that's how you can get to the component level or the main component to actually edit what it looks like if it has rounded Corners what whatever it is that's inside of your component and then same thing if you have components nested within components you can just keep diving down into the different main components to edit those that's how you can edit components here in figma

Channel: Pixel & Bracket

Views: 8,585

Keywords: pixel and bracket

Id: XI44EXF8dP4

Length: 2min 47sec (167 seconds)

Published: Fri Sep 01 2023