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`],
// 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.
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. 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.
- Query
files. - Query multiple
files. - Query one or multiple file
images. - Query
projects. - Query file
comments.
- Fabian Schultz (@fschultz_)
- Emilie Martinez (@emiliekmartinez)
- Brandon W. Kipp (brandonwkipp)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent