Home

Awesome

<p align="center"> <a href="http://figma-graphql.party"> <img width="150" src="./assets/logo.svg" /> </a> </p> <h1 align="center"> figma-graphql </h1> <div align="center">

The reimagined Figma API (super)powered by GraphQL

Build Status Greenkeeper badge Code Coverage Known Vulnerabilities All Contributors PRs Welcome <br/> Prettier format Commitizen friendly semantic-release MIT License

</div>

Quick start

Open figma-graphql

  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
    }
}

Documentation

Please read the full documentation for additional examples and best practices.

Developing

  1. Clone this repo
  2. Run yarn install to install all dependencies
  3. Run FIGMA_TOKEN={YOUR_PERSONAL_FIGMA_TOKEN} yarn run dev or add it to an .env file
  4. The Figma GraphQL playground should be available at http://localhost:3001/

Figma file

This isn't really necessary but here's the base Figma file that is being used during development.

It should work with any file so can use your own Figma files and just replace file(id: "cLp23bR627jcuNSoBGkhL04E") with the id of the file you want to query.

Contributors

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="http://bernardoraposo.com"><img src="https://avatars2.githubusercontent.com/u/38172?v=4" width="100px;" alt=""/><br /><sub><b>Bernardo Raposo</b></sub></a><br /><a href="#question-braposo" title="Answering Questions">💬</a> <a href="https://github.com/braposo/figma-graphql/commits?author=braposo" title="Code">💻</a> <a href="https://github.com/braposo/figma-graphql/commits?author=braposo" title="Documentation">📖</a> <a href="#design-braposo" title="Design">🎨</a> <a href="#ideas-braposo" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/braposo/figma-graphql/pulls?q=is%3Apr+reviewed-by%3Abraposo" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/braposo/figma-graphql/commits?author=braposo" title="Tests">⚠️</a></td> <td align="center"><a href="http://iamsaravieira.com"><img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;" alt=""/><br /><sub><b>Sara Vieira</b></sub></a><br /><a href="https://github.com/braposo/figma-graphql/commits?author=SaraVieira" title="Code">💻</a> <a href="https://github.com/braposo/figma-graphql/commits?author=SaraVieira" title="Documentation">📖</a> <a href="https://github.com/braposo/figma-graphql/pulls?q=is%3Apr+reviewed-by%3ASaraVieira" title="Reviewed Pull Requests">👀</a></td> <td align="center"><a href="http://okonet.ru"><img src="https://avatars3.githubusercontent.com/u/11071?v=4" width="100px;" alt=""/><br /><sub><b>Andrey Okonetchnikov</b></sub></a><br /><a href="https://github.com/braposo/figma-graphql/commits?author=okonet" title="Documentation">📖</a> <a href="https://github.com/braposo/figma-graphql/commits?author=okonet" title="Code">💻</a></td> <td align="center"><a href="https://souporserious.com"><img src="https://avatars1.githubusercontent.com/u/2762082?v=4" width="100px;" alt=""/><br /><sub><b>Travis Arnold</b></sub></a><br /><a href="https://github.com/braposo/figma-graphql/commits?author=souporserious" title="Documentation">📖</a></td> </tr> </table> <!-- markdownlint-enable --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification. Contributions of any kind welcome!