Figma Props --> React Prop Mapping based on a condition NOT working

[vchandran8]

Hello Team,

Thanks for the excellent tool deployed. It is really helpful.

In our react components, We have use-case where we need to map BOOLEAN or TEXT properly based on FIGMA ENUM Property value conditionally. I see Figma-CodeConnect able to do the mapping one to one for same data type but NOT working conditional mapping.

In the below example, We have certain React component properties (inValid,Validation message,disabled) based on the value from Figma state ENUM property value.

          props: {
                itemlabel: figma.string("Item label"),
                checked: figma.boolean("Checked"),
                itemerrortext: figma.string("Item error text"),
                state: figma.enum("State", {
                  Default: "default",
                  Hover: "hover",
                  "Item Error": "item-error",
                  Selected: "selected",
                  Disabled: "disabled",
                  "Selected hover": "selected-hover",
                }),
              },
          
          <CustomCheckBox 
                checked={props.checked} 
                label={props.itemlabel}
                inValid={props.state === "item-error"}
                validationMessage={props.state === 'item-error' ? props.itemerrortext : undefined}
                disabled={props.state === "disabled"}
             />

For this code, the Figma Code Connect shows like the below. It has mapped correctly for checked,label property as it is ONE to ONE. But other conditional based mapping not working.

          <CustomCheckBox
              validationMessage={
              __PROP__("state") === "item-error"
              ? __PROP__("itemerrortext")
              : undefined
              }
              checked
              label="Item label"
              inValid={__PROP__("state") === "item-error"}
              disabled={__PROP__("state") === "disabled"}
          />

[ptomas-figma]

Hi!

Code Connect files are not executed. While they're written using real components from your codebase the Figma CLI essentially treats code snippets as strings. This means that code snippets can display, for example, hooks without needing to mock data. However, this also means that logical operators such as ternaries or conditionals will be output verbatim in your example code rather than executed to show the result.

For your use case you could do something like

   props: {
      itemlabel: figma.string("Item label"),
      checked: figma.boolean("Checked"),
      inValid: figma.enum("State", { "Item Error": true }),
      disabled: figma.enum("State", { Disabled: true }),
      validationMessage: figma.enum("State", { "Item Error": figma.string("Item error Text") }),
    },
  
  <CustomCheckBox 
      checked={props.checked} 
      label={props.itemlabel}
      inValid={props.inValid}
      validationMessage={props.validationMessage}
      disabled={props.disabled}
   />

Let me know if that helps!

[vchandran8]

Thanks for the information. This suggestion works perfect!!!

I have another situation that to pass the Figma value in to HTML attribut prop as JSON values. For Ex: The Required boolean from the figma should go part of React HTML prop value.

props: {
itemlabel: figma.string("Item label"),
checked: figma.boolean("Checked"),
inValid: figma.enum("State", { "Item Error": true }),
disabled: figma.enum("State", { Disabled: true }),
validationMessage: figma.enum("State", { "Item Error": figma.string("Item error Text") }),
required: figma.boolean("Required"),
},

<CustomCheckBox
checked={props.checked}
label={props.itemlabel}
inValid={props.inValid}
validationMessage={props.validationMessage}
disabled={props.disabled}
inputExtraProps={{
required: props.required,
}}
/>

The direct properties mapped the values correctly but the JSON property shows like below. ( required: __ PROP __("required"),

<CustomCheckBox
checked
label="Label"
inValid
validationMessage="Error Message"
inputExtraProps={{
required: __ PROP __("required"),
}}
/>

Please advice on this use case too as we have many use-case of prop mapping to HTML Attribute JSON props in React.

[tomduncalf-figma]

Hey @vchandran8! You're right, this isn't supported right now, only the prop value itself can reference props. It sounds like it would be useful for us to support this for your case though – I'm going to discuss this with the team and see if we can support your example, as it makes sense to me.

[tomduncalf-figma]

This will be fixed in the next release @vchandran8

[ptomas-figma]

This should be fixed in the latest release (0.1.2). Please reopen this issue if the problem persist.