DT-Tokens

• DT-Tokens
• App Overview
• Figma Setup
• Usage
• Commands

App Overview

• This CLI tool allows for components in Figma to be translated into design tokens.
• These tokens can then be used to generate components in React for different UI libraries. Currently, Material UI is the only supported library.
• This app currently generates a theme.ts, colors.ts, palette.ts, buttons.ts, typography.ts, and a React component for each icon.
  • Read more about Material UI Theming.

Figma Setup

• In order to run the app, you must have a personal access token for the Figma API. Click Here to generate a token.

• Along with an access token, you will also need the unique file key for the Figma file you are using.

  • This key is provided in the file URL.
    • Example: https://www.figma.com/file/<File Key>/<File Name>

• Duplicate the DeveloperTown template file from the Figma community.

• The only page that is going to be read is the _tokens page. This is where you will fill out the "form" with styles used by the entire app.

• Naming conventions are the key to the styles being transferred correctly.

  • Color naming: The naming standards come from Material UI and are in the form of Colors/[Palette Color]/[Color Variant]/[Color Name].
    • Options for Palette Color include Primary, Secondary, Global, Error, Success, Info, Warning, Grey, CTA
    • Example Color - Colors/Primary/Light/SkyBlue
  • Typography: The naming for typography follows Material UI standards.
    • Options for typography: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, button, overline
  • Icons: Icons can be instances of a component or a frame inside Figma. Icons can have any name.
    • Example: help-circle-outline, pdf icon, download
  • Buttons: There are two types of buttons that are supported. The contained and outlined buttons from Material UI. The styles from the buttons will be places in the overrides section of the theme.ts file.

Usage

$ npm install -g dt-tokens
$ figma COMMAND
running command...
$ figma (-v|--version|version)
dt-tokens/1.0.5 darwin-x64 node-v14.15.0
$ figma --help [COMMAND]
USAGE
  $ figma COMMAND
...

Commands

figma start

EXAMPLE COMMAND
  $ figma start -k <Figma File Key> -t <Figma Access Token> --stylesPath <MUI file directory> --iconsPath <Icons file directory>

OPTIONS
  -h, --help                               show CLI help
  -i, --createIcons                        Use this flag to create React components for each icon
  -k, --figmaKey=figmaKey                  (required) Figma file key
  -m, --createMaterial                     Use this flag to create material files
  -n, --name=name                          name to print
  -t, --figmaAccessToken=figmaAccessToken  (required) Figma access token
  --iconsPath=iconsPath                    [default: /src/icons] File path for icons directory
  --stylesPath=stylesPath                  [default: /src/components/icons] File path for material styles directory