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

The reimagined Figma API (super)powered by GraphQL
https://github.com/braposo/figma-graphql

api design figma figma-api graphql tools

Last synced: 23 days ago
JSON representation

The reimagined Figma API (super)powered by GraphQL

• Host: GitHub
• URL: https://github.com/braposo/figma-graphql
• Owner: braposo
• License: mit
• Created: 2018-03-28T19:37:55.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-27T17:13:42.000Z (7 months ago)
• Last Synced: 2024-04-14T06:06:57.367Z (7 months ago)
• Topics: api, design, figma, figma-api, graphql, tools
• Language: TypeScript
• Homepage: https://figma-graphql.party
• Size: 12.4 MB
• Stars: 395
• Watchers: 8
• Forks: 24
• Open Issues: 85
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - figma-graphql
• awesome-figma - figma-graphql - A GraphQL connector for the Figma API. (Rest API integrations)

README

        


  

    

  





figma-graphql





The reimagined [Figma API](https://www.figma.com/developers) (super)powered by GraphQL

[![Build Status][build-badge]][travis] [![Greenkeeper badge][greenkeeper-badge]][greenkeeper] [![Code Coverage][coverage-badge]][coverage] [![Known Vulnerabilities][snyk-badge]][snyk] [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] 
 ![Prettier format][prettier-badge] [![Commitizen friendly][commitizen-badge]][commitizen] [![semantic-release][semantic-badge]][semantic] [![MIT License][license-badge]][license]



## Quick start

[![Open figma-graphql][codesandbox-badge]][codesandbox]

1. Open figma-graphql [sandbox][codesandbox] and fork it

2. Add your [Figma API Token](https://www.figma.com/developers/docs#access-tokens) as `FIGMA_TOKEN` in the [codesandbox secret keys](https://codesandbox.io/docs/secrets)

3. Try your first query!

```gql

{

    file(id: "cLp23bR627jcuNSoBGkhL04E") {

        name

    }

}

```

## Documentation

Please read the [full documentation][website] 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](https://www.figma.com/file/cLp23bR627jcuNSoBGkhL04E/Style-guide) 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](https://allcontributors.org/docs/en/emoji-key)):

  

    
Bernardo Raposo
💬 💻 📖 🎨 🤔 👀 ⚠️

    
Sara Vieira
💻 📖 👀

    
Andrey Okonetchnikov
📖 💻

    
Travis Arnold
📖

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[license-badge]: https://img.shields.io/npm/l/figma-graphql.svg?style=flat-square

[license]: https://github.com/braposo/figma-graphql/blob/master/LICENSE

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[prs]: http://makeapullrequest.com

[codesandbox-badge]: https://codesandbox.io/static/img/play-codesandbox.svg

[codesandbox]: https://codesandbox.io/s/github/braposo/figma-graphql/

[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square

[build-badge]: https://img.shields.io/travis/com/braposo/figma-graphql.svg?style=flat-square

[travis]: https://travis-ci.com/braposo/figma-graphql

[coverage-badge]: https://img.shields.io/codecov/c/github/braposo/figma-graphql.svg?style=flat-square

[coverage]: https://codecov.io/github/braposo/figma-graphql

[snyk-badge]: https://snyk.io/test/github/braposo/figma-graphql/badge.svg?style=flat-square

[snyk]: https://snyk.io/test/github/braposo/figma-graphql

[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square

[commitizen]: http://commitizen.github.io/cz-cli/

[semantic-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square

[semantic]: https://github.com/semantic-release/semantic-release

[greenkeeper-badge]: https://badges.greenkeeper.io/braposo/figma-graphql.svg?style=flat-square

[greenkeeper]: https://greenkeeper.io/

[website]: https://figma-graphql.party