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.

[vchandran8]

Hi Team,

I am able find the fix working fine with "*.figma.tsx" file approach. Is the same applied to storybook file approach?

I have below props update in the storybook file of my component but I am not able to add the JSON parameter from Figma property.

design:{ type: 'figma', url: '<URL>', examples: [Template], props: { label: figma.string("Item label"), value: figma.string("Item label"), inValid: figma.enum("State", { "Item Error": true }), disabled: figma.enum("State", { Disabled: true }), checked: figma.boolean("Checked", { true: figma.enum("State", { Selected: true, "Selected hover": true }), false: false, }), state: figma.enum("State", { Default: "default", Hover: "hover", "Item Error": "item-error", Selected: "selected", Disabled: "disabled", "Selected hover": "selected-hover", }), } }

I tried with below story created but it was not mapping the prop to inputExtraProps JSON attrubiute.

    <Checkbox {...args} 
        inputExtraProps={{
            required: true,
            //TODO : Figma Not supporting this mapping and they working on the fix.
            state: prop.state // Both prop.state or args.state is erroring out.
        }} />
  `

Please share any example of mapping figma prop to react JSON HTML attributes from Storybook file approach.

Let me know if I need to create a separate issue for this.

CC : @tomduncalf-figma

Thanks, Veera