fabe / gatsby-source-figma

🍭 Gatsby plugin for using Figma documents as a data source.
https://npm.im/gatsby-source-figma
MIT License
126 stars 8 forks source link

Make use of unofficial Figma GraphQL API #5

Open fabe opened 6 years ago

fabe commented 6 years ago

Might save some time in the future regarding querying and types.

https://github.com/braposo/figma-graphql

brandonwkipp commented 4 years ago

I've been looking into this for a while and haven't found a straightforward way to extract the types out of that library. It looks like there is some discussion about doing exactly that, but hasn't moved in a quite a while.

I bring this up because I've discovered a bug concerning type definitions. After fetching Figma data, I've found that if the first result of a color fields r, g, b, or a properties are either white (a value of 1) or black (a value of 0), Gatsby's graphql resolver backend ends up treating that field as an Int where it should be considered a Float. I made a simple fix for this by abstracting out the type definitions and adding a FigmaCOLOR type explicitly defining the rgba values as Float.

I can make a simple PR to help fix this bug, but it seems like a slippery slope into defining the entire Figma schema. What are your thoughts about this @fabe? For reference, I've attached the output of the error described below:

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Int cannot represent non-integer value: 0.6274510025978088

   3 |     frames {
   4 |       absoluteBoundingBox {
   5 |         height
   6 |         width
   7 |       }
   8 |       cornerRadius
   9 |       fills {
  10 |         color {
  11 |           r
  12 |           g
> 13 |           b
     |           ^
  14 |         }
  15 |       }
  16 |     }
  17 |     texts {
  18 |       fills {
  19 |         color {
  20 |           r
  21 |           g
  22 |           b
  23 |         }