Library assets may need to be republished for modename mode to show

Hi there,

Thanks for the post. I’m checking this with our internal team and will get back to you when I have anything I can share with you.

Thanks for your patience!
Toku

@Justin_Trout thanks for your patience.

As I checked with our internal team, there might be related to an existing issue. They want to investigate if it’s a bug or not, so could you reach out directly to the support team with a copy of your file: https://help.figma.com/hc/en-us/requests/new?

Please make sure you use the email associated with your Figma account, include links to the file in question, and share access with support-share@figma.com. Don’t worry, inviting us to view your file won’t impact your billing.

If there is anything we can do, please feel free to let us know.

Thanks!
Toku

Thank you, I have reached out to support using the link you provided and referenced this thread.

I’m having this same issue with my design library file. i’ve painstakingly checked that every page and element is set to default modes but i’m still getting this same error.

Hi there,

Could you also reach out to our support team?

Thanks,
toku

i have. i’ve tracked at least some of the issue to a haunted drop shadow style which is used everywhere but only breaks in certain areas… i’ll work with whoever picks up the ticket.

Hey @Kingery_Michael - I saw your ticket in our system, and that someone on our tech quality team is working with you now. I consulted with some members of the team, and I think it best that the conversation be continued via email to avoid any confusion on communication.

Let me know if I can help with anything else in the meantime!

Hi, y_toku. I also encounter the same issue, could you help me to investigate it too?

Hi there,

Have you tried this?

If the issue persists, could you reach out to our support team?

Thanks,
Toku

yoyoyo i have the same issue/ what the F*ck Figma? I pay you to play not to stop working!

same issue after creating a third mode. I feel frustrated while in rush and now I can’t change the brand color for my file.

Just check the components. For some reason, the link to master components is broken.

I’m having the same issue and nothing solve it 😪

Does anyone have a solution yet? Do you, in your library components has hidden components like _components or .components? These hidden components seem will not update if you publish your library it seems

I ran into this issue today. Is there any update on this? :-(

Hmmm, that’s not really an option for me, so Figma should consider this a bug tbh…

i also ran into this problem through a huge setup - after adding new modes we cannot use them in the target file seeing the same exclamation mark icon right besides the mode-name.

How do I “set all pages in the library file to the default mode at the page-level and republish”?

In our setup I was able to track this issue to a rogue variable in one of our most basic components that had at some point become disconnected from the library variable collection. Reassigning this connection fixed it.

Offending variable - you can see it does not light up in the library collection on the left when selected:

After fixing - it lights up correctly when selected:

Here’s a bit of code I used to find any offending elements that had the issue I outlined above. If you select your offending component/element and run this in Figma’s console, it will:
1. Fetch the color vars from your libraries
2. Check all nodes within the current selection that have color variables assigned to any value
3. Reference all color aliases found in the selection against the library vars.
4. Select all elements that have a stale variable reference (ie. anything not found in libraries added to the file - note that this also flags references to variables defined in the file itself).
 

// From the current selection, find COLOR variables used on fills/strokes
// that are NOT present in any enabled library variable collection.
// Logs them and selects the nodes that use them.

(async () => {
  const selection = figma.currentPage.selection;
  if (!selection.length) {
    console.log("No nodes selected.");
    return;
  }

  // 1. Get all variable keys from enabled library collections (COLOR only)
  const libraryCollections = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();

  const libraryColorVariableKeys = new Set();

  for (const coll of libraryCollections) {
    const varsInColl = await figma.teamLibrary.getVariablesInLibraryCollectionAsync(coll.key);

    for (const libVar of varsInColl) {
      if (libVar.resolvedType === "COLOR") {
        console.log(`Adding ${libVar.key}`);
        libraryColorVariableKeys.add(libVar.key);
      }
    }
  }

  // 2. Walk selection subtree and collect bound COLOR variables on fills/strokes
  const allNodes = [];
  const walk = (node) => {
    allNodes.push(node);
    if ("children" in node) {
      for (const child of node.children) walk(child);
    }
  };
  for (const node of selection) walk(node);

  const seenVarIds = new Set();
  const nonLibraryVars = new Map(); // varId -> { variable, nodes: Set<SceneNode> }
  const nodesWithNonLibraryVars = new Set();

  for (const node of allNodes) {
    if (!("boundVariables" in node) || !node.boundVariables) continue;
    const bv = node.boundVariables;

    console.log("Processing node", node.id);

    const aliases = [];
    if (Array.isArray(bv.fills)) {
      for (const a of bv.fills) if (a) aliases.push(a);
    }
    if (Array.isArray(bv.strokes)) {
      for (const a of bv.strokes) if (a) aliases.push(a);
    }

    for (const alias of aliases) {
      if (!alias || alias.type !== "VARIABLE_ALIAS") continue;

      const varId = alias.id;
      // Fetch variable once per id
      let record = nonLibraryVars.get(varId);
      let variable = record?.variable;

      if (!seenVarIds.has(varId) && !variable) {
        seenVarIds.add(varId);
        variable = await figma.variables.getVariableByIdAsync(varId);
        if (!variable || variable.resolvedType !== "COLOR") continue;

        const isInLibrary = libraryColorVariableKeys.has(variable.key);
        if (!isInLibrary) {
          record = { variable, nodes: new Set() };
          nonLibraryVars.set(varId, record);
        }
      }

      if (record) {
        record.nodes.add(node);
        nodesWithNonLibraryVars.add(node);
      }
    }
  }

  console.log("Enabled library variable collections:");
  libraryCollections.forEach((c) => {
    console.log(`- ${c.libraryName} / ${c.name}`);
  });

  if (!nonLibraryVars.size) {
    console.log("No COLOR variables found in the selection that are missing from all enabled library collections.");
  } else {
    console.log("COLOR variables used in the selection that are NOT in any enabled library variable collection:");
    for (const { variable, nodes } of nonLibraryVars.values()) {
      console.log(
        `- ${variable.name} (id: ${variable.id}, key: ${variable.key}, collectionId: ${variable.variableCollectionId})` +
          ` — used on ${nodes.size} node(s)`
      );
    }
  }

  // 3. Select nodes that use non-library color variables
  const nodesArray = Array.from(nodesWithNonLibraryVars);
  if (nodesArray.length) {
    figma.currentPage.selection = nodesArray;
    figma.viewport.scrollAndZoomIntoView(nodesArray);
  }
})();