Skip to main content
Solved

PROBLEM WITH CODE LAYER

  • June 16, 2026
  • 7 replies
  • 91 views

Tommaso Pizzonia

I’m having an issue with code layers. As soon as I create one, it shows this error indicator, but I don’t see any actual error message. How can I fix this? I’m working on a project and this is a major problem for me.

Best answer by Tommaso Pizzonia

Hi Jaycee,

Quick update — it's resolved now, everything's working fine. Thanks a lot for your help and for taking the time to look into it!

Tommaso

7 replies

Jaycee Lewis
Figmate

Hey, ​@Tommaso Pizzonia 👋 Thanks for your post. I like to get us more details to work with. 

A helpful test:

  • Create a brand-new code layer with something minimal as a control (e.g. a plain `<div>Hello</div>`) and see if the error indicator still appears

A few quick questions:

  • Where is this happening — Figma Sites, or somewhere else?
  • Is the code in the layer something you wrote yourself, or was it generated (e.g. via Figma Make)? If generated, have you tried it with your own simple code too?
  • Does the indicator appear even on an empty or newly-created layer, before you add any code?

If you can also paste the exact code that's in the layer with an error (or confirm it's empty), that'll let us reproduce it on our end. Thanks!— Jaycee


Tommaso Pizzonia

Hi ​@Jaycee Lewis , thanks for the quick reply!

To answer your questions:

  • This is happening in Figma's code layer environment 
  • The code inside the layers was originally generated by Figma Make and then modified with AI.
  • Yes, the error indicator appears even on a brand-new, empty code layer, before adding any code. However, nothing shows up in the console — it stays clean, so there's no error message I can point to.

So the indicator seems to be there regardless of the content of the layer. Happy to share any specific layer's code if that helps you reproduce it, but the empty-layer case might be the clearest test since it rules out the code itself.

Let me know what else would be useful. Thanks!
Tommaso


Tommaso Pizzonia
  • Author
  • New Participant
  • Answer
  • June 16, 2026

Hi Jaycee,

Quick update — it's resolved now, everything's working fine. Thanks a lot for your help and for taking the time to look into it!

Tommaso


jamieskii
  • New Member
  • June 17, 2026

Can you tell me what the issue was? I’m having the same problem


Jaycee Lewis
Figmate

Hey hey ​@Tommaso Pizzonia 👋 You are very welcome! Happy to help any time.

And ​@jamieskii we’ll need more info:

A helpful test:

  • Create a brand-new code layer with something minimal as a control (e.g. a plain `<div>Hello</div>`) and see if the error indicator still appears

A few quick questions:

  • Where is this happening — Figma Sites, or somewhere else?
  • Is the code in the layer something you wrote yourself, or was it generated (e.g. via Figma Make)? If generated, have you tried it with your own simple code too?
  • Does the indicator appear even on an empty or newly-created layer, before you add any code?

If you can also paste the exact code that's in the layer with an error (or confirm it's empty), that'll let us reproduce it on our end. Thanks!— Jaycee


jamieskii
  • New Member
  • June 18, 2026

Hi ​@Jaycee Lewis,

 

It’s also happening with a new code layer and a simple code as <div>Hello</div>

 

It’s happening on Figma Sites. 

 

It was generating by figma make, but i also tried other code and i get the same error message. When i add it to my canvas i get a box with a red stroke and an exclamation point in the middle. It always appears whether or not it’s in an empty layer or the layer i want it on. 

 

this is the code i want to use:

import { useState } from "react";
import { ChevronDown } from "lucide-react";

export default function Layer() {
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState("Selecteer een optie");

  const options = ["Student", "Docent", "Onderwijs functie"];

  const handleSelect = (option: string) => {
    setSelected(option);
    setIsOpen(false);
  };

  return (
    <div className="flex items-center justify-center size-full p-8 bg-blue-600">
      <div className="relative w-full max-w-md">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="w-full bg-white text-gray-800 px-4 py-3 rounded-lg flex items-center justify-between hover:bg-gray-50 transition-colors"
        >
          <span>{selected}</span>
          <ChevronDown
            className={`w-5 h-5 transition-transform ${
              isOpen ? "rotate-180" : ""
            }`}
          />
        </button>

        {isOpen && (
          <div className="absolute w-full mt-2 bg-white rounded-lg shadow-lg overflow-hidden z-10">
            {options.map((option) => (
              <button
                key={option}
                onClick={() => handleSelect(option)}
                className="w-full text-left px-4 py-3 hover:bg-blue-50 transition-colors text-gray-800 border-b last:border-b-0 border-gray-100"
              >
                {option}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

 

 

 

 


Jaycee Lewis
Figmate

Hey, ​@jamieskii 👋 Thanks for the follow up. I grabbed your code and opened a new file. In this case, it worked without issue.

I am wondering if there is something local to your network or machine that is causing a conflict with the code layer working as expected. If it is persisting, I can help with opening a support ticket for your specific problem. Talk soon — Jaycee