Variant based on instance swap property?

[adbutterfield]

• Code Connect CLI version: 1.3.6
• Operating system: macOS 15.7.1

I hit a case where it would be helpful to have a variant based on the name of the component used for an instance swap prop.

The issue is for designs, there's a constraint on the Figma side so sometimes designs use a child layout component inside a parent component, but in React we accept props for that child layout component directly on the parent (the layout behavior is baked into the parent).

It's even a bit more complicated, because there are cases where we don't use that layout, and render the instance swap prop as children of the parent component.

I tried to create a template for this that doesn't use a parser, but I couldn't get children to render correctly...

[islobodiuk-figma]

Hi @adbutterfield, Can you provide more details on the design, the properties, and the code-connect code you tried to use? We are not fully understanding what you tried and didn't work

[adbutterfield]

I actually figured out how to make it work using a template without a parser, so I think I'm good for now.

But more details on what I was trying to do with the React parser:

I tried to do like:

 variant: { ContentArea: 'LayoutComponent' }

But it didn't work. I think maybe because for instance swap properties the label shows the name of the component, but the value is actually the component id? I'm guessing this because when I do instance.getInstanceSwap('ContentArea') in a template file, I get an id.

But even if variant: { ContentArea: 'LayoutComponent' } did work, I would also need another variant where ContentArea is not LayoutComponent, which I think is currently not possible. 🙇