Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fabe/gatsby-source-figma
🍭 Gatsby plugin for using Figma documents as a data source.
https://github.com/fabe/gatsby-source-figma
figma figma-api gatsby gatsby-plugin gatsby-source
Last synced: about 1 month ago
JSON representation
🍭 Gatsby plugin for using Figma documents as a data source.
- Host: GitHub
- URL: https://github.com/fabe/gatsby-source-figma
- Owner: fabe
- License: mit
- Created: 2018-03-22T18:42:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-08-30T17:49:59.000Z (over 4 years ago)
- Last Synced: 2024-12-15T20:34:39.907Z (about 1 month ago)
- Topics: figma, figma-api, gatsby, gatsby-plugin, gatsby-source
- Language: JavaScript
- Homepage: https://npm.im/gatsby-source-figma
- Size: 204 KB
- Stars: 126
- Watchers: 4
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - gatsby-source-figma
README
# gatsby-source-figma
[](http://makeapullrequest.com)
[](https://npm.im/gatsby-source-figma)
Gatsby plugin for using [Figma](https://figma.com) documents as a data source.
## Installation
yarn add gatsby-source-figma
## Usage
```javascript
// 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](https://www.figma.com/developers/docs#auth-dev-token).
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`.
```graphql
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).`
```graphql
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
* [x] Query `files`.
* [ ] Query multiple `files`.
* [x] Query one or multiple file `images`.
* [x] Query `projects`.
* [ ] Query file `comments`.
## Authors
* Fabian Schultz ([@fschultz\_](https://twitter.com/fschultz_))
* Emilie Martinez ([@emiliekmartinez](https://twitter.com/emiliekmartinez))
* Brandon W. Kipp ([brandonwkipp](https://github.com/brandonwkipp))