Building a Data Table in Figma and Using Code Connect

Hello everyone,

I’m currently exploring how to structure a Data Table component in Figma so it maps cleanly to code using Code Connect, particularly with the goal of enabling AI-assisted implementation.

My current component architecture is:

• Data Table (root)
  • Table Row
    • Cell (size variants)
      • Cell Type (e.g., text, text button, icon button, checkbox, icon, tag, etc.)

The challenge I’m running into is how this level of nesting translates through Code Connect. Ideally, I’m aiming for a 1:1 mapping between Figma components and the codebase so developers can select a composed table in a design and prompt an AI agent (e.g., Claude) to generate a reliable implementation.

Has anyone developed a scalable approach for structuring Data Table components in Figma that pairs well with Code Connect?

Appreciate any guidelines, feedbacks, and suggestions.