Skip to content
🍭 Gatsby plugin for using Figma documents as a data source.
Branch: master
Clone or download
Latest commit 6df9c57 Sep 19, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update README. Apr 16, 2018
examples
src
.gitignore Init. Mar 22, 2018
.npmignore Init. Mar 22, 2018
LICENSE Init. Mar 22, 2018
README.md
index.js Init. Mar 22, 2018
package.json

README.md

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 projects:
      projectId: `FIGMA_PROJECT_ID`,
      // Get an access token from Figma Account Settings.
      accessToken: `YOUR_FIGMA_ACCESS_TOKEN`,
    },
  },
],

Passing a fileId or projectId and an accessToken is required. You can create an access token inside your Figma settings.

Querying

Files

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

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

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 file images.
  • Query projects.
  • Query file comments.

Author

You can’t perform that action at this time.