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)