Fetching styles from figma design system in libraries/assets

Ask the community
1

We are creating a plugin where we want to pull color and text styles from Figma design system in libraries/assets through Figma plugin API. But none of the solutions are working.

Here are the methods that i tried.

  1. I tried using fetch meta styles using Figma API. I added access token and fileId in the headers.
    Here is the URL format i used - ${baseUrl}/v1/files/${fileId}/styles/${styleId}
    I got a cors issue. So added api.figma.com in allowedDomains in manifest.json. But I am getting forbidden error message.

  2. Using the same API method, i tried fetching through teamId and components.
    Here is the URL format I used - ${baseUrl}/v1/teams/${teamId}/components
    But I am still getting forbidden error message.

  3. I tried using this method - getAvailableLibraryVariableCollectionsAsync()
    But I am getting this error - “Property ‘getAvailableLibraryVariableCollectionsAsync’ does not exist on type ‘PluginAPI’”

  4. I tried using this method - getVariablesInLibraryCollectionAsync()
    But I am getting this error - “Property ‘getVariablesInLibraryCollectionAsync’ does not exist on type ‘PluginAPI’”

Can you please help me get through this?

2

Hi! Figma engineer here.

For issues 1) and 2), it sounds like you’re having some trouble using the REST API. Some things to check:

  • Go to the REST API docs..
  • In the right-hand panel, there’s a tool “Try it out for yourself”. Try making the REST API requests in that tool. Do you get the same error?
  • Double-check the allowed domains syntax. It should look something like
"networkAccess": {
  "allowedDomains": ["https://api.figma.com"]
}
  • Double-check how you’re making the request. You should be able to make a request via the ui.html file and then post the results back to the plugin code.

For issues 3) and 4), double-check how you’re calling the plugin API.

  • The properties getAvailableLibraryVariableCollectionsAsync and getVariablesInLibraryCollectionAsync are under Figma.teamLibrary i.e. you can call Figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync. See plugin docs for reference.