CodeConnect gets confused by outdated storybook design references.
Code Connect validation uses outdated Storybook node IDs instead of .figma.tsx
Note: URLs and design system names have been redacted for privacy. Node IDs have been obfuscated but kept distinct to preserve the technical issue details.
Environment:
- Figma Code Connect: v1.3.4
- OS: macOS 15.6
Issue:
Validation was failing because Code Connect was using an outdated Figma node ID from a Storybook story instead of the correct node ID specified in the dedicated .figma.tsx file.
Error received:
Validation failed for Button (https://www.figma.com/design/[REDACTED]/Example-Design-System?node-id=1234-5678&m=dev): corresponding node is not a component or component set
Generated .figma.tsx contained correct node:
figma.connect(
Button,
"https://www.figma.com/design/[REDACTED]/Example-Design-System?node-id=9876%3A5432",
// ... props mapping
)
Root Cause & Fix
The CLI was prioritizing an outdated node ID (1234-5678) from a Storybook story over the correct node ID (9876:5432) in the dedicated Button.figma.tsx file.
Conflicting Storybook configuration:
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/design/[REDACTED]/Example-Design-System?node-id=1234-5678&m=dev',
},
},
Fix: Removing the outdated node-id=1234-5678 from the Storybook parameters resolved the validation issue.
Proposed Solution
The .figma.tsx file should take precedence over Storybook stories when determining which Figma node to validate against. Since .figma.tsx files are specifically created for Code Connect, they should be considered the authoritative source for node mapping rather than having Storybook stories potentially override them with outdated references.
+1 on this– I couldn't figure out why my publish was failing and turns out I had an outdated storybook design link. Removing it fixed this issue!