open-index/open-npm huggingface dataset:
npm package: @figma-api/community
Description: Figma Community API
Latest version: 0.0.7

# `@figma-api/community` - Figma Community Data API

Figma Community API provide publicly available figma community files data, you can fetch file, images like it is yours. It also follows the same interface as our [Figma REST API Client - `@figma-api/rest`](https://github.com/gridaco/design-sdk) so you can easily switch between them without any code changes (very few changes).

## Installation

```sh
# npm
npm install --save @figma-api/community axios

# yarn
yarn add @figma-api/community axios
```

_Note_ - `axios` is a peer dependency, you need to install it as well.

## Usage

```ts
import { Client } from "@figma-api/community";

const client = Client();

// a file id is a id from figma.com/community/file/:id
// e.g. - https://www.figma.com/community/file/1035203688168086460
const fileid = "1035203688168086460";

// fetch file
const { data: document } = await client.file(fileid);

// fetch node images (export as images)
```

## About Images

Since the images are pre-exported and archived, we support limited `scale` of images, other wise, it will return 404.

**image scales**

- 1x (`1`)
- 2x (`2`)
- 3x (`3`)

**Downsized image fills**

The image fills are optimized to max 3mb per file (which still has great quality), you should use the node's width and height data to render the image fill as the actual size.
npm package: @figma-export/core
Description: @figma-export core functionalities
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/core

> @figma-export core functionalities.

## Install

Using npm:

```sh
npm i -D @figma-export/core
```

or using yarn:

```sh
yarn add @figma-export/core --dev
```
npm package: @figma-export/output-components-as-es6
Description: Outputter for @figma-export that exports components in javascript file
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/output-components-as-es6

> Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports components in javascript file.

With this outputter you can export all components as variables inside a `.js` file called with the page name.

This is a sample of the output:

```sh
$ tree output/
# output/
# └── icons.js
```

For each file you will have a list of `export`.

```js
// icons.js
export const figmaExport = `<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;
export const figmaLogo = `<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;
```

> **Tip**: A component named `icon/eye` will be exported as variable named `iconEye`.

## .figmaexportrc.js

You can easily add this outputter to your `.figmaexportrc.js`:

```js
import asES6 from '@figma-export/output-components-as-es6'

export default {
    commands: [
        ['components', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            onlyFromPages: ['icons', 'unit-test'],
            outputters: [
                asES6({
                    output: './output'
                })
            ]
        }],
    ]
}
```

`output` is **mandatory**.

`getVariableName`, `useBase64` and `useDataUrl` are **optional**.

```js
import asES6 from '@figma-export/output-components-as-es6'
import { camelCase } from '@figma-export/utils'

...

asES6({
    output: './output',
    getVariableName: (options) => camelCase(options.componentName.trim()),
    useBase64: false,
    useDataUrl: false,
})
```

> *defaults may change, please refer to `./src/index.ts`*

## Install

Using npm:

```sh
npm install --save-dev @figma-export/output-components-as-es6
```

or using yarn:

```sh
yarn add @figma-export/output-components-as-es6 --dev
```

## Options

This task can be configured providing some options:

* `output` is the path to the output folder.
* `variablePrefix` and `variableSuffix` enable you to prepend or append a text to the variable name. This is necessary when your component name is a reserved word (e.g. `const`, `package`, ...).
* `useBase64` (boolean) will export each components using Base 64 encoding.

```js
// icons.js
export const figmaExport = `PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gLi4uIDwvc3ZnPg==`;
```

* `useDataUrl` (boolean) will export each components using [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) format.

```js
// icons.js
export const figmaExport = `data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3e ... %3c/svg%3e`;
```
npm package: @figma-export/output-components-as-stdout
Description: Outputter for @figma-export that outputs components in console as json
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/output-components-as-stdout

> Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that outputs components in console as json.

## Install

Using npm:

```sh
npm install --save-dev @figma-export/output-components-as-stdout
```

or using yarn:

```sh
yarn add @figma-export/output-components-as-stdout --dev
```
npm package: @figma-export/output-components-as-svg
Description: Outputter for @figma-export that exports components as svg
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/output-components-as-svg

> Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports components as svg.

With this outputter you can export all components as svg into the specified output folder.

This is a sample of the output from this [Figma file](https://www.figma.com/file/fzYhvQpqwhZDUImRz431Qo):

```sh
$ tree output/
# output
# ├── icons
# │   ├── figma-arrow.svg
# │   ├── figma-export.svg
# │   └── figma-logo.svg
# └── unit-test
#     ├── figma
#     │   ├── logo
#     │   │   ├── main (bright).svg
#     │   │   └── main.svg
#     │   └── logo.svg
#     └── figma default logo.svg
```

> **Tip**: A component named `icon/eye` will be exported as `eye.svg` inside the `icon` folder.

## .figmaexportrc.js

You can easily add this outputter to your `.figmaexportrc.js`:

```js
import asSvg from '@figma-export/output-components-as-svg'

export default {
    commands: [
        ['components', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            onlyFromPages: ['icons', 'unit-test'],
            outputters: [
                asSvg({
                    output: './output'
                })
            ]
        }],
    ]
}
```

`output` is **mandatory**.

`getDirname` and `getBasename` are **optional**.

```js
import asSvg from '@figma-export/output-components-as-svg'
import path from 'path'

...

asSvg({
    output: './output',
    getDirname: (options) => `${options.pageName}${path.sep}${options.dirname}`,
    getBasename: (options) => `${options.basename}.svg`,
})
```

> *defaults may change, please refer to `./src/index.ts`*

## Install

Using npm:

```sh
npm install --save-dev @figma-export/output-components-as-svg
```

or using yarn:

```sh
yarn add @figma-export/output-components-as-svg --dev
```
npm package: @figma-export/output-components-as-svgstore
Description: Outputter for @figma-export that exports components in svg file ( SVG Sprites )
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/output-components-as-svgstore

> Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports components in svg file (`SVG Sprites`).

With this outputter you can export all components as `<symbol>` inside a `.svg` file named with the page name.

This is a sample of the output:

```sh
$ tree output/
# output/
# ├── icons.svg
# └── unit-test.svg
```

Probably you already know what <a target="_blank" rel="noopener noreferrer" href="https://css-tricks.com/css-sprites/">CSS Sprites</a> are, basically you can combine multiple images into a single image file and use it on a website.

**SVG Sprites** are very similar, but use svg instead of png.

You can read more on <a target="_blank" rel="noopener noreferrer" href="https://css-tricks.com/svg-sprites-use-better-icon-fonts/">Icon System with SVG Sprites</a> article where you can find how to use them.

## .figmaexportrc.js

You can easily add this outputter to your `.figmaexportrc.js`:

```js
import asSvgstore from '@figma-export/output-components-as-svgstore'

export default {
    commands: [
        ['components', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            onlyFromPages: ['icons', 'unit-test'],
            outputters: [
                asSvgstore({
                    output: './output'
                })
            ]
        }],
    ]
}
```

`output` is **mandatory**.

`getIconId` and `svgstoreConfig` are **optional**.

```js
import asSvgstore from '@figma-export/output-components-as-svgstore'

asSvgstore({
    output: './output',
    getIconId: (options) => `${options.pageName}/${options.componentName}`,
    svgstoreConfig: {},
})
```

> *defaults may change, please refer to `./src/index.ts`*

`svgstoreConfig` is the [svgstore configuration](https://github.com/svgstore/svgstore#options) object.

## Install

Using npm:

```sh
npm install --save-dev @figma-export/output-components-as-svgstore
```

or using yarn:

```sh
yarn add @figma-export/output-components-as-svgstore --dev
```
npm package: @figma-export/output-styles-as-css
Description: Outputter for @figma-export that exports styles to CSS
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/output-styles-as-css

> Styles Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports styles to CSS.

With this outputter you can export all the styles as variables inside a `.css` file.

This is a sample of the output:

```sh
$ tree output/
# output/
# └── _variables.css
```


## .figmaexportrc.js

You can easily add this outputter to your `.figmaexportrc.js`:

```js
import asCss from '@figma-export/output-styles-as-css'

export default {
    commands: [
        ['styles', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            outputters: [
                asCss({
                    output: './output'
                })
            ]
        }],
    ]
}
```

`output` is **mandatory**.

`getFilename` and `getVariableName` are **optional**.

```js
import asCss from '@figma-export/output-styles-as-css'
import { kebabCase } from '@figma-export/utils'

...

asCss({
    output: './output',
    getFilename: () => '_variables',
    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
})
```

> *defaults may change, please refer to `./src/index.ts`*

## Install

Using npm:

```sh
npm install --save-dev @figma-export/output-styles-as-css
```

or using yarn:

```sh
yarn add @figma-export/output-styles-as-css --dev
```
npm package: @figma-export/output-styles-as-less
Description: Outputter for @figma-export that exports styles to LESS
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/output-styles-as-less

> Styles Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports styles to LESS.

With this outputter you can export all the styles as variables inside a `.less` file.

This is a sample of the output:

```sh
$ tree output/
# output/
# └── _variables.less
```


## .figmaexportrc.js

You can easily add this outputter to your `.figmaexportrc.js`:

```js
import asLess from '@figma-export/output-styles-as-less'

export default {
    commands: [
        ['styles', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            outputters: [
                asLess({
                    output: './output'
                })
            ]
        }],
    ]
}
```

`output` is **mandatory**.

`getFilename` and `getVariableName` are **optional**.

```js
import asLess from '@figma-export/output-styles-as-less'
import { kebabCase } from '@figma-export/utils'

...

asLess({
    output: './output',
    getFilename: () => '_variables',
    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
})
```

> *defaults may change, please refer to `./src/index.ts`*

## Install

Using npm:

```sh
npm install --save-dev @figma-export/output-styles-as-less
```

or using yarn:

```sh
yarn add @figma-export/output-styles-as-less --dev
```
npm package: @figma-export/output-styles-as-sass
Description: Outputter for @figma-export that exports styles to SASS and SCSS
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/output-styles-as-sass

> Styles Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports styles to SASS and SCSS.

With this outputter you can export all the styles as variables inside a `.sass` or `.scss` file.

This is a sample of the output:

```sh
$ tree output/
# output/
# └── _variables.scss
```


## .figmaexportrc.js

You can easily add this outputter to your `.figmaexportrc.js`:

```js
import asSass from '@figma-export/output-styles-as-sass'

export default {
    commands: [
        ['styles', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            outputters: [
                asSass({
                    output: './output'
                })
            ]
        }],
    ]
}
```

`output` is **mandatory**.

`getExtension`, `getFilename` and `getVariableName` are **optional**.

```js
import asSass from '@figma-export/output-styles-as-sass'
import { kebabCase } from '@figma-export/utils'

...

asSass({
    output: './output',
    getExtension: () => 'SCSS',
    getFilename: () => '_variables',
    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
})
```

> *defaults may change, please refer to `./src/index.ts`*

## Install

Using npm:

```sh
npm install --save-dev @figma-export/output-styles-as-sass
```

or using yarn:

```sh
yarn add @figma-export/output-styles-as-sass --dev
```
npm package: @figma-export/output-styles-as-style-dictionary
Description: Outputter for @figma-export that exports styles to style-dictionary tokens
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/output-styles-as-style-dictionary

> Styles Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports styles to [Style Dictionary](https://amzn.github.io/style-dictionary/#/) JSON format.

With this outputter you can export all the styles as variables inside a `.json`.

This is a sample of the output:

```sh
$ tree output/
# output/
# └── base.json
```


## .figmaexportrc.js

You can easily add this outputter to your `.figmaexportrc.js`:

```js
import asStyleDictionary from '@figma-export/output-styles-as-style-dictionary'

export default {
    commands: [
        ['styles', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            outputters: [
                asStyleDictionary({
                    output: './output'
                })
            ]
        }],
    ]
}
```

`output` is **mandatory**.

`getExtension`, `getFilename` and `getVariableName` are **optional**.

```js
import asStyleDictionary from '@figma-export/output-styles-as-style-dictionary'
import { kebabCase } from '@figma-export/utils'

...

asStyleDictionary({
    output: './output',
    getExtension: () => 'JSON',
    getFilename: () => 'base',
    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
})
```

> *defaults may change, please refer to `./src/index.ts`*

## Install

Using npm:

```sh
npm install --save-dev @figma-export/output-styles-as-style-dictionary
```

or using yarn:

```sh
yarn add @figma-export/output-styles-as-style-dictionary --dev
```
npm package: @figma-export/transform-svg-with-svgo
Description: Transformer for @figma-export that optimizes svgs using svgo tool
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/transform-svg-with-svgo

> Transformer for [@figma-export](https://github.com/marcomontalbano/figma-export) that optimizes svgs using [svgo](https://github.com/svg/svgo) tool.

## Install

Using npm:

```sh
npm install --save-dev @figma-export/transform-svg-with-svgo
```

or using yarn:

```sh
yarn add @figma-export/transform-svg-with-svgo --dev
```

## Usage

You can transform an svg before exporting with svgo:

```js
import transformSvgWithSvgo from '@figma-export/transform-svg-with-svgo'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons', 'unit-test'],
      transformers: [
        transformSvgWithSvgo({
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false,
                }
              }
            },
            {
              name: 'removeDimensions'
            }
          ]
        })
      ],
    }],
  ]
}
```
npm package: @figma-export/types
Description: Type definition for @figma-export
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/types

> Types for [@figma-export](https://github.com/marcomontalbano/figma-export).

## Install

Using npm:

```sh
npm install --save-dev @figma-export/types
```

or using yarn:

```sh
yarn add @figma-export/types --dev
```
npm package: @figma-export/utils
Description: Utils for @figma-export
Author: Marco Montalbano
Latest version: 6.4.0

# @figma-export/utils

> Utils for [@figma-export](https://github.com/marcomontalbano/figma-export).

## Install

Using npm:

```sh
npm install --save-dev @figma-export/utils
```

or using yarn:

```sh
yarn add @figma-export/utils --dev
```
npm package: @figma-plugin/helpers
Description: A collection of helper functions useful when creating Figma plugins
Author: Figma Community
Latest version: 0.15.2

# Figma Plugin Helper functions
[![npm](https://img.shields.io/npm/v/@figma-plugin/helpers?logo=npm&cacheSeconds=1800)](https://www.npmjs.com/package/@figma-plugin/helpers)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@figma-plugin/helpers?cacheSeconds=1800)](https://bundlephobia.com/result?p=@figma-plugin/helpers)

A collection of useful helper functions to import to your Figma plugin project

## Installation

```bash
npm i @figma-plugin/helpers
# or
yarn add @figma-plugin/helpers
```
## Usage

```jsx
import { isTextNode } from "@figma-plugin/helpers";

const firstTextNode = figma.currentPage.findOne(node => isTextNode(node));
```

## Documentation

Find more information about each helper function in [`/docs`](./docs/globals.md) directory.

## Roadmap
- Write a contribution guidelines
- Source additional helper functions from the community
- Write a docs