Skip to main content
Question

Figma Agent struggles to use compositional component's nested component properties

  • August 12, 2026
  • 1 reply
  • 2 views
Matt_Gregg

Been testing out the Figma Agent using component library and have found it struggles to use nested component properties. While guidance for agents talks about buildng reusable blocks, it seems like this doesn’t work well with page-level compositions we use. There are page pattern components the agent fails to use nest components within. Here’s how it explains its failures - 

These are 2 of 3 patterns of failures agent was having building pages trying to use a page component and other compositional components. 

Pattern 2 — Complex nested prop objects on layout components (7 "Required dependency not found" failures)

Higher-order layout components like Layout/Record page, Page header, and Tabs expanded failed with "Required dependency not found." These components have deeply nested prop structures:

Page header: 8 props including boolean toggles (has Avatar, has Detail, has Actions), variant selectors (Breakpoint, layout), and nested sub-instances (Avatar, Labels, Header actions, Page header details)
Record page: wraps Page header + Tabs + content area, requiring coordinated props across multiple nested instances
Tabs expanded: internal Tab children managed by Num. of tabs variant — the agent tried to inject <ComponentTab> instances as JSX children instead
The "required dependency" error suggests the renderer couldn't resolve internal sub-component references when the agent passed complex prop objects like pageHeader={{layout:"blocks", breakpoint:"> xs",...}}.

Pattern 3 — Deeply nested prop object syntax (6 "strict parsing" failures)

Even when not hitting the slot or dependency issues, components with double-brace nested objects consistently fail strict parsing:

jsx code
<ComponentBox2 boxHeader={{headingStyle:"2",heading:"Staff..."}} />
<ComponentTile componentProps={{breakpoint:"> xs",state:"expanded",tile...}} />
The {{key:"value"}} syntax for nested component props hits parser limits, especially when combined with special characters like > xs in breakpoint values.

 

 

1 reply

Matt_Gregg
  • Matt_Gregg
  • Author
  • New Participant
  • August 13, 2026

The agent is explaining to me more about how it works and it seems to be at odds with the advice in that document to Build reusable blocks and patterns. 

Figma agent could be making this up, but when I ask it to break down causes for issues when components aren’t being used, it tells me this - 


The design agent's markup language favors composition over library adoption
The design agent composes layouts using an internal JSX-like markup. When it encounters a complex layout need (like a "Needs attention" list with multiple items), it tends to compose from primitives (frames, text, icons) rather than trying to instantiate a complex library component it may not fully understand the API of. It correctly used simpler, well-understood components (Omnibar, Button, Link, Label) but hand-built the more complex, page-level compositions.

 

The needs attention component is a container that has  2 properties and then nested component items with 2 properties each. It’s not very complex and similar in scope to the examples in the guidance document. I’m making the assumption the directions on ‘blocks’ and _examples would apply to components. 

Terms & ConditionsAccessibility statement