Skip to main content
View plugin on GitHub
See starters using this

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


Docs
Tutorials
Plugins
Blog
Showcase