I've been using the Figma MCP server with Claude Code to build a design-to-code workflow, and I've hit what feels like a significant gap in the `generate_figma_design` (html-to-design) capture tool. I'd love to see this addressed and wanted to share the use case in detail.
The current behavior
When generate_figma_design captures a rendered web page, it converts everything to raw Figma geometry — frames, rectangles, and text nodes. Even if the page is built entirely from your published design system components (Button, Tag, Checkbox, etc.), and even if those components have Code Connect mappings configured, the capture output has no awareness of them. You get a pixel-faithful snapshot, but it's "dead" — no component instances, no variable bindings, no variant properties.
The gap this creates
Code Connect already establishes a bidirectional relationship between Figma components and code components. The metadata is there. But generate_figma_design doesn't use it. Here's a concrete example of where this hurts:
I wanted to create a Tag component in our V4 design library. Our engineering team already has a Tag.js component with well-documented variants (intent: default/primary/success/warning/danger, sizes, round, removable, icon slots). I used generate_figma_design to capture the rendered Tag variants from our Storybook/prototype into the Figma file as a starting point.
A designer still has to manually rebuild the entire component from scratch using the capture only as a visual reference, defeating the purpose of having Code Connect set up in the first place.
What we'd love to see
When generate_figma_design processes a captured page and encounters an HTML element that maps to a known Figma library component via Code Connect, it should:
1. Instantiate the actual Figma component rather than rendering raw geometry
2. Set the correct variant properties based on the props present in the rendered HTML (e.g. a <Tag intent="success"> becomes a Tag component instance with Intent=Success)
3. Respect variable bindings already defined on the component — colors, typography, spacing tokens should all resolve to the correct library variables automatically
This would close the loop on what Code Connect promises. Right now Code Connect helps engineers get accurate code from Figma designs. With this change, it would also help designers get accurate Figma designs from running code.