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.

7

@dvaliao anything new here?

8

Hey All, sorry for previous confusion!

support-share@figma.com is not an actual support email address, but rather an account that our support team uses to look at files and prevent adding new editors to your current plan.

If you’re still experiencing this bug, please reach out here: https://help.figma.com/hc/en-us/requests/new

Be sure to use your Figma account email, include a link to the file, provide your plugin code, and share it with support-share@figma.com, so the team can take a closer look.