Need private packages and team management tools?Check out npm Teams »

gatsby-source-figma

1.1.0 • Public • Published

gatsby-source-figma

PRs Welcome npm

Gatsby plugin for using Figma documents as a data source.

Screenshot

Installation

yarn add gatsby-source-figma

Usage

// In your gatsby-config.js
 
plugins: [
  {
    resolve: `gatsby-source-figma`,
    options: {
      // For files:
      fileId: `FIGMA_FILE_ID`,
      // For images:
      nodeId: [`FIGMA_NODE_IDS`],
      scale: 1,
      format: 'png'
      // For projects:
      projectId: `FIGMA_PROJECT_ID`,
      // Get an access token from Figma Account Settings.
      accessToken: `YOUR_FIGMA_ACCESS_TOKEN`,
    },
  },
],

For all requests, you must have an accessToken. You can create an access token inside your Figma settings.

To access a file, also pass a fileId.

To get screenshots, also pass in a fileId, nodeId. Additionally, you can pass in scale (number) and/or format (png, jpg, svg, pdf), but they're not required.

To get a project, pass in a projectId.

Querying

Files

Make sure that fileId and accessToken are set inside gatsby-config.js.

query StyleguideQuery {
  figmaDocument {
    name
    lastModified
    thumbnailUrl
    pages {
      name
      children {
        name
      }
    }
  }
}

Images (Artboards, also known as nodes)

Make sure that fileId, nodeId, and accessToken are set inside gatsby-config.js. You can also set scale and format.

The node Id and file key can be parsed from any Figma node url: (https://www.figma.com/file/:key/:title?node-id=:id).

query ImageQuery {
  allFigmaImage {
    nodes {
      id
      image
    }
  }
}

Projects

Make sure that projectId and accessToken are set inside gatsby-config.js.

query ProjectQuery {
  allFigmaDocument {
    edges {
      node {
        name
        pages {
          name
        }
      }
    }
  }
}

Use the built-in GraphiQL tool (http://localhost:8000/___graphql) to get an idea of what you can query.

Todo

  • Query files.
  • Query multiple files.
  • Query one or multiple file images.
  • Query projects.
  • Query file comments.

Author

Install

npm i gatsby-source-figma

DownloadsWeekly Downloads

3

Version

1.1.0

License

MIT

Unpacked Size

115 kB

Total Files

8

Last publish

Collaborators

  • avatar