[figma] Instance Nesting in container components

[yoiang]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Hello!
I have heard mention of thoughts that secondarily touch on this in other issues, I apologize if I was unable to find a discussion already focused on this and answered!

What my team is running into are components in Figma which are (sort of) set up properly in order to swap their contents matching how the MUI's children prop or other similar props would operate, and then components that should do this but don't in a way we can tell. We very well may be missing a design choice y'all have understandably chosen, Figma's component's methodologies are not 1:1! It'd be great to understand if that is so.

In our thinking we can imagine having placeholder filled Instance Swap properties in places where this would be necessary so that we can easily swap in the contents we wish.

Examples 🌈

One great example is Menu vs Paper as build in Figma, the former lets us swap a basic MenuItem with our own (by nature of MenuItem being a component instance which by default has Figma's instance swap, not specifically as an Instance Swap Property, not an exact metaphor to the code side). On the other hand Paper has no "contents" properties, instances, etc and because Figma doesn't allow adding children to component instances either requires being positioned absolutely within one's component relative to what would be the contents or requires being detached. Both options have different drawbacks and feel like workarounds.

Motivation 🔦

We wish to be able to build complex components from MUI Figma components with our own specific contents.

[oliviertassinari]

@yoiang In your swap example of the menu item doing it right, do you mean this?

[adrianmanea]

If I understand correctly from the example, is this the behavior are you referring to? I must say I really enjoy this workflow. If we make the nested components smart enough we can avoid detaching completely!

MUI-F_beta.-.Placeholders.mov

[yoiang]

@adrianmanea 's video illustrates the expected behavior, are we missing something on our end? Can't seem to find this in Paper

[oliviertassinari]

@yoiang It's a sketch of what it could look like.

I guess it makes sense to move forward with it 👍 . The Paper is not that simple, it adds a border radius, a box shadow, and a background color (in dark mode), it could feel daunting to apply these design tokens each time.

[adrianmanea]

@yoiang Sorry, the video was simply a demonstration so I can confirm your expectations. We will ship a lot more components with this behavior. If you'd like I can send an early copy if you are starting the project soon. Contact email adrian.manea@devias.io

[yoiang]

We have already started using the current version, should we hold off?

[adrianmanea]

Hi Ian, sorry for the confusion, even a beta copy will take a while to wrap up. I suggest not holding your breath for our update. Please send me an email and I will let you know if we can send a revised copy with the nested components included.