I’m using the framework agnostic Template API (moved away from the React specific approach) and the CLI (v1.4.3) to publish code connect files to our library.
The publishing succeeds and the code connect preview displays in the right panel when switching to dev mode. When I open the “Component behavior” modal, the code connect preview snippet does not display when toggling properties within the component. It does show the component as “connected” within the modal as well.
I’m wondering if anyone else is having this issue.
Question
Code connect preview not showing
I’m using the framework agnostic Template API (moved away from the React specific approach) and the CLI (v1.4.3) to publish code connect files to our library.
The publishing succeeds and the code connect preview displays in the right panel when switching to dev mode. When I open the “Component behavior” modal, the code connect preview snippet does not display when toggling properties within the component. It does show the component as “connected” within the modal as well.
I’m wondering if anyone else is having this issue.
Hi Hansen_Andrew,
I've seen this behavior before with the framework-agnostic Template API. Here are a few things worth checking:
1. Template prop mappings When toggling properties in the "Component behavior" modal, the preview snippet relies on your template correctly mapping Figma properties to code props. Double-check that every variant/property in your component has a corresponding entry in your `figma.connect()` call.
2. CLI version – You mentioned v1.4.3. It's worth checking if there's a newer CLI release, as there have been fixes around property-driven preview rendering in recent versions.
3. Template syntax With the framework-agnostic API, make sure your template literals are returning a non-empty string for every property combination. If a conditional branch resolves to `undefined` or an empty string, the panel can go blank without throwing an error.
4. Re-publish after changes Sometimes the preview cache doesn't refresh. Try unpublishing and republishing the Code Connect file, then hard-refreshing the Figma file in the browser.
If none of the above helps, it would be useful to share a minimal snippet of your `figma.connect()` template so others can spot any edge cases.
I’m using the framework agnostic Template API (moved away from the React specific approach) and the CLI (v1.4.3) to publish code connect files to our library.
The publishing succeeds and the code connect preview displays in the right panel when switching to dev mode. When I open the “Component behavior” modal, the code connect preview snippet does not display when toggling properties within the component. It does show the component as “connected” within the modal as well.
I’m wondering if anyone else is having this issue.
Hi Hansen_Andrew,
I've seen this behavior before with the framework-agnostic Template API. Here are a few things worth checking:
1. Template prop mappings When toggling properties in the "Component behavior" modal, the preview snippet relies on your template correctly mapping Figma properties to code props. Double-check that every variant/property in your component has a corresponding entry in your `figma.connect()` call.
2. CLI version – You mentioned v1.4.3. It's worth checking if there's a newer CLI release, as there have been fixes around property-driven preview rendering in recent versions.
3. Template syntax With the framework-agnostic API, make sure your template literals are returning a non-empty string for every property combination. If a conditional branch resolves to `undefined` or an empty string, the panel can go blank without throwing an error.
4. Re-publish after changes Sometimes the preview cache doesn't refresh. Try unpublishing and republishing the Code Connect file, then hard-refreshing the Figma file in the browser.
If none of the above helps, it would be useful to share a minimal snippet of your `figma.connect()` template so others can spot any edge cases.
Thanks for replying
If I’m using the new template API version, do I need to still have a `figma.connect()`? Instead, I’m currently using the figma.code process within the new export format
I’ll have to double check the empty string case. That may be something that is causing an issue for some variants. I’m curious why it would display every variant correctly in the right panel, but causing an issue in the modal? It’s using the same logic.
I’ve checked for updates to the CLI and installed the latest as well.
Much appreciated providing some information on what to check. I’m not aware of any additional configuration to add a little bit more validation before publishing without publishing to a test library first.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.