Add option to specify a named slot when using figma.children

[cadamsdev]

figma cli version: 1.3.1

Currently when using figma.children there’s no option to specify a slot on the HtmlTemplateString.

example

figma.connect("<DS_BUTTON>", {
  variant: { Icon: true },
  props: {
    iconInstance: figma.children('ds-icon')
  },
  example: ({ iconInstance }) =>
    html`
      <ds-button>
        ${iconInstance}
      </ds-button>
    `,
});

result

<ds-button type="primary" text="Button">
  <ds-icon size="medium"></ds-icon>
</ds-button>

what we need (the slot="icon" added)

<ds-button type="primary" text="Button">
  <ds-icon slot="icon" size="medium"></ds-icon>
</ds-button>

Note: There is a workaround but it’s not maintainable. If the props on ds-icon change, we'll have to go update the usage in all the other figma connect files.

workaround example

figma.connect("<DS_BUTTON>", {
  variant: { Icon: true },
  props: {
     iconProps: figma.nestedProps('ds-icon', {
         size: figma.enum("Size", {
          small: "small",
          medium: "medium",
          large: "large",
          "x-large": "x-large",
        }),
    }),
  },
  example: ({ iconProps }) =>
    html`
      <ds-button>
        <ds-icon slot="icon" size=${iconProps.size}></ds-icon>
      </ds-button>
    `,
});

example

<ds-button type="primary" text="Button">
  <ds-icon slot="icon" size="medium"></ds-icon>
</ds-button>