Quick start

  1. Open the playground

  2. Try your first query

{
file(id: "cLp23bR627jcuNSoBGkhL04E") {
name
}
}
  1. Keep exploring and see what else you can do!

Motivations

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:

  1. 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).

  2. 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.

To read more about the motivations and biggest changes for v2 please read the Road to v2 section.

Recipes

A good way to understand the different queries that you can build is to use the "Docs" tab on the right-hand side of the playground and go through the different properties of all the supported types.

We've also selected a few example scenarios that can be used as a reference for common uses of the library.

Acknowledgements

This library wouldn't even exist without the incredible effort from the Figma team to bring a fully-featured API to their design tool. You can have a look at the Figma API documentation if you want to learn more.

For the integration with the Figma API and TypeScript we rely on the awesome figma-js library.

Contributors

figma-graphql is an open-source project made possible with the contributions from these amazing people:


Bernardo Raposo

๐Ÿ’ฌ ๐Ÿ’ป ๐Ÿ“– ๐ŸŽจ ๐Ÿค” ๐Ÿ‘€ โš ๏ธ

Sara Vieira

๐Ÿ’ป ๐Ÿ“– ๐Ÿ‘€

Andrey Okonetchnikov

๐Ÿ“– ๐Ÿ’ป

Travis Arnold

๐Ÿ“–

This project follows the all-contributors specification.

If you're interested in contributing please reach out! Contributions of any kind welcome โค