Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/six7/figma-assets-generator
Creates assets (SVG, JPG, PNG) from a figma document (e.g. a "Icons" page in one of your files) and places them locally in a folder.
https://github.com/six7/figma-assets-generator
figma figma-api figma-js figmadesign icons
Last synced: 2 days ago
JSON representation
Creates assets (SVG, JPG, PNG) from a figma document (e.g. a "Icons" page in one of your files) and places them locally in a folder.
- Host: GitHub
- URL: https://github.com/six7/figma-assets-generator
- Owner: six7
- Created: 2018-11-20T14:05:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T11:09:52.000Z (almost 2 years ago)
- Last Synced: 2024-10-26T20:39:26.365Z (25 days ago)
- Topics: figma, figma-api, figma-js, figmadesign, icons
- Language: JavaScript
- Homepage:
- Size: 695 KB
- Stars: 90
- Watchers: 3
- Forks: 10
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Figma Assets Generator
Creates assets (SVG, JPG, PNG) from a figma document (e.g. a "Icons" page in one of your files) and places them locally in a folder.
## Usage
Ideal use: create a script in your package.json and run the script whenever you need, however you could also run this programmatically.
### Installation
```
npm install --save-dev figma-assets-generator
```
or
```
yarn add -D figma-assets-generator
```
### Use as npm script
Provide a `figma-assets-generator.json` file with the following configuration:
```
{
"personalAccessToken": "YOUR_ACCESS_TOKEN", // required: your figma access token (you can provide this as FIGMA_TOKEN in a .env file)
"fileId": "YOUR_FILE_IDE", // required: file id where your icons document is stored
"documentId": "123:456", // required: node of your icons document, e.g. "453:8089"
"fileExtension": "svg", // optional: ["svg", "jpg", "png", "pdf"], default: svg
"output": "assets/icons/svg" // optional: folder (relative path from working directory) where icons will be saved to, defaults to "assets",
"scale": "1" // optional, values between 0.05 and 4 are possible, default: 1
}
```
Run
```
npx figma-assets-generator
```
on the command line, or via `node_modules/.bin/figma_assets_generator`
or create a new entry in `package.json` under `scripts`:
```
"figma-generate": "figma-assets-generator"
```
`// Todo:` If no figma-assets-generator.json file was provided a wild wizard appears!
### Use within your \*.js files
Include `figma-assets-generator` in your project, provide required options and call `getFigmaAssets(options)` whenever you want to pull and create icons.
```
const { getFigmaAssets } = require("figma-assets-generator")
const options = {
personalAccessToken: "5316-049f89713-0134-46b5-b426-22d1251cbc6", // required: your figma access token (you can provide this as FIGMA_TOKEN in a .env file)
fileId: "gAMN5xYfhC2BTVKnht3PAk43", // required: file id where your icons document is stored
documentId: "453:8089", // required: node of your icons document, e.g. "453:8089"
fileExtension: "svg", // optional: ["svg", "jpg", "png"], default: svg
output: "assets" // optional: folder where icons will be saved to, defaults to "icons" (cannot have subdirectories, see #17)
}
getFigmaAssets(options)
```
#### How do I get fileId and documentId ?
To get the fileId you need to open the document in your browser, the fileId is indicated in the address bar:
https://www.figma.com/file/KiFw6W2QjnKqhA4hoWsrhQ/Untitled?node-id=0%3A123
The part after `/file/` would be the fileId (in this example `KiFw6W2QjnKqhA4hoWsrhQ`) and the documentId would be the part after `node-id=` (in this example `0%3A123` - however `%3A` is just HTML Encoding for `:` so the document id would be `0:123`
## Caveats
Replaces `/` and `.` in component names with `_`.