Figma Extract Token

• Getting Started
• How it Works
• Figma Strcture
• Config
• Style Dictionary
• Versioning
• Styled System
• Reference Table
• Packages
• Guides

Install

yarn add figma-extract-token

npm i figma-extract-token

Features

• Extract foundation styles from API Figma and convert to tokens.
• Extract components style composed by inheritance from foundation tokens.
• Compose multiple format of extraction SCSS, Typescrit, ES6, Android, IOS and so on with Style dictionary.
• Auto versioning controller, know what really changes from the last extraction.
• Create change log of designers comments on library versioning.
• Automate the token extraction with webhook and automated publish of library.
• Create a dicionary name for the variable composition.
• Works with most css-in-js libraries, composition inspired by Styled system.

Try It Out

Try the examples

• Basic example
• Advanced example
• Styled system example

Concept

This extractor is based on Foundations and Components, where the Design is the responsable to create token names, deprecated status, component comment and composition. The Developers should only create the extractor mapper and Run the script, all files generated by the extractor should not be modify by the developer.

To see more check it out Documentation

Usage

Figma configuration

• First on Figma, create at a document based on this Figma Example, is required to compose two pages Foundation and Components.
• Keep the document IDm you’re going to need to run the script, you can find on url www.figma.com/file/PodXJDGjtBAdWiWtbrNtIP/…
• Generate and keep a personal token, you can find on Main menu/ Help and account / account settings

Dictionary configuration

{
  "source": ["build/**/*tokens.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "build/scss/",
      "files": [{
        "destination": "_tokens.scss",
        "format": "scss/variables"
      }]
    }
  }
}

That file is responsable to compose the extraction of component to a file for your project. More examples of dictionary configuration check it out on Style dictionary Config

Figma extractor configuration

{
  "outDir": "./build",
  "dictionaryConfig": "./dictionary.config.json",
  "foundation": {
    "name": "Foundation",
    "children": {
      "Letter Spacing": {
        "extract": ["letterSpacing"]
      },
      "Color": {
        "extract": ["fills"]
      }
    }
  },
  "components": {
    "name": "Components",
    "inheritance": {
      "fills":  "color",
      "letterSpacing": "letterSpacing"
    }
  }
}

Run the command

Run examples: Add a environments var with you figma token:

export PERSONAL_TOKEN=123123...

cd example/advanced
yarn
yarn start

cd example/basic
yarn
yarn start

Extraction:

figma-extract-token--token=PERSONAL_TOKEN --document=DOCUMENT_ID --config=figma.config.json

Build:

yarn build

Dev:

yarn dev

Lint:

yarn lint

Test:

yarn test

Format:

yarn format

To learn more, see the Getting Started guide or read the docs.

Further Reading

To Do

Related

To Do

Feedback

Any questions or suggestions?

You are welcome to discuss it on: