figma.nestedProps inside figma.className

[WollertBenjamin]

Please provide:

• Code Connect CLI version 1.3.4
• Code Connect file, Figma design and/or relevant code snippet that could help us get more context

Actual code is s

figma.connect('....', {
    props: {
        className: figma.className([
            figma.nestedProps('_tags (main)', {
                size: figma.enum('Size', {
                    md: 'md',
                    sm: 'sm'
                })
            }),
            figma.enum('Color', {
                Black: 'black',
                White: 'white',
                Red: 'red',
                Blue: 'blue'
            })
        ])
    },
    example: ({ className }) => html`<div class="${className}">DIV</div>`
});

Issue is: Result is

<div class="[object Object] black">TAG</div>

Probably because of "nestedProps" But thing is:

• I CAN'T create the className inside "example".
• I CAN'T use Size outside of nested because ... it's a nested properties
• I CAN'T update a bit code and do class="${nested.size} ${variant} because the result is class="black" md" (yeah there is a random ")

So the question is, how to fix that ? Is that even fixable ?

[louaidrissi]

can you add a screenshot of figma properties that you are trying to target?

[WollertBenjamin]

Hello @louaidrissi

Here is a screenshot of figma properties that I am trying to target.

Goal is to use figma.className (or anything else, to be honest) to get a string (example: "black md")

As I said

• I CAN'T create the className inside "example" (expected only a tagged template literal as the body of the render function)
• I CAN'T use Size outside of nested because ... it's a nested properties
• I CAN'T update a bit code and do class="${nested.size} ${variant} because the result is class="black" md" (yeah there is a random "), it's not possible to interpolate multiple vars.