Dev Mode imports include unmatched variant entries from nested Component Sets (JSX is correctly filtered, but imports are not)

[uthem150]

Summary

When a Figma Component Set OuterSet contains a nested Component Set InnerSet (as the content of one of OuterSet's variants),
and both have their own figma.connect() mappings, selecting an OuterSet instance in Dev Mode results in:

• ✅ JSX example — correctly shows the matched variant only
• ❌ Imports — includes the matched variant's imports plus all of InnerSet's variant entries' imports (including unmatched ones)

Variant restrictions are applied to JSX selection but not to import aggregation.

Reproduction

Figma structure

OuterSet                          (Component Set, variant: type ∈ {"text-only","with-icon"})
 └─ type="with-icon" variant
     └─ contains InnerSet         (Component Set, variant: iconPosition ∈ {"left","right"})

Code Connect (4 entries)

import { figma } from '@figma/code-connect/react';
import { Button } from './Button';
import { ButtonIconPosition } from './constants';

// OuterSet — type=text-only
figma.connect(Button, OUTER_URL, {
  variant: { type: 'text-only' },
  imports: ["import { Button } from '@design-system'"],
  example: () => <Button>Click</Button>,
});

// OuterSet — type=with-icon
figma.connect(Button, OUTER_URL, {
  variant: { type: 'with-icon' },
  imports: [
    "import { Button } from '@design-system'",
    "import { ChevronRightIcon } from '@design-system/icons'",
  ],
  example: () => <Button icon={ChevronRightIcon}>Click</Button>,
});

// InnerSet — iconPosition=left  (extra: ButtonIconPosition)
figma.connect(Button, INNER_URL, {
  variant: { iconPosition: 'left' },
  imports: [
    "import { Button, ButtonIconPosition } from '@design-system'",
    "import { ChevronRightIcon } from '@design-system/icons'",
  ],
  example: () => (
    <Button iconPosition={ButtonIconPosition.LEFT} icon={ChevronRightIcon}>Click</Button>
  ),
});

// InnerSet — iconPosition=right
figma.connect(Button, INNER_URL, {
  variant: { iconPosition: 'right' },
  imports: [
    "import { Button, ButtonIconPosition } from '@design-system'",
    "import { ChevronRightIcon } from '@design-system/icons'",
  ],
  example: () => (
    <Button iconPosition={ButtonIconPosition.RIGHT} icon={ChevronRightIcon}>Click</Button>
  ),
});

Steps

1. npx figma connect publish
2. Place an OuterSet instance, set type=with-icon
3. Open Dev Mode → Code Connect panel

Expected

import { Button } from '@design-system';
import { ChevronRightIcon } from '@design-system/icons';

<Button icon={ChevronRightIcon}>Click</Button>

Actual

import { Button } from '@design-system';
import { ChevronRightIcon } from '@design-system/icons';
import { Button, ButtonIconPosition } from '@design-system';

<Button icon={ChevronRightIcon}>Click</Button>

The third import (Button, ButtonIconPosition) comes from InnerSet's variant entries — but ButtonIconPosition is not used anywhere in the JSX. The wider the InnerSet's variant diversity, the more unused imports leak in.

Why split into 4 entries (rather than consolidating)

• iconPosition is only a property of InnerSet, not OuterSet — must be referenced via the inner mapping
• Variants produce structurally different JSX (different props), and the React parser doesn't support conditional rendering of props within a single example template

Also reproduces via MCP

The same union behavior is returned via Figma's MCP server — not just Dev Mode UI:

get_code_connect_map returns snippetImports with the unused entry:

{
  "snippetImports": [
    "import { Button } from '@design-system'",
    "import { ChevronRightIcon } from '@design-system/icons'",
    "import { Button, ButtonIconPosition } from '@design-system'"
  ],
  "snippet": "<Button icon={ChevronRightIcon}>Click</Button>"
}

This means AI coding agents using MCP also receive the unused imports.

Ruled out

• Local Code Connect file is correct: verified via npx figma connect parse — each entry's templateData.imports is minimal and correct
• Removing the outer mapping is not a workaround: outer instances then show "No Code Connect" (no fallback to inner mapping)

Suggested fix

When aggregating imports across figma.connect() entries for a Dev Mode display, apply the same variant restriction filter that's applied to JSX example selection.

Environment

• @figma/code-connect@1.4.4
• Parser: react

---

I suspect this issue might be similar to the one discussed in figma/code-connect#69.