Skip to main content
Question

Unable to Access Modes of External Libraries in Figma Plugin API

Orbstea

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!

5 replies

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • 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
  • Orbstea
  • Author
  • New Member
  • 4 replies
  • 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.

A

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
  • Orbstea
  • Author
  • New Member
  • 4 replies
  • 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
  • 9 replies
  • 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.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings