figgo
A CLI tool make your design tokens stay up to date with your Figma design styleguide
Last updated 19 days ago by b3nnyl .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install figgo 
SYNC missed versions from official npm registry.

Figgo

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

img

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

url

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

Current Tags

  • 0.2.3                                ...           latest (19 days ago)

14 Versions

  • 0.2.3                                ...           19 days ago
  • 0.2.2                                ...           a month ago
  • 0.2.1                                ...           a month ago
  • 0.1.11                                ...           9 months ago
  • 0.1.10                                ...           9 months ago
  • 0.1.9                                ...           9 months ago
  • 0.1.8                                ...           9 months ago
  • 0.1.7                                ...           9 months ago
  • 0.1.6                                ...           9 months ago
  • 0.1.5                                ...           9 months ago
  • 0.1.4                                ...           9 months ago
  • 0.1.3                                ...           9 months ago
  • 0.1.2                                ...           9 months ago
  • 0.1.1                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 4
Last Day 0
Last Week 0
Last Month 62
Dependencies (7)
Dev Dependencies (12)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |