code-connect
code-connect copied to clipboard
Figma Code Connect doesn't work.
Title: Code Connect (Vue/HTML, monorepo) — “No Code Connect files found” + template ParserError
CLI: figma -V → 1.3.5
OS: Windows 11 Home Single Language — 10.0.26100 (Build 26100)
Project: Vue 3 (HTML parser), monorepo (packages/**/src/**)
Config (repo root figma.config.json):
{
"codeConnect": {
"parser": "html",
"include": ["packages/**/src/**/*.figma.ts"],
"exclude": ["**/dist/**", "**/node_modules/**"],
"label": "Vue 3"
}
}
Mapping file path:
packages/components/src/figma/default-button.figma.ts
Figma node URL (main component):
https://www.figma.com/design/E1fhIWXU1sQRP4ZItKgQu4/GDS-v3.16.1-----Zeta-Hacks-?node-id=27-5765
Mapping (minimal repro):
import figma, { html, text } from '@figma/code-connect/html';
figma.connect("https://www.figma.com/design/E1fhIWXU1sQRP4ZItKgQu4/GDS-v3.16.1-----Zeta-Hacks-?node-id=27-5765", {
props: {
text: figma.string("Text"),
leftIconInstance: figma.instance("Left Icon instance"),
rightIconInstance: figma.instance("Right Icon instance"),
iconOnlyInstance: figma.instance("Icon only instance"),
},
example: (p) => html`<gds-button>${text(p.text)}</gds-button>`,
imports: ["import { GdsButton } from '@your-scope/button'"]
});
Steps (CMD):
-
cd "C:\Users\mayan\OneDrive\Desktop\Figma Code\galaxy-design-system-main" -
set FIGMA_ACCESS_TOKEN=figd_xxxxxxxxxxxxxxxxx -
npx figma connect publish(Also tried:npx figma connect create "<node-url>"then publish.)
Actual result:
- Often: “No Code Connect files found …” (even with file present & glob above).
- When using conditionals inside
html\...``: ParserError — Expected a call expression as a placeholder in the template, got ConditionalExpression. Replaced withtext(...)\calls to avoid conditionals.
Questions:
- Are
?:/&&conditionals unsupported inside${ ... }for HTML templates? - For HTML/Vue projects, should we avoid the interactive wizard and use only
create/manual files? - Is my monorepo
includeglob correct, or is there a better recommended pattern?
Thanks!