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
      $ figgp --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

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

License

MIT

Credits

Figma

4aficiona2/figgo