Fully Editable Component Instances

Experimenting with your plugin now, but yes it does solve the problem. Magic!

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

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.

:gift: 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

1 Like

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!

1 Like

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

2 Likes

I think that perhaps this is what you are looking for

10 Likes

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

2 Likes

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.

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.

1 Like

@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 :rofl:

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

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.

Hi Damian,

Hope you are well. If you post your question as a separate post or in Slack you might get more responses. Otherwise, feel free to message me directly if it’s a question related to the Table Creator plugin.

From my experience, the only way to create rounded corners on the whole table is to apply a corner radius to the table container.

When I turned a list (for exemple) that I’ve created with auto layout into a component and then make an instance of this component it’s no longer possible to move the list items up and down. This means that every time I want to swop place of two list items I have to copy paste text inside the instance. This feels extremely old school and is time consuming.

Nor is it possible to or copy past to create a new item. To solve this I add more list items than necessary to the component and hide them. Then I can show them in the instance when I need more.

To sum it up: It would save a lot of time and effort if the instances would work like the way a a component or a non component auto layout do.

I know it bugs my collegues, but does anyone else experience this? Is anyone using a plugin or workaround to help solve this?

1 Like
  1. Describe the problem: Icon tokens that are used in main components are locked in instances.

  2. We are attempting to create components with an icon yet allow other designers to swap variable sizes in conjunction with the right line height of different typefaces when using component instances.

  3. Does anyone else experience this?

Icon_tokens

I love auto-layout and the way overrides are implemented in Figma.

But when an auto-layout (eg. a stack of list items) is made a component, then all you can do in the instances of the component is hide some items. You cannot add items in the instance nor can you reorder items. I guess the former might be difficult, but I don’t see why you couldn’t at least change the order of existing items.

In other words, I often need to “override” the order of the original list, but I don’t have a easy way to do that, other than overriding item 1 so that it looks like item 2, and vice-versa.

Anyone knows why it is not allowed to reorder or even add items to an instance of an auto-layout?

If I create a component that is a collection of other objects (list, menu, table, etc), then the instances of that component don’t allow me to add objects (list items, menu items, table rows) - I’d have to detach the instance in order to add items, which negates the benefit of being able to propagate component changes to my designs. It does allow me to delete objects from the collection that are already included in the component, so I suppose a work-around is to make collection components that have many members and just delete members from the instances. Still this doesn’t seem like a great workflow.

Is there any way to customise the fixed width of the placeholder component inside an instance? I struggle to resize swapped components to the width I need …

Provide a way to share components that I can add elements to it?

example:
Table component… I need to add more rows to the table
List of users
Form fields
etc

With the addition of variants if could be super powerful and I could share them as a component in my library (instead of having to detach and add more items, what it defeats the point to be honest).

I think if would be super handy… what do you think?

A lot of good info here… what I would like to see:

If a component have autolayout on it I could:

  1. Copy the elements in autolayout and add more of them
  2. Insert any group of elements into the autolayout

From that point on I could create a variant for the original component more easily.

Just piling on here:

I am suffering from the same limitations here as everyone else. Someone else mentioned perhaps designating a frame or container inside of a component that could be “unlocked” to allow for content to be arranged or inserted. This would solve a lot of the issues I am having. There is currently no easy way, for example, to make an accordion component without detaching the component instance to edit the content inside.

If there was a way to designate an area within these components as editable in an instance we would be able to accomplish this, which would really eliminate some issues we are trying to work around.

2 Likes