Using modes in code connect

[MDMann]

Hi, first of all awesome work! I attended your announcement Zoom meeting and am in awe of the possibility of connecting code snippets to each component and its instances. While watching the demo, I was wondering if it would be possible to also connect modes to code. I asked this question in the meeting but was asked to share more information here.

So basically we set up our components with component-level variables and modes. This means we only have one instance per component and handle the rest with modes. For example, our "Button" component is just one instance, and the different variants like "Primary", "Secondary" and"Tertiary" are three modes we created in a "Button - Variants" collection. Same for "Sizes" and "States".

In order for us to use code connect it would be great if there was a way to tell the code if for example the mode "Button - Variant: Primary" is selected and map the correct prop to the button in the code.

Let me know if you need more information or if anything is unclear in my explanation. I would be happy to hear back from you! Thank you!

[RoxanneGux]

Hey MDMANN, I wanted to chime in here, because a few months ago I was going to refactor our Button components to utilize modes instead of variants as you say you are doing.

I was having some issues and was in conversation with Figma Support. They essentially told me NOT to do this ; to stick with variants for these states of the button, not to use MODES. They gave me this video to watch. This link starts at 5:45

The whole video is worth watching though.

[MDMann]

@RoxanneGux Thank you for the link. Quite interesting and makes a lot of sense, but the modes enable us to do a lot more than just with the variants and other component props. On the button, we also have one collection for the content. Our buttons can have an icon left, right, only an icon, or only text. So we have modes for "Button - Content" which are "Text", "Icon + Text", "Text + Icon" or "Icon". By using a normal boolean prop on the component you can show the left and right icons at the same time, which we don't want. We could, of course, make variants for them, but this would mean we would blow up the variants quite a lot and have to match them to each other variant as "Size", "Variant" and "States", which blows it up even more.

[RoxanneGux]

Yes @MDMann I see. And the "blow up" you describe is what Jake Albaugh showed an example of with the buttons in his live demo- I think it was "Many to one" I laughed because it looks like ours- I attached a screen shot :)

Good Luck. I hope figma is able to accommodate your request.

[tomduncalf-figma]

Hey @MDMann, thanks for the feedback and happy to hear you like Code Connect! This is an interesting idea, and I've raised it for discussion with the team, so we will keep you posted.

Just to verify my understanding, you’d like to be able to do something similar to Variant Restrictions, but based on the mode of the instance instead?

[MDMann]

Hi @tomduncalf-figma, thank you for answering!

I'm not 100% sure if Variant Restrictions are what we need for it.

Let's say a designer is using our button component and configurated it like this:

Component props:

• Text: My awesome Button

Layer modes:

• Variant: Primary
• Size: M
• Content: Text + Icon

This is the code that should be returned when devs inspect said button:

<Button
  iconPosition="right"
  onClick={}
  size="m"
  variant="primary"
>
  My awesome button
</Button>

To map everything correctly we would need to set up dynamic code snippets, but instead of referencing component props, we would reference the modes.

import figma from '@figma/code-connect'

figma.connect(Button, 'https://...', {
  props: {
    text: figma.string('Text'), <--- Prop
    variant: figma.enum('Type', { <--- Collection
      Primary: 'primary',     <--- Mode
      Secondary: 'secondary', <--- Mode
      Tertiary: 'tertiary',   <--- Mode
    }),
    size: figma.enum('Size', { <--- Collection
      M: 'm', <--- Mode
      L: 'l', <--- Mode
      S: 's', <--- Mode
    }),
    iconPosition: figma.enum('Content', { <--- Collection
      Text: 'undefined',    <--- Mode
      Icon + Text: 'left',  <--- Mode
      Text + Icon: 'right', <--- Mode
    }),
  },
  example: ({ text, iconPosition, size, variant }) => {
    return (
      <Button
        iconPosition={iconPosition}
        onClick={}
        size={size}
        variant={variant}
      >
        {text}
      </Button>
    )
  },
})

I hope I used the code snippets correctly and this makes my explanation earlier a bit easier to understand. Thanks again for answering and keep up the great work!

[tomduncalf-figma]

I see, thanks for explaining. We'll discuss this as a team and follow up when we've done so!