Skip to main content
Question

Changing 'external' library mode

  • October 18, 2024
  • 3 replies
  • 97 views

Regi
  • Active Member
  • 20 replies

Hello,

I’m working on a plugin for changing collection modes.

Using figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync() I get the available collections, but they are not returned as collection objects, therefore I can not use them with setExplicitVariableModeForCollection directly, as far as I can tell. Since that requires a collection object.

Furthermore the getAvailableLibraryVariableCollectionsAsync() only provides the library keys and not an ID. What is the actual logical way to go about this? Considering my library is not a local library that I want to change a mode for.

Thank you.

This topic has been closed for replies.

3 replies

Gleb
  • Power Member
  • 4710 replies
  • October 18, 2024

Posted this on plugin devs discord previously, reposting here. It’s very convoluted.

  1. Fetch All Remote Collections: Use getAvailableLibraryVariableCollectionsAsync() to get the list of remote collections.

  2. Import Variables from Remote Collections: Use getVariablesInLibraryCollectionAsync() to fetch variables from each remote collection.

  3. Import a Single Variable by Key: Import a variable using importVariableByKeyAsync() to bring it into the local document context.

  4. Get the Local Variable’s variableCollectionId.

  5. Get the Variable Collection by ID: Use getVariableCollectionByIdAsync() to fetch the collection and its modes.

async function getRemoteCollectionsWithModes() {
    // Step 1: Get all available remote library variable collections
    const libraryCollections = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();
    
    const remoteCollections = [];

    for (const libraryCollection of libraryCollections) {
        try {
            // Step 2: Get variables from each library collection
            const variables = await figma.teamLibrary.getVariablesInLibraryCollectionAsync(libraryCollection.key);

            if (variables.length > 0) {
                // Step 3: Import a single variable from the collection
                const importedVariable = await figma.variables.importVariableByKeyAsync(variables[0].key);

                const collectionId = importedVariable.variableCollectionId;

                // Step 4: Get the variable collection by its ID to access the modes
                const variableCollection = await figma.variables.getVariableCollectionByIdAsync(collectionId);

                // Add the collection and its modes to the result array
                remoteCollections.push(variableCollection);
            }
        } catch (err) {
            console.error(`Failed to process collection: ${libraryCollection.name}`, err);
        }
    }

    return remoteCollections;
}

// Example usage
getRemoteCollectionsWithModes().then(remoteCollections => {
    console.log(remoteCollections);
});

This is for getting the modes and collections, then you can use them to set modes just like with local collections.

Here is the plugin I built with this, it’s called Quick Mode and it allows you to switch modes on selected objects using the quick actions menu without having to dig through the props panel: https://www.figma.com/community/plugin/1405229225049855076/quick-mode


tank666
  • 4873 replies
  • October 18, 2024

I previously described the logic in this thread:


Gleb
  • Power Member
  • 4710 replies
  • October 18, 2024

I wish I saw this before 😆 Would’ve saved me a couple hours tinkering with this to get the code above.


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