How to take a figma component and transform each children in an array item

[nrenard]

I need to take each children from a figma component and use this data as an array have some way to do that?

Example code:

import React from "react"
import figma from "@figma/code-connect"
import { Accordion } from "@core"

const props = {
  items: figma.nestedProps('. Item', {
    content: figma.textContent('Center Area'),
  })
}

figma.connect(
  Accordion,
  "",
  {
    props,
    example: ({ items, ...rest }) => {
      return <Accordion 
        {...rest} 
        items={items} // [{ content: 'Text' }, { content: 'Text 2' }]
      />;
    },
  },
)

[karlpetersson]

Hey @nrenard! Currently nestedProps only selects a single child instance (we'll update the README to make this more clear), and so it can't be used to map props from multiple children. However, we're working on adding support for this use case so please stay tuned for that!

[fmal]

@karlpetersson any updates? ability to map props from multiple children would unlock so many useful mapping scenarios

For me the ideal API would look like this:

props: {
    children: figma.children(['Button'], props => (
        <ButtonGroup.Button {...props} />
      ))
}

This would give flexibility to map figma children to a different component in code and selectively map the props from figma