Passing props to children

[cgatian]

The design team has made an IconSize component that swaps instances of icons out. Each icon is a standalone component without a size property. The IconSize component contains the size variants.

In code, each icon has a size property.

<SettingsIcon size="small" />

I'm having difficulty figuring out how to map IconSize to a child icon. This is as close as I could get. But I am unsure how to pass the size prop down to the icon child. Any thoughts?

figma.connect(
  'url-to-icon-size',
  {
    props: {
      size: figma.enum('Size', {
        Large: 'large',
        Medium: 'medium',
        Small: 'small',
      }),
      icon: figma.children('Icon Instance'),
    },
    example: ({ icon }) => <>{icon}</>,
  },
);

[sbourouis]

I have the same issue. I need to render the child component with properties passed to the parent

figma.connect(
  "...",
  {
    props: {
      content: figma.instance("⮑ content (any)"),
      label: figma.nestedProps('Label',{
        label: figma.string("✏️ label")
      }),
    },
    example: ({ label, content }) => html`${content} label="${label.label}" />`,
  },
)

I thought about using variant depending on the content property but variant doesn't work with instance name. It only works with strings and booleans

    variant: {
      "⮑ content (any)": 'CheckboxMultiple'
    },
    props: {
      content: figma.instance("⮑ content (any)"),
      label: figma.nestedProps('Label',{
        label: figma.string("✏️ label")
      }),
    },
    example: ({ label, content }) => html`<CheckboxMultiple label="${label.label}" />`,

It would be nice to have something like setProps, so we could do

figma.connect(
  "...",
  {
    props: {
      content: figma.instance("⮑ content (any)").setProps({
           label: figma.nestedProps('Label', {
               label: figma.string("✏️ label")
           }),
       }),
    },
    example: ({ content }) => html`${content}`,
  },
)

[chishancircle]

+1 I would appreciate having a way to pass or set props from the parent to the child 😄 In Figma there are some parent props that actually belong on the child instance in code

[j-mnizhek]

+1 Much needed for my team, too

[adbutterfield]

I'm also hitting this issue. We use render props quite a bit for passing props for accessibility attributes. Like:

  renderTitle: (renderProps) => <TitleText {...renderProps}>Some title</TitleText>

In Figma, this would be a component instance, so there's no way to pass the props in the example.

  renderTitle: (renderProps) => props.titleTextInstance // can't pass the props