Reads tokens from your design tool and parses them into a unified format. Connects to your tool (e.g. figma) and parses out tokens. Initial Config:

module.exports = {  reader: {    tool: 'figma'  }};

## Figma​

You are able to export tokens that are available in Figma itself, such as colors, effects, texts and other named tokens, depending on your organization. Let's go through each of those cases and how to configure theemo to export them.

The flow for reading tokens from Figma is outlined here:

The green parts highlight the API at which you can customize this behavior to your needs.

### Connecting to Figma​

In order to read a Figma file, theemo needs credentials to request this data from the public Figma Rest-API. Connecting to figma requires figmaFile and figmaSecret parameters.

Figma doesn't natively support references (psst: you should not not abuse descriptions for that). While theemo itself isn't forced to strictly use the theemo plugin, it is the best option. For that you need jsonbinFile and jsonbinSecret to access references from theemo plugin

Let's scaffold a theemo.js config that's using Figma as reader tool and theemo as referening plugin:

const { FIGMA_FILE, FIGMA_SECRET, JSONBIN_FILE, JSONBIN_SECRET } = process.env;module.exports = {  sync: {    reader: {      tool: 'figma',      figmaFile: FIGMA_FILE,      figmaSecret: FIGMA_SECRET,      // referencer      referencer: {        type: 'figma-plugin',        plugin: 'theemo',        pluginConfig: {          jsonbinFile: JSONBIN_FILE,          jsonbinSecret: JSONBIN_SECRET,          formats: {            color: 'hex',            colorAlpha: 'rgb'          }        }      }    }  }};

For credentials, create a .env file with these variables:

FIGMA_FILE=FIGMA_SECRET=JSONBIN_FILE=JSONBIN_SECRET=

You'll find the secrets for both figma and jsonbin in their respective account pages. For the *_FILE variables, you'll find them as:

• FIGMA_FILE: https://www.figma.com/file/<file-id-is-here>/*
• JSONBIN_FILE: https://api.jsonbin.io/b/<file-id-is-here>

### Styles​

Styles are by far the most natural implementation of design tokens in Figma. Theemo reads every style through the Figma API, that exists in your file. Colors are likely to be the most interesting tokens to export from Figma.

#### isTokenByStyle()​

Each style found in the Figma file is passed into that function and being asked, whether this is a token or not.

The default implementation is, if the name of the token starts with a ., it will respond false. That is the default behavior of Figma, where you can't publish styles that begin with a . (as it is like a hidden folder on a unix system).

#### getNameFromStyle()​

To actually get the name of that style. By default, it will pass through the name of the token as in figma, replacing / with ..

You might want to annotate token names, e.g. prefix with the type of the style, such as: