@spacefold/tokens v0.0.2-alpha.5

Spacefold Tokens

Simplify your digital product. Always keep your design tokens up to date.

Getting started

Global installation

# yarn
yarn global add @spacefold/tokens

# npm
npm install -g @spacefold/tokens

Local installation (recommended)

# yarn
yarn add -D @spacefold/tokens

# npm
npm install -D @spacefold/tokens

Update / generate your tokens

It's that simple.

# yarn
yarn spacefold-tokens

# npx
npx spacefold-tokens

Configuration

You've got two options to override the configuration's defaults. Either you use a config file or CLI arguments.

Default config

Below is the complete set of what you can configure, together with the defaults.

Don't worry, overriding all of the defaults is explained right below.

{
  "debugMode": false,
  "authToken": "",
  "projectId": "",
  "figmaFileVersion": "published",
  "tokensDirectoryName": "tokens",
  "tokensFileName": "tokens.json",
  "converter": {}
}

Config file

You'll need to use a JSON-formated configuration file at the root of your project to use its settings.

Spacefold Tokens will pick up the path by assessing the current working directory and looking for a .spacefoldrc file there.

If it finds it, it will use it.

See the config features.

CLI arguments

You can run the spacefold-token command w/ arguments in your command line environment of choice.

🚨 The CLI arguments will override your .spacefoldrc config file and .env variables.

See the config features.

All configuration features

Debug mode

Toggle debug mode.

Default is false.

RC file

{
  ...
  "debug": true | false,
  ...
}

CLI

spacefold-tokens [--debug | -d]

Spacefold auth token

Your authentication token (get it on Spacefold). You need to specify it in order to use Spacefold services.

You can pass your auth token three different ways:

• Using the .spacefoldrc file and hardcoding it inside (not recommended).
• Using a .env file w/ a SPACEFOLD_AUTH_TOKEN variable inside it (default variable name).
• Using a .env file. Specifying a custom .env variable name in your .spacefoldrc file.
• Using CLI.

Default is "".

RC file hardcoded

// RC file
{
  ...
  "authToken": "you can hardcode your auth token (not recommended)",
  ...
}

.env w/ default variable name

# .env file

SPACEFOLD_AUTH_TOKEN="paste your auth token here"

.env w/ custom variable name

// RC file
{
  ...
  "authToken": "CUSTOM_VAR_NAME",
  ...
}

# .env file

CUSTOM_VAR_NAME="paste your auth token here"

CLI

spacefold-tokens [--authToken | -at] [paste your auth token]

Spacefold project id

The Spacefold project id your dev env is rattached to.

Default is ''.

RC file

{
  ...
  "projectId": '',
  ...
}

CLI

spacefold-tokens [--projectId | -id] [paste your project id]

Figma files version

Which Figma version type to sync with. Published, saved or live.

Default is 'published'.

RC file

{
  ...
  "figmaFileVersion": 'published' | 'saved' | 'live',
  ...
}

CLI

spacefold-tokens [--figmaFileVersion | -fv] [published | saved | live]

Design tokens directory name

The directory name in which your design tokens' json file will be saved.

Default is 'tokens'.

RC file

{
  ...
  "tokensDirectoryName": '',
  ...
}

CLI

spacefold-tokens [--tokensDirectoryName | -tdir] [dirname]

Design tokens file name

The filename (w/ extension) in which your design tokens will be written.

Default is 'tokens.json'.

RC file

{
  ...
  "tokensFileName": '',
  ...
}

CLI

spacefold-tokens [--tokensFileName | -tfile] [filename]

Design tokens converter config

To use your design tokens in Javascript or Typescript you can exploit the design tokens' JSON file. But some of you will need to use these tokens in other languages like LESS, SASS, etc.

With this feature you can convert your design tokens into other languages.

List of supported languages: |Languages| |---| |SCSS|

RC file

{
  ...
  "converter": {
    "languageName": {
      "path": './directory/filename.extension'
    },
    // real life example
    "scss": {
      "path": './assets/scss/_tokens.scss'
    },
  },
  ...
}

CLI

To convert your design tokens into a specific language you'll necessarily need to use the config file. A tokens converter config would be too verbose w/ CLI arguments.