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

BorojiDesignInc
New Participant
March 4, 2021

I cannot even move the position of instances in the component. I have to by force detach the instance and make the edits. That is not the idea way since it is no longer linked to the main component

Pavels_Amosovs
March 9, 2021

Maybe this might help? Git Like versioning

Harun_Alikadic1
New Participant
March 9, 2021

@Pavels_Amosovs how does Git versioning relate to component instance editing and overrides?

Pavels_Amosovs
March 10, 2021

This? “When you just want to explore options, test variants without creating actual variants or just add stuff while being able to cancel all overrides and get back to original design.”

Mr.Biscuit
New Participant
March 16, 2021

I made a plugin to solve exactly this issue, and my aim is that you’ll never have to detach your instance ever again, it is a nice little tool to put in your toolbox before this requested feature happens (if ever)

Figma
BorojiDesignInc
New Participant
March 16, 2021

Downloaded the plugin, thank you so much 🙂

burakkilic
April 4, 2021

@Mr.Biscuit thanks a lot. That’s 100% what I need when I’m using your Ant Design Kit for Figma. Appreciated

Shane
April 5, 2021

A simple and a bit random idea/approach for this issue, which I have not thought through at all but put here for some discussion: what if any empty frame in a component can then contain editable content in an instance? Most of the time I break an instance from the master in order to add/modify one bit of it (items in a drop-down, rows in a table, number/format of tabs in a tab bar etc etc). If Figma supports a component instance “containing” other content like this, then we get a lot of flexibility without having to detach the instance…

Edit: just thought as well that having an auto layout applied to the empty frame would mean that the component is still setting up the overall component behaviour nicely too ie. padding between/around items in a drop-down list is still set at the component level, where you would want it.

Mr.Biscuit
New Participant
April 5, 2021

what if any empty frame in a component can then contain editable content in an instance

My plugin can help you achieve exactly that, if you make the “empty frame” an instance

Shane
April 6, 2021

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