figma.children() does not descend into intermediate frames to resolve connected instances

[micahgodbolt]

In slot-based component systems (like Fluent UI), Figma components commonly use intermediate frames as layout containers for React prop slots. figma.children() only resolves direct children of the component, so connected instances nested inside those frames cannot be reached.

Current behavior

Given this structure:

ChatInput (COMPONENT with code connect)
├── Toolbar (FRAME) ← direct child
│ ├── Button ← INSTANCE with Code Connect
│ └── Button ← INSTANCE with Code Connect
└── Button container (FRAME)
└── Button ← INSTANCE with Code Connect

• figma.children("Toolbar") — passes validation, but renders {} because the frame has no Code Connect
• figma.children(["Button"]) — fails validation: The layer does not exist on the Figma component because the instances are grandchildren

Expected behavior

figma.children("Toolbar") should descend into the named frame and render Code Connect snippets for the connected instances inside it, OR a { recursive: true } option should be available to opt into this behavior.

Why this matters

The "wrapper frame as React slot" pattern is standard in design systems. Requiring designers to either remove layout frames or adopt a special "slot component" convention just to satisfy Code Connect creates friction that doesn't scale across a component system. The current behavior makes figma.children() effectively unusable for any component that uses frames for layout.

Workaround

Hardcode static JSX in the example function instead of using figma.children().

[islobodiuk-figma]

hey @micahgodbolt, thanks for reaching out.
I assume you're using the figma.children() function from the html parser? We're aware that's limiting.

We're releasing a new version and refreshed documentation for our template-based approach. While this is a slightly different paradigm to framework-native Code Connect (like 'html'), it's much more flexible and allows you to represent any code you like. The docs can be found here: https://developers.figma.com/docs/code-connect/no-parser/

With this approach, you could make use findConnectedInstances with the traverseInstances option.
Something like the following should do the work:

const buttons = figma.selectedInstance.findConnectedInstances((n) => n.name === "Button", { traverseInstances: true})

We're investing in this template-based approach more so would be very interested to hear if this is useful or if you have any feedback!

[micahgodbolt]

@islobodiuk-figma Yeah, i'm able to use findConnectedInstances to find all the buttons and place them into the template. The problem is that its pretty manual and error prone. Rigth now there are 4 buttons, 2 in the first slot, then 1 and 1, so I can use findConnectedInstances to get them all, but its just an array of all the code connected controls. If a design is created with only 1 button in the first slot, all of the code gets off by 1. Recursive is really what I need. Go into THIS node (Toolbar) and render out any connected item inside, then go to the next node and do the same thing.

[micahgodbolt]

This actually seems to work okay. I can get to the button inside of the Button container frame. So we're getting closer. Not as much of a fan of the API. The jsx API looked cleaner, treating things more like props. Would love to chat about making that work with this v2 api

const sendButtons = instance.findConnectedInstances(
  (n) => n.hasCodeConnect(),
  { path: ["Button container"], traverseInstances: true }
);

[micahgodbolt]

Yup, this all seems to work as expected. I can dive into Toolbar and flatMap back everything in that path.

  // traverseInstances: true resolves grandchildren through intermediate layout frames
  // path: ["FrameName"] scopes results to instances whose parent frame has that name

  const toolbarButtons = instance.findConnectedInstances(
    (n) => n.hasCodeConnect(),
    { path: ["Toolbar"], traverseInstances: true }
  );
  

  return {
    example: figma.code`
      <MyComponent
        contentBefore={<>${toolbarButtons.flatMap((b) => b.executeTemplate().example)}</>}
        send={${sendButton[0]?.executeTemplate().example}}
      />
    `
  };

This follows our slot approach to allow for

<Input toolbar={<><Button1/><Button2/></>} />

[micahgodbolt]

All that I'd need to make the JSX work (much prefered considering), would be to make children chainable

  props: {
     toolbar:       figma.children("Toolbar").children(),
     actions:       figma.children("Input").children(),
     send:          figma.children("Button container").children(),
}

that'd map SUPER well to how we take all the JSX passed into toolbar and place it into a div with class toolbar

[mryechkin]

Thanks for sharing your solution @micahgodbolt! I was stuck on a similar issue, and yours set me on the right path to fix it.

We're releasing a new version and refreshed documentation for our template-based approach

@islobodiuk-figma this is great to hear - do you have a timeline for when we can expect it?

[islobodiuk-figma]

Thanks for confirming, @micahgodbolt, that this approach is viable, even if it’s not your preferred option.

I appreciate the feedback & suggestion, and will share it with the team. Our goal is to ensure the template-based approach is both powerful and easy to use.