Figgo

A CLI tool make your design tokens always stay up to date with your Figma design styleguide

Install Figgo

npm i figgo -g

Figma Guide

• Create three frames named as Typography, Palette and Space in your figma file.
• Spread out your typography, color and spacing examples to the frames. Follow this figma example for the best outcomes.
• Grab the figma file's id.
• Generate your personal token at account setting and grab it.

Terminal Guide

Assume you have already installed Figgo...

Global setup

• Run figgo --init, answer a few setup questions where you will leave file id and personal token with Figgo. All configuration will save to ~/.figgo. Note: output directory needs to be absolute path.
• Tied your belt and type figgo --sync, let tokens store in the location you wish.
• You may run figgo --sync board_name to update tokens selectively.

Local setup

• Create figgo.json file under your project directory.

{
  "boards": [
    {
      "boardName": "your board name",
      "id": "figma id",
      "outputDir": "output directory (this can be a path relative to your project)",
      "outputFormat": "js or scss",
      "token": "your figma personal token"
    },
    {
      ...
    }
  ]
}

• Run figgo --sync and all tokens will store in the path you wish or update selectively via appending board name.

Basic CLI Usage

How to use
    $ figgo [<options> ...]
    Options
      --init, -i         Setup figma board and store configurations to global config files
      --sync, -s         Sync tokens based on (global/local) config files
      --edit, -e         Edit board information (not ready yet)
      --list, -l         List boards from global config files
      --remove, -r       Remove board from global config files
      --help, -h         Show help message
      --version, -v      Show installed version
    Examples
      $ figgo --init
      $ figgo --init board_name board_id output_absolute_path output_format(js|scss) figma_token
      $ figgo --edit board_name (not ready yet)
      $ figgo --list
      $ figgo --sync
      $ figgo --sync board_name
      $ figgo --remove board_name
      $ figgo --help
      $ figgo --version

Sync Token

Manual configuration

Edit setup configuration from config.js in ~/.figgo folder. You can also manually add Figma board through editting this file.

Dev Guide

• Installation yarn install
• development yarn start [options]
• test yarn test
• build yarn build

Changelogs

• 0.1.1 🚀 Alive

• 0.1.2 ✍️ Readme

• 0.1.3 🛠 Fix minor issues

• 0.1.5 🤠 Better UX

• 0.1.8 🤠 Project figgo.json is supported

• 0.1.11 🤠Fix minor issues and improve UX

• 0.2 🧩Support css variable, fixed test and CI

TODOs

• [x] CLI listing board information
• [x] CLI specify board sync
• [x] js output supports
• [x] css variable support
• [ ] Edit Figma board info from CLI
• [x] Well-formatted and styled output in terminal
• [ ] More screenshots and documentation

License

MIT

Credits

Figma