• Stars
    star
    124
  • Rank 288,207 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🍭 Gatsby plugin for using Figma documents as a data source.

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:
      nodeIds: [`FIGMA_NODE_IDS`],
      // optional for nodeIds: A number between 0.01 and 4, the image scaling factor
      scale: 1,
      // optional: A string enum for the image output format, can be jpg, png, svg, or pdf
      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, nodeIds. 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, nodeIds, 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. Using this method, you can now query components, frames, instances, and more via graphql filters.

// All Figma Documents

query ProjectQuery {
  allFigmaDocument {
    edges {
      node {
        name
        pages {
          name
        }
      }
    }
  }
}
// Specific Figma Component

query ProjectComponentQuery {
  figmaComponent(name: {eq: "MyComponent"}) {
    instances {
      name
      rectangles {
        name
      }
      texts {
        name
      }
    }
  }
}
// Figma Frames that start with "Button"

query ProjectFrameQuery {
  allFigmaFrame(filter: {name: {regex: "/Button/"}}) {
    edges {
      node {
        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.

Authors

More Repositories

1

gatsby-universal

🔮 An opinionated Gatsby v2 starter for state-of-the-art marketing sites.
JavaScript
617
star
2

gatsby-starter-deck

🗣 Create presentations using Gatsby, React & Markdown.
JavaScript
519
star
3

site

🏞 My name dot com.
TypeScript
94
star
4

react-portfolio

⚛️ A workshop for ReactJS.
CSS
36
star
5

t-rex-runner-reason

🦖 The T-Rex Runner Game from Chrome written in Reason
OCaml
15
star
6

gatsby-plugin-drive

🚗 Downloads a Google Drive folder that you can query with gatsby-source-filesystem.
JavaScript
12
star
7

spectacles-cli

🕶 Converts videos into the Snapchat Spectacles style.
JavaScript
11
star
8

gh-lighthouse

📊 Lighthouse scores for GitHub READMEs in SVG.
JavaScript
10
star
9

telegram-chatgpt-worker

🤖 A minimal Telegram bot for ChatGPT
JavaScript
7
star
10

interval

😴 Tracking sleep with a Raspberry Pi and the MPU6050.
CSS
7
star
11

npr

📻 Simple chrome extension to stream NPR.
CSS
6
star
12

www

🤫 A personal, opinionated boilerplate for world wide web applications.
JavaScript
5
star
13

gatsby-react-loadable

Example of using Gatsby v2 with react-loadable.
JavaScript
4
star
14

wepp

🖼 Convert images to WebP on macOS.
JavaScript
4
star
15

hypem-spotify

🔥 Adds popular Hypemachine tracks to a Spotify playlist.
TypeScript
3
star
16

zeit-zu-lueften

Arduino project to measure air quality with the Figaro TGS-2600.
Arduino
2
star
17

mithril-static

🧙 A proof-of-concept of a mithril.js static site generator
JavaScript
2
star
18

fabe.github.io

✨ It's my (old) personal website.
HTML
2
star
19

markdoc-contentful

Adds a Markdoc field to Contentful
JavaScript
2
star
20

rolldown

🎞 Rolldown for iOS. Downloads videos to your camera roll. Simple.
JavaScript
1
star
21

r-random

🤖 Node.js bot that crawls random images from the Reddit API.
JavaScript
1
star
22

women-in-parliaments

Comparing nations based on the share of women and men in their national parliament.
JavaScript
1
star
23

delivery

🚚 Present your designs, clutter-free.
JavaScript
1
star
24

abstract-weather

Visualizing temperature abstractly using p5.js.
JavaScript
1
star
25

test-gatsby-oncreatenode

JavaScript
1
star
26

electron-ffmpeg-starter

📹 Starting point for using using Electron with ffmpeg cross-platform.
JavaScript
1
star
27

sol-lewitt-generator

Sol-LeWitt-Generator made in p5js.
HTML
1
star