Changing 'external' library mode

Plugin and Widget API Questions
1

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.

2

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

3

I previously described the logic in this thread:

4

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