Web Design » Figma » How Do I Edit an Instance of a Component in Figma?

How Do I Edit an Instance of a Component in Figma?

Last updated on September 29, 2022 @ 12:00 am

Components in Figma are instances of a master component. That means that you can have many different versions of the same component on your canvas, and they will all stay in sync. To edit an instance of a component, simply select it and make your changes.

When you edit a component, any changes you make will be applied to all other instances of that component. So if you change the color of a button, for example, all other buttons will also change color.

If you want to make a change to just one instance of a component, you can break the link between that instance and the master component. To do this, select the instance you want to edit and click the “Break link” icon in the top right corner of the Inspector panel.

Once you’ve broken the link, you can freely edit that instance without affecting any other instances of the component. To re-link the instance to the master component, simply click the “Re-link” icon in the top right corner of the Inspector panel.

PRO TIP: If you are not familiar with Figma or comfortable with editing code, we suggest that you do not attempt to edit an instance of a component in Figma. Doing so could result in code errors or changes that you are not expecting, which could break the component or your design.

Conclusion:

To edit an instance of a component in Figma, simply select it and make your changes. If you want to make a change to just one instance of a component, you can break the link between that instance and the master component by selecting it and clicking the “Break link” icon in the top right corner of the Inspector panel.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.