Skip to main content
Andrew16
Andrew16
Active Member
September 28, 2026
Question

Losing hope - has anyone actually have any luck with Figma Make code components for Figma Sites? I can't even make a dark/light mode switch toggle

I have wasted a good three or four hours venturing with code components for the first time for Figma Sites. 

I would dare ask anyone to recreate the following two code components:

  1. A dark mode / light mode switch in the hope that Figma site should be able to “switch” therefore from Dark to Light Mode according to the tokens/ variable modes.  
  2. An animated header as code component, a simple animated header that can be placed anywhere on canvas, with height set to hug to contents, width dynamic to accommodate the text input, and with obviously - a text input published parameter alongside simple animation settings. 

And see how much hallucinations, refusal galore(s) in return. 

I am simply losing hope in Figma AI in general. 

5 replies

djv
Figmate
djv
Community Support
September 30, 2026

Hey @Andrew16, thanks for reaching out!
 

I understand how much this must be slowing down your workflow, and I can only imagine how frustrating that is. Both requests sound reasonable, so the repeated refusals and incorrect results are definitely not the experience we want you to have.
 

For the dark/light toggle, one temporary solution is to use a regular layer or frame with an interaction that switches the variable mode, rather than handling the entire interaction inside the code component.
 

The animated header should also be able to expose editable text and animation settings as component properties. Could you share the exact prompts you used and screenshots or a short recording of the responses or output you received? It would also help to know whether the same prompts fail in a new Sites file.
 

That’ll help us separate a possible variable-mode limitation from a Make output-quality issue and get this in front of the right team. Let us know, and we can continue troubleshooting this together.

Andrew16
Andrew16Author
Active Member
September 30, 2026

 

​@djv 
thank you for reaching out.my response as below in two sections. 

 

1 of 2
The Dark / light mode toggle switch

Here as you can see the initial prompt, the result it gave, and the AI’s last response (in two screenshot parts) as I was close to giving up with re-prompting over and over again. 
 

 

 

“For the dark/light toggle, one temporary solution is to use a regular layer or frame with an interaction that switches the variable mode, rather than handling the entire interaction inside the code component.”

 

^ can you elaborate what this means? I currently have this code component sitting inside my navigation component which is the most intuitive and familiar placement. 

 

2 of 2
The animated header code component


Below is for the animated header component. My biggest complaint here is why does code component are “fixed” in both height and width. No matter how much I prompted the AI to make it dynamic / eg hug to contents - it continuously refuses to do that. 

There is so much quarter-and-half-baked features here.


 

Andrew16
Andrew16Author
Active Member
September 30, 2026

I have another problem. 

Upon publishing  all my mobile and tablet breakpoints have gone completely awol. Nothing retained whatsoever in terms of size, height, widths overrides. 

djv
Figmate
djv
Community Support
October 1, 2026

Hey @Andrew16, thanks for sharing this additional issue!
 

If your mobile and tablet overrides were retained in the editor before publishing but are no longer reflected afterward, I understand how concerning that must be, especially after the time you’ve already spent building each breakpoint.

 

Could you confirm whether the overrides are still visible in the Sites editor and Preview, but missing only from the published site? Or did publishing also remove them from the editor itself? I’d recommend creating a duplicate of the file before making any additional changes or rebuilding the breakpoints.

 

To clarify my earlier temporary solution, your toggle can remain inside the navigation. You would place the code component inside a regular Figma frame and apply the On click → Set variable mode interaction to that surrounding frame. The frame would handle the mode change while the code component remains the visual toggle. I understand this isn’t equivalent to the code component controlling the variable mode directly.

 

With the fixed sizing and publishing behavior happening in the same file, the best next step is for our team to review the setup directly. Would you be able to share a duplicate test file with us, along with the published site URL or a short recording showing the editor or Preview compared with the published result? I can help get you connected with the team, or you can file a bug report directly. 

Andrew16
Andrew16Author
Active Member
October 1, 2026

​@djv 


I have decided to move on / move entire build to Framer®. . 

Consider this thread closed. Perhaps my entire site build was bricked all the way from the start.  

Imagine having built all the way close to rough MVP. Then only upon publishing - can of worms everywhere on that last minute - tablets and mobiles just look out of whack and never look consistent in the editor. 


Not a happy outcome. At least this is for a personal build. Imagine if this is a client project. Regards Andy.

Terms & ConditionsAccessibility statement