Fully Editable Component Instances

I’m creating component variants of containers (popovers, cards, accordions, etc.) where the content/layout can’t be determined at the master level. I need the flexibility to build content layouts within the “body” area of individual instances without detaching my instance and breaking my design system. Once I detach my instance, any updates to my libraries will no longer flow through to these components. Does anyone know how to achieve this result?

I actually found this in another post (Fully Editable Component Instances - #17 by Hossein_Boroji) but a plugin exists for this thanks to @Mr.Biscuithttps://www.figma.com/community/plugin/913055393462842774/Instance-Utils

I would personally LOVE to see this become native functionality within Figma.

2 Likes

Just chiming in myself here. I tried AdobeXD a few weeks back, much prefer Figma still - but to everyone in this thread saying Fully Editable Instances isn’t logically possible - XD has this option.

That is, by far, the one pro XD has over Figma. You can fully edit component instances.

@FigmaTeam - you guys have to make this an option (and add native spell check!)

1 Like

When creating components I often feel Code has much more flexibility than what we can design in terms of components. For instance if I wanted to design a popup design, I know the style of the Title, action buttons, but I never know what the contents of that popup will be.
In many such cases I need to create the content outside the component when actually it should be inside the component.
My proposal is when the Frame is created as a component then any from inside the component should have a option to mark it to accept children. That way in the instance the marked Frame will work like a regular frame which will accept any elements we put in there. This will be helpful Header designs, Card designs, List Item designs and much more.

3 Likes

You can actually do this at the moment.

  1. Create a placeholder component, and put it inside your Card component within the library. Adjust the spacing, scale etc.
    2.Then in the project, create the content of your custom card. Make a component, then use “Instant swapping” to be used in the card “placeholder” area.

Enjoy :slight_smile:

Need!

We are currently creating a listBox component in the library. And since this component can have any amount of items, the workaround I have is to just clutter the component with an ample amount of items (groups incl.) and just annoy the designers by deleting (hiding) those that they do not need.
OR they can copy the component, edit it themselves, and hope that we do not re-do the component anytime soon. :rofl:

have you considered using slots for your lists? you can create auto layout components that contain various slots so you can vary the number of items on a list without creating a specific list component. So instead of creating a List component with variants for each amount of ListItems, you can create column components containing slots, and create variants of that component for columns with 2 items, 3, 4, 5, 6, etc. That way you’ll also have a general component for column layouts.

As an experiment, I have been trying to move from Adobe XD to Figma and this one really bothers me quite a bit. I’m so used to having the freedom to do whatever I want with instances without restriction in XD (changes just become overrides). You can do literally anything, E.g. extreme example: completely change a vector’s shape in an instanced component and still change the colour of the same vector with the master component.

I hope Figma give designers the freedom to choose what can and can’t be overwritten within variants. :frowning:

I made it this way

Made a component to render an icon, multiple different sizes

Each variant use hug contents for auto sizing

And there is a fixed size placeholder that I swap with another instance like icon, image etc

It works like this, I use top level icon component instance to set a size and then swap the icon that sits inside

I found this method quite flexible, but at a cost of more complex layer/component structure

This is a good suggestion that would make components more powerful and useful. For example: you could make templates for things like a modal or wizard style UI that can have replaceable or customizable content.

2 Likes

In the case of tables, dropdowns and lists, even a component property that accepts a number input like “Number of Rows” or “Number of Columns” would be helpful.

If I could have one significant new feature in Figma, this is it: container components. This is basically the Figma equivalent of the children property in React, or media placeholders in Keynote.

I’d like to define one or more “parent” frames in a component into which I can place one or more non-component objects that behave as they would if the parent frame weren’t part of a component. So if the parent frame is just a regular frame, I can, say, put a rectangle in it and drag it anywhere. If the parent frame uses autolayout, I can put three rectangles in and they line up and size themselves accordingly. And so on. You do get some of this with instance swaps but only some.

5 Likes

Thanks for the feedback, @dfeldman!

We’ll pass this along to the team for consideration. Don’t forget to also Vote, so we can get an accurate gauge of interest from the community! :point_up:

I’m wondering how many votes is the right number for your team to start looking into it?

I’m just passing by to reference that other thread, that’s quite related: Variable Content Containers for Components (Replace/Reorder Layers in components) - #14 by Thomas51

I have this problem with a table. So i created a component with 8 column and 10 rows. In our application we work with allot of data tables and for designing screen in need to adjust the table component top more or less columns/rows. But after making it a component it’s not possible. So i need to detach the component to make it work. I think it’s pretty annoying.

I feel like I face this problem all the time. I make use of Figma’s variants for prototyping purposes so I don’t want to detach an instance because then obviously the prototyping function will disconnect as well. To make things worse, I don’t typically want to make huge changes on instances, I typically just want to add on to them. For example, the component I am working with at the moment displays a dropdown list. When you activated, the list is displayed, when disabled, the list is hidden. I used auto layout to create everything and I simply want to add items on the list to one of the instances. If there is a better way to do this now, I would love any advice. I feel like the best solution would be if I could simply add to the instance while retaining prototype function…

Upvote this.
To maintain the consistency of a design system, designers should have the ability to determine which auto layout can be moved. This is particularly helpful in list-type components, such as navigation, steppers, data lists/tables, etc. Requiring users to detach a component due to changing the order of an auto layout goes against design system maintainability.

Even the Sun can rise in the West. I will never have a solid component.

I know I’m late to the party but that is exactly what I think is needed.
That’s one of the only steps missing from Figma’s goals of bringing design and dev teams closer together.

+1 man!