# figma-parser

> Parse Figma design files via Figma API

Latest version **0.4.0** (published 2024-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install figma-parser
pnpm add figma-parser
yarn add figma-parser
bun add figma-parser
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2024-10-11 |
| First published | 2018-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 46 |
| Author | Rihards Gravis |
| Maintainers | rihardsgravis |

## Links

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

## Dependencies (3)

- [svgo](https://npm.io/package/svgo.md) ^3.3.2
- [axios](https://npm.io/package/axios.md) ^1.7.7
- [markup-js](https://npm.io/package/markup-js.md) ^1.5.21

## Recent versions

- 0.4.0 (latest) — 2024-10-11
- 0.3.3 — 2022-11-28
- 0.3.2 — 2022-11-25
- 0.3.1 — 2022-11-25
- 0.3.0 — 2022-10-18
- 0.2.5 — 2022-04-26
- 0.2.4 — 2022-02-02
- 0.2.3 — 2021-08-18
- 0.2.2 — 2021-07-05
- 0.2.0 — 2020-07-21
- 0.1.7 — 2020-06-23
- 0.1.6 — 2020-06-23
- 0.1.5 — 2020-06-09
- 0.1.4 — 2020-04-15
- 0.1.3 — 2020-03-02
- … 12 more at https://npm.io/package/figma-parser/versions

## README

# figma-parser

**Work in progress!**
Parse Figma design files via Figma API to design tokens

## Usage:

### Prepare Figma file

Each token has to be a single layer following a specific naming (besides that, organise and style your design file as you want):

-   **Colors** named `color-xxx` with **fill as the token value**
-   **Space** named `space-xxx` with **height as the token value**
-   **Font family** named `font-family-xxx` with **font family set as token value**
-   **Font size and weight** named `font-style-xxx` with **font size and weight set as token value**
-   **Icons** named `icon-xxx` with **the vector icon shape as the first child layer**
-   **Illustrations** named `illustration-xxx` with **the vector illustration as the first child layer**

The token can also be a group named by the rules. The style will be read by the last (bottom most) layer of the group.

Here's an example file - https://www.figma.com/file/s3DjttpILZzr4LC6WrkJun/Dark-theme?node-id=0%3A1

### Download tokens

```
const FigmaParser = require("figma-parser");

const figma = new FigmaParser({
  token: "your-access-token"
});

(async () => {
  // Parse all tokens
  const output = await figma.parse("figma-file-id");

  // Parse optional tokens
  const output = await figma.parse("figma-file-id", ["colors", "space", "fonts", "fontSizes", "fontWeights"]);

  // Raw JSON file
  console.log(output);

  // Markup as JSON
  console.log(figma.markup("json"));

  // Markup as Typescript definitions
  console.log(figma.markup("ts"));

  // Pass custom markup template, see /lib/templates.ts
  console.log(figma.markup("your-custom-template"));
})();

```

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