Say I have a component of a card and after various iterations in my design I want a group inside that card component to be a component but the “Create Component” option won’t show up.
So every time I stumble upon this problem I have to take that group out of the card component, then create a component out of that group and then place it back inside my card component.
Is there a reasoning behind not allowing users to create components within components?
That’s how Figma works, main instance of the component cannot be inside of another component
Yep, I clearly understand that’s how Figma works. I’d like to know the reasoning behind that, though.
A solution would be: If you try to create a component within a component, the created component appears as an instance and the main one appears outside the component you’re working on.
That’s exactly the way it worked not long ago. Maybe some folks from Figma can elaborate on this change
No change here. It works the other way around… so if you have a main component within another layer and make that parent layer a component, then it will move the component outside and place an instance within it.
+1000!
It’s a very common use case. First, you iterate and brainstorm, then you organize. First, you create a widget, and later when you a happy with it - you decide to break it into several sub-components (generalization process) While the widget is already a component - breaking it up into several components becomes a very tedious manual process. Here is an example:
The solution would be:
when the user tries to convert any element inside any master component(MC) into a new component - just create the new MC automatically in the first parent node which will allow that and place it near the edited area. If there is some issue with the team library and shared masters - place the newly created MC in the same scope/document/library as a currently edited MC.
🖖
I agree that this is a dumb extra step they make us do. This should be converted to a product request, if it’s not already.
Would love to be able to split components into several when needed too
Oh i think i have two workarounds for this!
First is a plugin: Pop a component: https://www.figma.com/community/plugin/940714430683584876/Pop-a-Component
You press the thing and it makes a component out of the object you have selected, leaving an instance in its place.
I also macroed with Autohotkey so i have a button on my keyboard that creates a regular component, but when i double press it it runs the plugin.
The other solution is more manual and i use it when there is a “delicate” layout and don’t want to trust automations:
I just copy the element i want to be a component and paste it outside the parent main component. Then i create a component out of it.
Last i copy the component (to be able to paste it as an instance), then i select the original group/frame i had in the parent main component, and substitute the whole thing with an instance by pressin ctrl+alt+shift+v
Just found this topic and wanna share a possible solution using my plugin Master.
Check out this short video showing it in action. I created a single component from 3 objects inside of the main component:
As you can see, compared to other solutions, Master would go through the whole file and find instances of the component that you are changing the contents of, and preserve all overrides in those instances. 
Additionally, it can create a component from multiple objects at once, or swap them to an existing component, e.g. if you want to replace regular frames with instances or swap instances inside of a main component and keep overrides for instances of that component, you can use Master’s pick and link feature.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
