code-connect Map a code component to a combination of variants in Figma

Please provide:

Code Connect CLI version: 1.0.5
Operating system: macOS Sonoma 14.5 (23F79)

I am trying to connect the PrimaryButton component which has multiple variants. most of the properties mapped as expected, however with the "Left content" variant which has ["Single digit", "Multiple digits", "Icon"] instances, when I am trying to map this combination of variants I get only the last one in the code sequence mapped inside Figma.

@FigmaVariant("Left content", "Single digit")
@FigmaVariant("Left content", "Multiple digits")
@FigmaVariant("Left content", "Icon")  >>>> onLy mapped to Figma.

@FigmaConnect(url="?node-id=1-14&m=dev")
 @FigmaVariant("Left content", "Single digit")
 @FigmaVariant("Left content", "Multiple digits")
 @FigmaVariant("Left content", "Icon")
 class PrimaryButtonLeftContentDoc {
 
     @FigmaProperty(FigmaType.Enum, "State")
     val buttonState: ButtonState = Figma.mapping(
         "Default" to ButtonState.Active,
         "Pressed" to ButtonState.Pressed,
         "Loading" to ButtonState.Loading,
         "Success" to ButtonState.Success
     )
 
     @FigmaProperty(FigmaType.Boolean, "Full-width")
     val fullWith: Modifier = Figma.mapping(
         false to Modifier,
         true to Modifier.fillMaxWidth()
     )
 
     @FigmaProperty(FigmaType.Enum, "Left content")
     val startContentType: StartContentType = Figma.mapping(
         "None" to StartContentType.None,
         "Single digit" to StartContentType.Counter
         "Multiple digits" to StartContentType.Counter,
         "Icon" to StartContentType.Icon
     )
 
     @Composable
     fun PrimaryButtonLeftContenSnippet() {
         PrimaryButton(
             startContent = startContentType,
         )
     }
 }

And here is the output of the code connect publish

Successfully uploaded to Figma, for Compose:
-> PrimaryButton() https://www.figma.com/design/?node-id=1-14&m=dev
-> PrimaryButton(State=Disabled) https://www.figma.com/design/?node-id=1-14&m=dev
-> PrimaryButtonSmallSnippet(Full-width=False) https://www.figma.com/design/?node-id=1-14&m=dev
-> PrimaryButtonDisabledSmallSnippet(Full-width=False,State=Disabled) https://www.figma.com/design/?node-id=1-14&m=dev
-> PrimaryButton(Right content=Yes) https://www.figma.com/design/?node-id=1-14&m=dev
-> PrimaryButton(Left content=Icon) https://www.figma.com/design/?node-id=1-14&m=dev  >>>> only last instance mapped

This could be solved by duplicating the code three more times and every time I used only one instance.

Aug 14 '24 11:08 mozahersalem

Hi @mozahersalem ! Thanks for your question -- In code connect, variant restrictions are actually interpreted as AND conditions -- So what I would recommend in your case instead is to create a separate variant restriction when Left Content is None and have the other example be the default one (I.e don't add any @FigmaVariant restrictions to the top of the definition). You could also omit the @FigmaVariant declarations at the top entirely if you want to show StartContentType.None.

So for example you could do (If you wanted two separate definitions):

@FigmaConnect(url="?node-id=1-14&m=dev")
 class PrimaryButtonLeftContentDoc {
     @FigmaProperty(FigmaType.Enum, "State")
     val buttonState: ButtonState = Figma.mapping(
         "Default" to ButtonState.Active,
         "Pressed" to ButtonState.Pressed,
         "Loading" to ButtonState.Loading,
         "Success" to ButtonState.Success
     )
 
     @FigmaProperty(FigmaType.Boolean, "Full-width")
     val fullWith: Modifier = Figma.mapping(
         false to Modifier,
         true to Modifier.fillMaxWidth()
     )
 
     @FigmaProperty(FigmaType.Enum, "Left content")
     val startContentType: StartContentType = Figma.mapping(
         "None" to StartContentType.None,
         "Single digit" to StartContentType.Counter
         "Multiple digits" to StartContentType.Counter,
         "Icon" to StartContentType.Icon
     )
 
     @Composable
     fun PrimaryButtonLeftContenSnippet() {
         PrimaryButton(
             startContent = startContentType,
         )
     }
 }

@FigmaConnect(url="?node-id=1-14&m=dev")
@FigmaVariant("Left content", "None")
 class PrimaryButtonLeftContentDoc {
 
     @Composable
     fun PrimaryButtonLeftContenSnippet() {
         PrimaryButton() 
     }
 }

Aug 14 '24 13:08 jyyang0

Thank you @jyyang0 for your reply. I already took this approach and it reduced a huge amount of possibilities of

@FigmaConnect
@FigmaVariant

Currently, I have 19 connect snippets to cover all the component possibilities (put all the variant options at end of the message) The main point that made me write all of these variants is that when I assign some values to undefined like what I did in Recat.

layout: figma.boolean('Full-width', {
        true: 'full-width',
        false: undefined
    })

When toggling the on-off toggle inside Figma the property is hidden and there is no need to add one more connect snippet to remove this property

doing this in Andriod compose

@FigmaProperty(FigmaType.Enum, "Left content")
    val startContentType: StartContentType = Figma.mapping(
        "None" to null,
        "Single digit" to StartContentType.Counter
        "Multiple digits" to StartContentType.Counter,
        "Icon" to StartContentType.Icon
    )

Is there a way to hide the default property as React?

All possibilities to map Figma variants and instances.

/*
__Full_width__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")


/*
__Full_width__-__Right_left_content__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Right content", "Yes")
@FigmaVariant("Left content", "Single digit")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Right content", "Yes")
@FigmaVariant("Left content", "Multiple digits")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Right content", "Yes")
@FigmaVariant("Left content", "Icon")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Right content", "Yes")
@FigmaVariant("Left content", "None")

/
__Full_width__-__left_content_None__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Left content", "None")


/*
__Full_width__-__Disabled__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("State", "Disabled")


/*
__Full_width__-__Disabled__-__Right_content_No_Left_content_None__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "No")
@FigmaVariant("Left content", "None")


/*
__Full_width__-__Disabled__-__Right_left_content__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "Yes")
@FigmaVariant("Left content", "Single digit")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "Yes")
@FigmaVariant("Left content", "Multiple digits")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "Yes")
@FigmaVariant("Left content", "Icon")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "Yes")
@FigmaVariant("Left content", "None")

/*
__Small_button__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Full-width", "False")

/*
__Small_button__-__left_content_None__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Full-width", "False")
@FigmaVariant("Left content", "None")


/*
__Small_button__-__Disabled__-__Right_left_content__
*/
@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Full-width", "False")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "No")
@FigmaVariant("Left content", "None")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Full-width", "False")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "No")
@FigmaVariant("Left content", "Single digit")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Full-width", "False")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "No")
@FigmaVariant("Left content", "Multiple digits")

@FigmaConnect(url="https://www.figma.com/design/?node-id=1-14&m=dev")
@FigmaVariant("Full-width", "False")
@FigmaVariant("State", "Disabled")
@FigmaVariant("Right content", "No")
@FigmaVariant("Left content", "Icon")

Aug 15 '24 11:08 mozahersalem

Hey @mozahersalem, sorry for the late response, this slipped past my radar.

As you've identified we don't have the ability to hide default values in Compose right now -- I can see how it gets pretty cumbersome when you have a variety of variants that you need to toggle different fields for. This is definitely something we want to support though as you've mentioned it aligns with our React API (And SwiftUI).

The workaround for now would just be to have it be a single prop mapping without using @FigmaVariant annotations, but it would cause you to have a potentially undesirable behavior of showing the defaults like StartTypeContent.None

Sep 13 '24 15:09 jyyang0

Map a code component to a combination of variants in Figma - Android Compose.

All possibilities to map Figma variants and instances.