Skip to main content

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.

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 = s];

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(variablesb0].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


I previously described the logic in this thread:



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


Reply