penpot/penpot

feature: making a component consisting of other components

yotamguttman opened this issue · 1 comments

Is your feature request related to a problem? Please describe.

Screenshot from 2024-05-06 12-48-26
cannot create a component, of a board that has other components in it.

  • white wrapper: board
  • purple wrapper: individual components

Describe the solution you'd like.

I'd like to be able to create a parent component that consists of child components inside of it. so that, I can use the parent component which contains a certain arrangement of children components (that may or may not have been independently used across the project). that makes it easier to butch-edit an existing construction of children components across several UI pages/versions.

Describe alternatives you've considered.

if you've ever used Adobe XD (horrible software, I know), it had one brilliant feature (not even Figma has yet adopted), that was the ability to create default 'child components', which can later be individually changed without affecting the default version.

for ex: you want to design a grid of cards, for say, a contacts applet. so each card must keep the same layout but feature a different info (avatar, name, phone num) etc. XD let you create the layout of such card once, make a component out of it, and then, you could simply change the text fields and images, individually for each card clone, without it affecting the other cards, while the overall layout of the default component was retained across them all.
I had to dig deep to find an example but I did: https://youtu.be/53qdI7CPNxM?si=UWOW99i4AxnDJyil&t=71

in the example layout I've created above, such a feature would be insanely useful. I currently have to create each thread/message manually, and as I'm so early on in the design stage, the overall layout is still quite fluid. I'd have loved creating just a single component as such, and then let Penpot populate it for me, make a list of it for instance, tha features clones, amongst which the information can be altered.

Additional context

that's totally unrelated to this ticket. I just wanted to wholeheartedly thank you for such an amazing software! I'm enjoying penpot so much and seeing such advanced tools created by the open source community is mindblowingly exciting! how far the open source community has come in such a short time! I'm very grateful for your team!

Hi @yotamguttman,

Preventing main components from being nested inside other components is actually an explicit product decision as permitting so could result in contradictory situations and recurrence loops. For this use case, we recommend that you use component copies instead.

I'm closing this issue as this is not something that we plan to change in the foreseeable future, but I have created an enhancement in our backlog so that we can consider this option further down the line.