Get values associated with styles with files/styles API call

… seems I can’t edit my replies to add add’l thoughts or fix typos …

So, by the previous comment I mean… I can use this JSONPath expression string to get to [extract] a button’s text color from the large JSON object returned using the /nodes API call:

$..document..children[?(@.type==='TEXT')].fills

Be aware, this is for OUR design file. Yours will almost 100% need a different path to get to the figma spec definition you are interested in.

But that aside, the benefit of JSONPath expression strings is the ‘shortcut’ of ‘…’ that can be used to skip all the in-between levels. Since, as our design team structured their design file, this particular button’s text definition, searchable using the filter expression above, is technically at the following fully qualified path (which JSONPath-Plus will also give you):

"$['nodes']['3:1515']['document']['children'][0]['children'][1]['fills']"

And finally, the JSON object value that is extracted from the JSON object the API for the node_id of the button in question that contains the button text’s color of ‘white’ is returned as:

[
  [
    {
      "blendMode": "NORMAL",
      "type": "SOLID",
      "color": {
        "r": 1,
        "g": 1,
        "b": 1,
        "a": 1
      }
    }
  ]
]

…Ya, a single API call that returns #FFFFFF certainly would be better. lol. But this way, we have a job, right? 😉

(I was given rights to edit my posts. So I updated and fixed the formatting of my text above.)

@Steve_Mato Haha, no worries and goodness that’s quite a bit of work for this particular feature. Have yet to dive into the docs yet but if you don’t mind, let me pick your brain to get an idea of the scope of what I may have to build…

What I want to build is the ability to select frames/node, extract their styles, then send them to a database.

Seems like I need to try and organize the file so that I can read each node individually cleanly.

How manageable or unruly the JSON is that is returned from Figma using the most generic ‘/file’ end-point is directly proportional to the number UI design elements. And that determines how easily one can work with it within in a programmer’s editor, to find things like Node IDs and design property name/values under it.

You want to get the ‘node_id’ so that you can using the /nodes API call and return just one relatively small JSON object for just the one component. In our case, our primary design file returned a JSON file over 200 megs in size. That was basically impossible to open in even the most efficient programmer’s editor and search thru it to determine the node_id for a component I wished to process. Vs. the JSON object returned from the /nodes end-point is just a few down Kbytes in size.

Enter, a fantastic Figma plug-in someone [edit: jackiecorn Jackie Chui, on GitHub] wrote and put in the public domain, thereby available to everyone. If you need to get the node_id (and/or visually see all the first and second level name/values) of a component within Figma by clicking / picking it in the Figma UI, grab plug-in name ‘Node Inspector’. You can’t click an outer canvas or frame that contains many components and inspect that. But you can inspect a single Component and all the sub nodes under that. Which is perfect. (Make sure you drill-down the Figma component/instance/frame/whatever layering, as the right node_id you want may not be the top-level one.)

That served as a major leg-up in my processing of JSON returned from the Figma API. I don’t use the other data Node Inspector returns, other than eyeballing the design style name/value pairs. I just needed the node_id of a component. Then the rest of the work was in my logic running within a Chrome Extension to compare the Figma style values as the ‘source of truth’ to the rendered computed styles of html elements on our in-house built webapp pages.

Hope this helps. Let me know if you need more.

@Steve_Mato Steve, that was quite the insightful answer; thank you sir. Sadly, due to some deadlines and limited flexibility, going this route might not be feasible in my case.

Thinking about a decent workaround.
For now, I’m building a small application that can take my copy and pasted styles from figma inspect (I manually do this). Once the styles are pasted, I run my program that will take care of mapping/organizing and sending to the database. Not ideal, but could be sufficient.

One more bump to this

Has anyone had any movement on this? We’re trying to extract all color usage (local/library styles, manual hex entry and swatches, and local/library variables) to audit usage across team files so we can help teams adopt tokens (styles presently; variables eval ongoing) as well as give us insight into DS deviation in an externally managed dashboard.

Found this: https://www.fabiofranchino.com/log/how-to-get-the-styles-from-a-figma-document-using-their-api-with-nodejs/

This is what Nuno_Ferreira suggested above, but provides some more details.