# figma-graphql

> A GraphQL connector for the Figma API

Latest version **1.3.0** (published 2018-04-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install figma-graphql
pnpm add figma-graphql
yarn add figma-graphql
bun add figma-graphql
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2018-04-09 |
| First published | 2018-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 126.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 393 |
| Author | Bernardo Raposo |
| Maintainers | braposo |
| Keywords | figma, design, tools, graphql, api |

## Links

- npm: https://www.npmjs.com/package/figma-graphql
- Repository: https://github.com/braposo/figma-graphql
- Homepage: https://github.com/braposo/figma-graphql#readme
- Issues: https://github.com/braposo/figma-graphql/issues
- npm.io page: https://npm.io/package/figma-graphql

## Dependencies (13)

- [cors](https://npm.io/package/cors.md) ^2.8.4
- [dotenv](https://npm.io/package/dotenv.md) ^5.0.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.5
- [shades](https://npm.io/package/shades.md) ^1.11.0
- [express](https://npm.io/package/express.md) ^4.16.3
- [graphql](https://npm.io/package/graphql.md) ^0.13.2
- [figma-js](https://npm.io/package/figma-js.md) ^1.2.1
- [body-parser](https://npm.io/package/body-parser.md) ^1.18.2
- [graphql-tools](https://npm.io/package/graphql-tools.md) ^2.23.1
- [graphql-iso-date](https://npm.io/package/graphql-iso-date.md) ^3.5.0
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1
- [apollo-server-express](https://npm.io/package/apollo-server-express.md) ^1.3.3
- [graphql-playground-middleware-express](https://npm.io/package/graphql-playground-middleware-express.md) ^1.6.0

## Recent versions

- 1.3.0 (latest) — 2018-04-09
- 1.2.0 — 2018-04-08
- 1.1.0 — 2018-03-29
- 1.0.0 — 2018-03-27

## README

# figma-graphql

This is a **very experimental** GraphQL connector for the new [Figma Web API](https://www.figma.com/developers)

## How to use this?

There's a live version of this at [https://graphqlbin.com/v2/j2LQcn](https://graphqlbin.com/v2/j2LQcn)

If you want to play with it then:

1.  Clone this repo
2.  Run `yarn install`
3.  Run `yarn run dev`
4.  Go to `http://localhost:3001/` and have fun!

## Query examples

This is still in the very beginning but there's already a few useful things we can get from this API.

### Get a file's contents

```gql
{
    file(id: "KViUntEBJqK4gWfiwft5NObl") {
        name
        thumbnailUrl
        lastModified
        pages {
            name
            id
            type
            frames {
                id
                name
                clipsContent
                blendMode
                position {
                    x
                    y
                }
                size {
                    width
                    height
                }
                elements(type: "TEXT") {
                    name
                    type
                    characters
                    position {
                        x
                        y
                    }
                    size {
                        width
                        height
                    }
                    style {
                        fontSize
                        fontFamily
                        fontWeight
                        letterSpacing
                    }
                    strokes {
                        type
                    }
                    fill {
                        r
                        g
                        b
                        a
                    }
                }
            }
        }
    }
}
```

### Get just the image of a Node a file or the whole file

To get the whole file don't pass any more parameters.

```gql
{
    image(id: "KViUntEBJqK4gWfiwft5NObl") {
        images
    }
}
```

To get the image of node pass the id of that node as a parameter

```gql
{
    image(id: "KViUntEBJqK4gWfiwft5NObl", params: { ids: "16:19" }) {
        images
    }
}
```

### Get comments on a file

```gql
{
    comments(id: "KViUntEBJqK4gWfiwft5NObl") {
        id
        file_key
        parent_id
        user {
            img_url
            handle
        }
        created_at
        resolved_at
        message
        client_meta {
            node_offset {
                x
                y
            }
        }
    }
}
```

### Post a comment to a file

```gql
mutation {
    addComment(
        id: "KViUntEBJqK4gWfiwft5NObl"
        message: "Test from server"
    ) {
        id
        message
    }
}
```

You can also pass the coordinates where the comment should be placed as a parameter

```gql
mutation {
    addComment(
        id: "KViUntEBJqK4gWfiwft5NObl"
        message: "Test from server"
        params: { x: "12", y: "12" }
    ) {
        id
        message
    }
}
```

### Get all projects for a team

```gql
{
    projects(id: "484668844937890483") {
        id
        name
    }
}
```

### Get all files for a project

```gql
{
    projectFiles(project: "420878") {
        key
        name
        thumbnail_url
        last_modified
    }
}
```

## Figma file

This isn't really necessary but [here's the base Figma file](https://www.figma.com/file/KViUntEBJqK4gWfiwft5NObl/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: "KViUntEBJqK4gWfiwft5NObl")` with the id of the file you want to query.

---
_Source: https://npm.io/package/figma-graphql · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._