Code connect preview not showing

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 ​@michalshawn

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.

Hi Hansen_Andrew,

Good catch — you're right, if you're using the new figma.code export format, you don't need a traditional figma.connect() call in the same way. The new Template API restructures that entirely.

Regarding the discrepancy between the right panel and the Component behavior modal — this is actually a meaningful distinction worth digging into. The right panel preview renders the default state of your connected template, whereas the modal dynamically re-evaluates your template logic as you toggle properties. So a template that returns a valid output for the default state can still silently fail on specific property combinations — which is likely why it looks connected but the snippet disappears inside the modal.

A few things worth verifying given your setup:

Empty or undefined branches — go through each property combination in your template and make sure no conditional path resolves to an empty string, undefined, or null. The modal won't throw an error; it'll just show nothing.

Property name matching — double-check that the property names in your template exactly match what's defined in Figma (case-sensitive, including spaces). A mismatch won't break the default render but will silently drop specific toggle states.

Nested variant logic — if you have boolean or instance-swap properties interacting with each other, the modal tests them in combination. A path that works in isolation may not handle combined states.

As for pre-publish validation — you're right that there's no built-in dry-run flag in the CLI currently. One workaround some people use is publishing to a separate throwaway Figma file first just for testing. Not ideal, but it does give you a safe sandbox before touching the real library.

Would sharing a snippet of your template help? Happy to take a look at the logic with you.