Gatsby plugin for using Figma documents as a data source.
yarn add gatsby-source-figma
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-source-figma`,
options: {
// For files:
fileId: `FIGMA_FILE_ID`,
// For images:
nodeIds: [`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
, 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
.
Make sure that fileId
and accessToken
are set inside gatsby-config.js
.
query StyleguideQuery {
figmaDocument {
name
lastModified
thumbnailUrl
pages {
name
children {
name
}
}
}
}
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
}
}
}
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.
- Query
files
. - Query multiple
files
. - Query one or multiple file
images
. - Query
projects
. - Query file
comments
.
- Fabian Schultz (@fschultz_)