# figma-icons-tokens

> Figma-icons-tokens aims to import figma icons given a design tokens configuration file exposed by Tokens Studio Figma.

Latest version **1.5.2** (published 2024-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install figma-icons-tokens
pnpm add figma-icons-tokens
yarn add figma-icons-tokens
bun add figma-icons-tokens
```

Provides the command `figma-icons-tokens`.

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.2 |
| Published | 2024-10-16 |
| First published | 2023-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 20.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Javier Samper Arias |
| Maintainers | jsamper |
| Keywords | cli, Figma, design, tokens, Design Tokens, Design System, Tokens Studio Figma |

## Links

- npm: https://www.npmjs.com/package/figma-icons-tokens
- Repository: https://github.com/Jsamper92/figma-icons-tokens
- Homepage: https://github.com/Jsamper92/figma-icons-tokens#readme
- Issues: https://github.com/Jsamper92/figma-icons-tokens/issues
- npm.io page: https://npm.io/package/figma-icons-tokens

## Dependencies (3)

- [colors](https://npm.io/package/colors.md) 1.4.0
- [dotenv](https://npm.io/package/dotenv.md) 16.0.3
- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.9

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 1.5.2 (latest) — 2024-10-16
- 1.5.1 — 2024-10-15
- 1.5.0 — 2023-05-26
- 1.4.8 — 2023-05-23
- 1.4.7 — 2023-05-03
- 1.4.6 — 2023-05-03
- 1.4.5 — 2023-04-24
- 1.4.4 — 2023-04-19
- 1.4.3 — 2023-04-19
- 1.4.2 — 2023-03-12
- 1.4.1 — 2023-03-12
- 1.4.0 — 2023-03-05
- 1.3.1 — 2023-03-04
- 1.3.0 — 2023-02-27
- 1.2.3 — 2023-02-24
- … 8 more at https://npm.io/package/figma-icons-tokens/versions

## README

# Figma-icons-tokens

Figma-icons-tokens aims to import figma icons given a design tokens configuration file exposed by [Tokens Studio Figma](https://tokens.studio/).

## Installation

```
npm install figma-icons-tokens
```

## Example

```
figma-icons-tokens --file=tokens.json --theme=global --key=icon --path=assets
```

Options flags command line:

| Flags | Description                                         |
| ----- | --------------------------------------------------- |
| file  | File Configuration                                  |
| theme | Theme name where the icons to import are specified. |
| key   | Key where the icons to import are located.          |
| path  | Path where the imported icons should be exposed.    |

Initially, the link to be copied must be the node above the vector that defines the icon. To guarantee the correct display of the icon, it must be a single vector.

Define an environment variables file with the authorization token and figma file id:

```

FIGMA_TOKEN=figX_XXXXXXXXXXXXXXXXXXX-XXX

```

For the correct operation of the library, It is necessary to present a configuration file with the structure defined in the Figma Studio Tokens standard and the link obtained from the icons to import. It is also possible to nest the same icons based on the different sizes by breaking points of this.

```

{
"global": {
    "icon": {
        "delete": {
            "xs": {
                "value": "https://www.figma.com/file/XXXXXXXXXXX/An%C3%A1lisis-componentes-visuales-%2B-Figma?node-id=6%3A87&t=vc9GOS1lovXQoneW-4",
                "type": "asset"
            },
            "md": {
                "value": "https://www.figma.com/file/XXXXXXXXXXX/An%C3%A1lisis-componentes-visuales-%2B-Figma?node-id=6%3A87&t=vc9GOS1lovXQoneW-4",
                "type": "asset"
            },
            "lg": {
                "value": "https://www.figma.com/file/XXXXXXXXXXX/An%C3%A1lisis-componentes-visuales-%2B-Figma?node-id=6%3A87&t=vc9GOS1lovXQoneW-4",
                "type": "asset"
            }
        },
        "add": {
            "value": "https://www.figma.com/file/XXXXXXXXXXX/An%C3%A1lisis-componentes-visuales-%2B-Figma?node-id=6%3A87&t=vc9GOS1lovXQoneW-4",
            "type": "asset"
        },
        "next": {
            "value": "https://www.figma.com/file/XXXXXXXXXXX/An%C3%A1lisis-componentes-visuales-%2B-Figma?node-id=6%3A87&t=vc9GOS1lovXQoneW-4",
            "type": "asset"
        },
        "previous": {
            "value": "https://www.figma.com/file/XXXXXXXXXXX/An%C3%A1lisis-componentes-visuales-%2B-Figma?node-id=6%3A87&t=vc9GOS1lovXQoneW-4",
            "type": "asset"
        }
    }
},
"$themes": [],
"$metadata": {
        "tokenSetOrder": [
            "global"
        ]
    }
}

```

## Node.js API

You can use this module as a node module.

```
const figma = require('figma-icons-tokens');
```

### figmaIconsTokens ({theme: string, path: string, file: string, key: string, data: Object}) : Promise<{path: string; name: string; data: Object}[]>

```
const [figma, argv] = [
  require('figma-icons-tokens')
  require('minimist')(process.argv.slice(2)),
];

const { tokens, theme, path } = argv;
const { figmaIconsTokens } = figma;

figmaIconsTokens({
        theme,
        path,
        file: tokens,
        key: 'icons',
        data: {
                "ICON_X": {
                    "value": "https://www.figma.com/file/XX",
                    "type": "asset"
                }
            }
    })
  .then((ev) => console.log(ev))
  .catch((error) => console.error(error))
```

| Args  | Type                   | Description                                         |
| ----- | ---------------------- | --------------------------------------------------- |
| file  | String                 | File Configuration                                  |
| theme | String                 | Theme name where the icons to import are specified. |
| key   | String                 | Key where the icons to import are located.          |
| path  | String                 | Path where the imported icons should be exposed.    |
| data  | Object <br/>(Optional) | Object with icons to import files svg               |

## Changelog

[Github Releases](https://github.com/Jsamper92/figma-icons-tokens/tags)

## Contributing

Thanks for contributing to figma-icons-tokens development!
Feature requests and bug reports can be filed on [Github](https://github.com/Jsamper92/figma-icons-tokens)

If you are contributing code with new features or bug-fixes:

- Fork the project, and create a branch for your contribution.
- Follow the development guide below to get figma-icons-tokens to work.
- Open a pull request on [Github](https://github.com/Jsamper92/figma-icons-tokens/issues)

## License

[MIT License](LICENSE) © [Javier Samper Arias](https://github.com/Jsamper92)

---
_Source: https://npm.io/package/figma-icons-tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
