npm package: @skits/figma-tokens
Description: Turn Figma design tokens into code
Author: Sam Wyness
Latest version: 2.2.0

# **@skits/figma-tokens**

Generate Design Tokens from your Figma Files

[![Build Status](https://github.com/skits-lab/figma-tokens/actions/workflows/test.yml/badge.svg)](https://github.com/skits-lab/figma-tokens/actions?query=workflow:Test+branch:main) [![npm latest version](https://img.shields.io/npm/v/@skits/figma-tokens/latest.svg)](https://www.npmjs.com/package/@skits/figma-tokens)

## Install

```bash
npm install --save-dev @skits/figma-tokens
```

## Usage

To build or update your tokens run.

```bash
npx skits-tokens sync
```

_Before building tokens make sure your project is configured properly - see setup below._

## Setup

#### API Token

Create a `.env` file in your projects root directory and add your Figma API personal access token and Figma file ID.

```Dotenv
FIGMA_FILE_ID="ABCDEFGH12345678"
FIGMA_TOKEN="figd_ABCDEFGH12345678"
```

_For more info on how to generate Figma personal access tokens, you can [follow this guide](https://www.figma.com/developers/api#access-tokens)_

#### Token configuration

The **@skits/figma-tokens** package is configured by ading a `figma-tokens.yml` file to the root of your project. You can run `npx skits-tokens init` to generate a config file after answering the prompts.

#### Configuration options

| Option            | Description                                                                                                                                                          | Default  |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `outputFileName`  | The name of the json file where the tokens should be generated - e.g the default value will create `tokens.json` file                                                | `tokens` |
| `outputTransform` | When generating the tokens file, you can choose how you want the tokens to be transformed (examples coming soon). Available options are - `'flat', 'group', 'array'` | `flat`   |
| `tokenFrames`     | A list of tokens frames that can be found in your Figma file. Currently supported token frames are - `'colors', 'typography', 'spacing'`                             | -        |

Example `figma-tokens.yml` file

```yml
outputFilename: tokens
outputTransform: group
tokenFrames:
  - colors
  - typography
  - spacing
```

## Available commands

### sync

Sync tokens values from your Figma file

```bash
npx skits-tokens sync
```

### init

Convenience command for configuring the figma-tokens.yml file in your project

```bash
npx skits-tokens init
```

## Generating tokens from your Figma board

Tokens are generated by mapping a Figma API response to a JSON output. Because of the flexibility
that Figma provides when creating designs, this tool uses a pre defined structure that needs to be
followed when creating frames for your tokens in Figma

### Creating a token in Figma

NOTE: When naming your Figma token frames the prefix `_tokens/` is required.

**Example (color tokens):**

1. Create a new Frame in Figma called `_tokens/colors`
2. Inside your new frame, create a new rectangle and name it `primary`.
3. Add your desired fill to the rectangle

_More documentation and examples coming soon!_