GraphQL integration with Figma

Hi Hoping our team will go to the next level in industrialising our design practise by putting Datocms at the centre of our content. If we can integrate Figma with Datocms we will be able to centralise all our product copy and assets. That way as we journey through design we don’t save time on updating and copy paste errors copy as it changes between design and production. Both our platform and design system would reference the same copy.

There is a plugin to read GraphXL for Figma. But unsure how I can connect. Do we need to use a token? Can we grant access to a particular domain as per plugin suggests? Any help would be gratefully appreciated. This would be amazing and definitely something to showcase to design teams who tend to be the content creators and curators.

Further to this, I have found the following blog post where the author is using a URL construct on Kontent to get at the data that he wants to use in his Figma designs.

For ease, I have attached a screenshot of where he talks about the URL to request content from Kontent.

Does anyone know if this is possible with Dato?

Hello,

yes it looks possible, if you check the documentation of the plugin: https://www.figma.com/community/plugin/784880696244762700/API-%2F-JSON-Sync you can pass a secret (our API TOKEN)

And you should pass it like so:

{
  "headers":{
     "Authorization": "YOUR-API-TOKEN"
  }
}

I think! Can you please try? :slight_smile:

Hey Jack. Thanks for your reply.

I have tried this and it definitely takes us a step further, but we’re now getting a different error.

“No query string was present”

This makes sense, as we’re not telling the plugin what data we actually want from the API. I can see in the plug-in that you can add this at the point where we are providing the API Token, but I am not sure how they query needs to be formatted?

Using the API explorer in Dato, I have the following query which brings back the data that I need, but I’m not sure how to include it in the request in the plugin?

query MyQuery {
  onboardingAccountRegistration {
    text01Heading
  }
}

Apologies if this is super obvious, and thanks in advance for any further help.

@mat_jack1 - Sorry to be a pest, but I’ve just realised that I didn’t @ you in my above reply, so I am not sure if you got a notification or not?

hey @datocms2 sorry for the delay here.

Unfortunately I don’t know, your GraphQL query looks good, maybe you can ask to the plugin’s support if he can help you on how to show content in there? Everything else on our side (API token and query) seems ok!

Thanks @mat_jack1. I will report back to this thread if I get any further.

1 Like

With the help of the author of the plug-in, we have managed to get it all working. There were a few ways that got the job done, but the method that seems most in keeping with both the DatoCMS documentation around the Content Delivery API, and the plug-in itself, was to include the query in the API Request Options dialog box.

  1. Enter the DatoCMS endpoint URL into the URL dialog box.
  2. Expand the “API Request Options” dialog box.
  3. Enter the following syntax, where the page that you want to pull data from is called “article” and the datapoint you want to retrieve is called “title” (if you want to retrieve more than one datapoint separate one from the next with a space).

Example:

{
    "headers":{
        "Authorization": "YOUR_API_KEY"
    },
    "query":{
        "query": "query MyQuery { article { title } }"
    }
}

Screenshot:

1 Like

Very nice, thank you for the update!