https://github.com/souporserious/figma-tools
Tools to help you programmatically interact with your Figma files.
https://github.com/souporserious/figma-tools
Last synced: 2 months ago
JSON representation
Tools to help you programmatically interact with your Figma files.
- Host: GitHub
- URL: https://github.com/souporserious/figma-tools
- Owner: figma-tools
- License: mit
- Created: 2020-09-11T05:26:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-25T19:50:03.000Z (over 1 year ago)
- Last Synced: 2024-05-18T17:49:22.720Z (11 months ago)
- Language: TypeScript
- Homepage:
- Size: 355 KB
- Stars: 95
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-figma - figma-tools - 帮助你编程与Figma文件交互的工具。 (Rest API 集成)
- awesome-figma - figma-tools - 帮助你编程与Figma文件交互的工具。 (Rest API 集成)
- awesome-figma - figma-tools - Tools to help you programmatically interact with your Figma files. (Rest API integrations)
README
Tools to help you programmatically interact with your Figma files.
## Install
```
yarn add figma-tools --dev
```
```
npm install figma-tools --dev
```
## Exports
Please note: you must include a
personal access token in
a `.env` at the root of your project or as an environment variable in order for the following functions to work.
```env
FIGMA_TOKEN=personal-token-here
```
You must also import and initiate the `dotenv` package in order to load the `.env` file:
```js
const dotenv = require('dotenv')
const { fetchImages } = require('figma-tools')
dotenv.config()
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'jpg',
}).then((images) => {
...
})
```
### fetchImages: ([ImageOptions](#imageoptions)) => Promise>
Fetch components in a file and export them as images.
### fetchStyles: (fileId: string) => DocumentStyles
Fetch library styles used in a file.
### watchFile (fileId: string, callback: (file: FileResponse, previousFile: FileResponse) => void, delay: number = 5000)
Watch a file for changes.
### diffFiles (fileA: FileResponse, fileB: FileResponse)
Determine the differences between two files. Uses a simple wrapper around [jest-diff](https://github.com/facebook/jest/tree/main/packages/jest-diff#jest-diff).
## Types
### ImageOptions
#### fileId
#### filter
#### [image params](https://jongold.github.io/figma-js/interfaces/fileimageparams.html)
### Image
#### name
#### description
#### buffer
#### pageName
#### frameName
#### groupName
## Usage
Once your token has been set you can use any of the provided functions in a Node script. In a simple example, we will create an `icons.js` file:
```jsx
const { fetchImages } = require('figma-tools')
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'jpg',
}).then((images) => {
console.log(images)
})
```
Now we can call our function and fetch images from our Figma file 💰:
```bash
node icons.js
```
It's that easy! This script can hook into a build script or be used in conjunction with the `watchFile` function whenever you need to refresh your assets.
## Recipes
### JPG, PNG, SVG, or PDF
```js
const fs = require('fs')
const { fetchImages } = require('figma-tools')
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'jpg',
}).then((images) => {
images.forEach((image) => {
fs.writeFileSync(path.resolve(`${image.name}.jpg`), image.buffer)
})
})
```
### React Components
```js
const fs = require('fs')
const path = require('path')
const svgtojsx = require('svg-to-jsx')
const { pascalCase } = require('case-anything')
const { fetchImages } = require('figma-tools')
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'svg',
}).then(async (svgs) => {
const jsx = await Promise.all(svgs.map((svg) => svgtojsx(svg.buffer)))
const data = svgs
.map((svg, index) => {
return `export const ${pascalCase(svg.name)} = () => ${jsx[index]}`
})
.join('\n')
fs.writeFileSync(path.resolve('icons.js'), data)
})
```
### JSON
```js
const fs = require('fs')
const path = require('path')
const { parse } = require('svgson')
const { fetchImages } = require('figma-tools')
fetchImages({
fileId: 'E6didZF0rpPf8piANHABDZ',
format: 'svg',
}).then(async (svgs) => {
const json = await Promise.all(
svgs.map((svg) => parse(svg.buffer.toString()))
)
const data = svgs.reduce(
(data, svg, index) => ({
...data,
[svg.name]: json[index],
}),
{}
)
fs.writeFileSync(path.resolve('icons.json'), JSON.stringify(data, null, 2))
})
```