Variables imported with importVariableByKeyAsync always have scopes set to ['ALL_SCOPES']

Plugin and Widget API Bugs
, ,
1

Hey team! Love your work with the plugin API!

Just reporting the following issue: I batch import all the variables from my design system’s library on launch of my plugin using a combination of:

1. getAvailableLibraryVariableCollectionsAsync()
2. getVariablesInLibraryCollectionAsync()
3. importVariableByKeyAsync()

I would love to use scopes to determine which variables can be applied where. Unfortunately, every variable’s .scope property returns the array ['ALL_SCOPES'] regardless of what the variable’s actual scopes are configured to. I know the scopes are configured correctly because the variables available in the Variable Picker UI inside of the editor are constrained as I would expect, but the plugin API is consistently just returning ALL_SCOPES.

Let me know if I can provide any more info! Thanks!

3

Thanks for flagging, @Darragh_Burke!

We’ve shared this with our team to investigate. Are you able to provide your plugin code, a link to your file, and share it with support-share@figma.com, so they can take a closer look?

4

Will share the code with that email address! I can also share it here:

async function getVariables() {
  const startTime = Date.now();
  const collections: LibraryVariableCollection[] =
    await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();
  const variables: Variable[] = [];
  const requests = [];
  const variableTasks: Promise<Variable>[] = [];
  for (const collection of collections) {
    const request = figma.teamLibrary.getVariablesInLibraryCollectionAsync(collection.key);
    request.then((result) => {
      for (const variable of result) {
        const variableImport = figma.variables.importVariableByKeyAsync(variable.key);
        variableImport.then((res) => {
          variables.push(res);
        });
        variableTasks.push(variableImport);
      }
    });
    requests.push(request);
  }
  await Promise.all(requests);
  await Promise.all(variableTasks);
  console.log(
    `Imported ${variables.length} variables from collections: [${collections
      .map((col) => col.name)
      .join(', ')}] in ${Date.now() - startTime}ms`
  );
  return {
    variables,
    collections,
  };
}

If I then print the variable scopes like follows, I’ll just get [‘ALL_SCOPES’] for every variable.

variables.forEach(variable => console.log(variable.name, variable.scopes)

Unfortunately, I can’t really share the library I’m using as it’s part of our organization’s internal design system. However, I would be happy to jump on a call or record my screen to showcase the bug.

5

Got the following reply from support-share@figma.com:

Hello myemail,

We’re writing to let you know that the group you tried to contact (support-share) may not exist, or you may not have permission to post messages to the group. A few more details on why you weren’t able to post:

  • You might have spelled or formatted the group name incorrectly.
  • The owner of the group may have removed this group.
  • You may need to join the group before receiving permission to post.
  • This group may not be open to posting.

If you have questions related to this or any other Google Group, visit the Help Center at Groups - Google Workspace Admin Help.

Thanks,

figma.com admins

6

That’s odd - thanks for letting us know!

We’re looping in someone from the team to take a look at your code. They’ll reply here as soon as they can.