Skip to main content

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!

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


figma.com

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.

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…

Hey Michel !


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

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