Editing instances in Figma is primarily done through the right sidebar, especially when the instance utilizes component properties.
Figma instances are linked copies of a main component. They inherit the structure and properties of the main component but can often be modified without breaking the link. The most powerful way to control specific variations of an instance is through component properties defined on the main component.
Editing Instances Using Component Properties
If the main component has component properties set up (like text properties, boolean properties, instance swap properties, or variant properties), editing its instances becomes straightforward and intuitive using the right-hand sidebar.
When you select an instance containing component properties, the Properties section of the right sidebar will populate with different component property controls. This is where you make most adjustments specific to that instance.
Utilizing the Properties Panel Controls
Based on the properties defined in the main component, you will see various controls appear in the Properties section. Use the accompanying dropdowns, toggles, or text fields to make changes, and they will be reflected immediately in the instance on your canvas.
Here's how you typically interact with these controls:
- Text Fields: For Text properties, you'll see a text field where you can directly type and change the text content within the instance.
- Toggles: For Boolean properties, you'll see a toggle switch (on/off) that allows you to easily show or hide specific layers or elements within the instance.
- Dropdowns: For Instance swap properties or when using component Variants, dropdowns allow you to quickly swap nested instances (e.g., change an icon) or select a different variant state (e.g., change a button from default to disabled).
Using these controls ensures that your instance remains linked to the main component while allowing for controlled variations, making design systems much more flexible and manageable.
Other Ways to Modify Instances
While component properties offer structured control, you can also make other types of overrides on instances directly:
- Style Overrides: You can change local styles like fill colors, stroke colors, text styles (font, size, weight), effects, and corner radius on individual layers within an instance. These overrides are specific to that instance.
- Layer Visibility: You can hide or show individual layers within an instance, provided the main component's structure allows it.
These methods allow for further customization, but component properties are the designated way to handle predefined, frequent variations.
