Figma Support Forum

Create component inside another component

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?

1 Like

That’s how Figma works, main instance of the component cannot be inside of another component

1 Like

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.

1 Like

That’s exactly the way it worked not long ago. Maybe some folks from Figma can elaborate on this change

1 Like

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.

1 Like

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:

  1. Crete play card component. It has 3 params(Health, Mana, Element), text, image and background.
  2. When you happy with a card design you decide to make each of its properties components since they will be used elsewhere. So you want to convert Health, Mana, Element, and Background into components.
  3. You select each of those elements and copy/paste them outside the Card master component.
  4. You convert each element into a new master component.
  5. You replace existing elements inside the Card master component with instances of HP, Mana, Element, and BG components (trying to match position and scale)
  6. Then you decide that BG should have 2 subcomponents as well! Frame and actual BG so you repeat the same tedious steps again and again.

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.

1 Like