Distinguish between multiple instances of the same component with identical property names

[george-apazidis]

Environment

Code Connect CLI version 1.2.2 Operating system Windows 10 Enterprise

Description

When working with a component that has multiple instances of the same child component (in this case, buttons), there's no clear way to distinguish between them when mapping properties using Code Connect.

Current Setup

• Parent component: Modal with two button slots (primary and secondary)
• Both buttons are instances of the same component, appearing in the Figma UI as identical "Buttons" sections
• Each button section has the same property names (Size, Type, etc.)
• While visually distinct in the layer panel with different labels, we cannot programmatically target them individually

Attempted Approaches

We've tried several methods to target each button individually:

1. Using figma.nestedProps('Buttons', {...}) to access button properties
2. Using figma.children() with layer paths to target specific instances
3. Attempting to use figma.textContent() to identify by label text
4. Trying to scope by position in the Footer structure

Here's our current implementation:

const sharedProps = {
  // Button instances
  buttons: figma.enum("Buttons", {
    "1": html`<span slot="orion-modal-primary-button">Primary</span>`,
    "2": html`<span slot="orion-modal-secondary-button">Secondary</span><span slot="orion-modal-primary-button">Primary</span>`,
  }),
  
  // Primary Button props - attempt to target individually
  primaryButtonProps: figma.nestedProps('Buttons', {
    small: figma.enum("Size", {
      Small: html`primary-button-small`,
      Regular: undefined
    })
  }),
  
  // Secondary Button props - attempt to target individually
  secondaryButtonProps: figma.nestedProps('Buttons', {
    small: figma.enum("Size", {
      Small: html`secondary-button-small`,
      Regular: undefined
    })
  }),
}

figma.connect(
  "https://www.figma.com/design...",
  {
    props: {
      ...sharedProps,
    },
    example: (props) => html`
    <orion-modal
      ${props.secondaryButtonProps.small}
      ${props.primaryButtonProps.small}
    >
      ${props.buttons}
    </orion-modal>`,
  },
)

Current Behavior

• Properties from both button instances get merged
• Only the last property mapping takes effect
• Unable to distinguish between primary and secondary button properties

Expected Behavior

Ability to target each button instance individually, perhaps by:

• Position in the component tree
• Some form of instance identification
• Or another method that allows distinguishing between multiple instances

Question

What is the recommended approach for handling multiple instances of the same component when they need different property mappings within Code Connect?

Additional Context

• Both buttons are visible in the Figma layer panel under Footer/Buttons with different labels
• The buttons render correctly in Figma with different properties
• We need to distinguish between buttons to apply the correct HTML attributes to each one
• May be related to https://github.com/figma/code-connect/issues/11#issuecomment-2203754822

[tomduncalf-figma]

Hey @george-apazidis, are you able to rename the instances in Figma?

So rather than both being called Buttons, give them unique names which you can refer to from figma.nestedProps.

I think this should be possible but let me know if not! We do have plans to improve the APIs for targetting sublayers

[george-apazidis]

@tomduncalf-figma - Thanks for the quick feedback! Yes, renaming instances fixed the issue. However, requiring designers to manually rename layers for each instance of repeated components creates maintenance overhead. A more robust API for targeting sublayers would be preferable to relying on specific naming conventions. Looking forward to the planned API improvements!