figma-graphql

The reimagined Figma API (super)powered by GraphQL

Quick start

1. Open figma-graphql sandbox and fork it

2. Add your Figma API Token as `FIGMA_TOKEN` in the codesandbox secret keys

3. Try your first query!

{
    file(id: "cLp23bR627jcuNSoBGkhL04E") {
        name
    }
}

It's great that Figma provides an API allowing anyone to easily get the data from their design files. But that API has two characteristics that make it quite hard for people without a good technical knowledge to access it:

The file data has a rigid tree-shaped structure that forces people to know the exact structure of the design file and can easily break existing code by just making a small change in the design file (like grouping elements).
It requires multiple requests to different endpoints to get data that is related. Want to export specific frames in a file? You need to query the file data first, parse the data to get the frame ids and then make additional requests to a different endpoint to get that data.

This obviously makes things a lot more complex than they need to be so we use the power of GraphQL solve these issues and add a few other features.

With figma-graphql, we focus on the person using the library, not the machines. We see this as the best way to open your design files to more people, especially to those with minimal technical backround.

Examples

A good way to understand the different queries that you can build is to use the "Schema" tab on the righ-hand side of the playground and go through the different properties of all the supported types, but we've also selected a few example scenarios that can be used as a reference for common uses of the library.

Migrating to v2

For v2 we've completely rebuilt the API in a more human-first approach which makes it incompatible with most of the v1 queries. To read more about the motivations and biggest changes please read the Road to v2 section.

Brought to you by these awesome contributors: