Skip to main content
Riho_Kroll
January 28, 2021

Fully Editable Component Instances

  • January 28, 2021
  • 70 replies
  • 27922 views

One common problem I run into, as well as others is adding things to component instances, or changing things like auto-layout direction for a given instance.

Right now, in order to achieve for example a tree structure that can grow would be to make sure that the tree items are not in a component, and handle the nesting manually by resizing the tree nodes. This can get pretty bothersome when you also need to worry about other layout constraints, or need to change the spacing for example. Another way would be to have all of the possible tree nodes you want already pre-created in the master component, but this makes it quite annoying to manage, because you’d need to always hide and unhide each tree node and it pollutes your layer view with unnecessary items.

I think a solution to this problem, and also likely other common issues with component instance management would be to just allow instances to be modified completely without restrictions, including being able to add items into the hierarchy of an instance. These items would be clearly marked as foreign. Something along these lines:
image

This would also make it possible to compose elements together out of other components without using variants. An example could be a base button component, which has only a label, but you could add an icon to the button either by drawing directly inside the button instance, or placing an icon component inside the instance.

Then to solve the “tree problem”, one would just have an empty auto-layout “children” frame in the tree node master component, and when you create an instance of it, you can then just add any number of tree node instances into the children frame, and nest them however deep is necessary. Then if you decide to change the padding of the child nodes for example, you just change it in the tree node master and everything will automatically update.

70 replies

Riho_Kroll
April 7, 2021

This seems great. Can you share a bit about how it works internally?

Mr.Biscuit
New Participant
April 7, 2021

Internally it does the hard labor of overriding every single override on each layer of the instance, although you can achieve the same result manually, but humans are simply not designed for that task.

🎁 I have implemented a hidden feature I haven’t told anyone: press on the ← → plugin button while holding down option/alt on your keyboard will duplicate the instance instead of swapping

Vanessa1
April 8, 2021

When creating multiple prototypes with Figma with a consistent style, it’s currently not possible to create components, where the children can vary and are connected to the same style.

Simple example, I have styled a simple pop-up with title, close button, border-radius, close button and CTA. Currently, I’m copying this design and create different components for a filter pop-up, a dialog and so on, although they all share the same “background”. It would be really cool, if there would be an option, where you can create components, where some part can be replaced with a variable content. By having a placeholder in this component, you would be able to always choose what you want to include here like whether it is a list of checkboxes, a simple text message, maybe an image as well. These placeholder could also be interactive components or the existing interactive components could be extended by connecting it to a same style.

Do you already have a way to solve this somehow without always having to change every variation of the same style? I would love this feature!

Ivan_Cucer
New Participant
April 10, 2021

GUYS! It must be added asap! My company’s design department has a lot of troubles with it…

Paulo
April 15, 2021

I think that perhaps this is what you are looking for

Vanessa1
April 15, 2021

Omg yes thank you, I wasn’t aware of this feature!

Wolfgang_H
April 18, 2021

Only certain parameters of instances can be modified. For some reason, you can’t move or resize layers within an instance. There are some workarounds (i.e. using auto layout within a component to move the X,Y position of layers, or duplicating the layer resizing it, and using visibility to turn it on or off), but these workarounds require a lot of extra steps. This is a basic feature in other programs (i.e. Adobe XD). I’m confused why this isn’t an option in Figma.

*No pic included because I think this is self explanatory. Let me know if it isn’t.

Wolfgang_H
April 19, 2021

It doesn’t seem to be working for me. After using the “local edit” feature, it seems to detach the instance entirely from the original component.

Mr.Biscuit
New Participant
April 20, 2021

@Wolfgang_H Yes that is the only way to make things work at the moment, you are using it correctly, one thing to keep in mind while using local edit is that it doesn’t affect its parenting instances nor its children instances, but only the one instance you made radical changes to, consider it “minimally invasive” lol. Much much better than having to detach all the way 🤣

In your example above, you can make the red circle an instance nested inside of the component, so the changes to red circle component is reflected on its instances, also make a bunch of the grey box component and make them form a “list” component. Then you’ll see what I mean

Damian_Zyskowski
June 1, 2021

Hi im sorry that i comment this here but
im just starting with design and I have problem with table in figma, I would like the corners to be rounded as shown in the attached picture. I’ve made an outline for each individual rectangle here (which doesn’t work with the tables in weekly and monthly views). I’ve seen other ways of creating tables, i.e. adding a line to each rectangle and hiding some, but then I can’t make round corners.