Skip to content

RobsonMathias/figma-extract-token

Repository files navigation

Figma extract token

A simple way to extract token's component from Figma and convert to your front-end project. Documentation

stars Downloads Version size MIT License

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

Table of contents

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.

Docs


Further Reading

To Do

Related

To Do

Feedback

Any questions or suggestions?

You are welcome to discuss it on:

Tweet

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published