Skip to main content
Orbstea
Orbstea
New Member
August 17, 2023
Question

Unable to Access Modes of External Libraries in Figma Plugin API

  • August 17, 2023
  • 5 replies
  • 1083 views

Hello, Figma community!

I am working on a Figma plugin that needs to access the modes of both local and external library variable collections. However, I have encountered an issue where I am unable to access the modes of external libraries through the Figma Plugin API.

Here is the code I am using:

figma.on("selectionchange", async () => {
  console.log("Selection changed!");
  const selectedNodes = figma.currentPage.selection;
  if (selectedNodes.length > 0) {
    // Accessing modes for local variable collections
    const localVariableCollections = figma.variables.getLocalVariableCollections();
    localVariableCollections.forEach((collection) => {
      console.log("Local collection name:", collection.name);
      if (collection.modes) {
        collection.modes.forEach((mode) => {
          console.log("Mode:", mode.name);
        });
      }
    });

    // Accessing modes for external libraries
    const libraryCollections =
      await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();
    libraryCollections.forEach((collection) => {
      console.log("Library collection name:", collection.name);
      if (collection.modes) {
        collection.modes.forEach((mode) => {
          console.log("Mode:", mode.name);
        });
      }
    });
  }
});

Here are the logs from running the code:

Selection changed!
Local collection name: semantic colors
Mode: light
Mode: dark
Library collection name: Collection 1
Library collection name: Collection 2

As you can see, I am able to retrieve the modes for the local collection “semantic colors” (light and dark), but not for the external libraries “Collection 1” and “Collection 2”.

Is this a limitation of the Figma Plugin API, or am I missing something? If anyone has a solution or workaround to access the modes of external library variable collections, I would greatly appreciate it.

Thank you for your help!

This topic has been closed for replies.

5 replies

Gleb
Gleb
Power Member
August 17, 2023

Did you add team library permission to the manifest and enable the required libraries in the Figma UI in the current file?

figma.com
Orbstea
OrbsteaAuthor
New Member
August 17, 2023

Hello Gleb !

Thanks for your time! Yes, I’ve integrated the team library permission in the manifest and the libraries are enabled in the current file.

appsfactory.a.michel
April 9, 2024

Hey Rob, did you manage to find a solution that doesn’t involve the Figma rest api?
Its not clear to me why the mode names would not be included…

Orbstea
OrbsteaAuthor
New Member
April 9, 2024

Hey Michel !

I tried but did not succeed so I finally didn’t used external modes in my project 😅

qurle
qurle
New Participant
December 19, 2024

For those who still questioning

figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync() does not return good old VariableCollection[], but LibraryVariableCollection[]` which is just an array of descriptors. These descriptors have key, name of collection and name of library. Not modes and not even IDs.

In Swap Variables I used a workaround. I resolve a variable from the collection, and then get collectionId which allows to resolve normal VariableCollection and use modes, publish statuses, etc.

Example of code:

const libraryCollections = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync()
  for (const collectionDescriptor of libraryCollections) {
    console.log("Library collection name:", collectionDescriptor.name)
    const variables = await figma.teamLibrary.getVariablesInLibraryCollectionAsync(collectionDescriptor.key)
    if (variables.length === 0) {
      return
    }
    const collectionId = (await figma.variables.importVariableByKeyAsync(variables[0].key)).variableCollectionId
    const collection = await figma.variables.getVariableCollectionByIdAsync(collectionId)
    if (!collection.modes) {
      return
    }
    for (const mode of collection.modes) {
      console.log("Mode:", mode.name)
    }
  }

Can’t say it’s very performant: can take 2 seconds for a decent variable collection. I was looking for a better way to resolve collection from a team libraries, but no luck yet.
getVariableCollectionByIdAsync() is a bottleneck, so don’t use a lot.

Terms & ConditionsAccessibility statement