gatsby-source-figma
Gatsby plugin for using Figma documents as a data source.
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
- Fabian Schultz (@fschultz_)
- Emilie Martinez (@emiliekmartinez)
- Brandon W. Kipp (brandonwkipp)