👯♀️A cli tool makes your Figma and local design token stay in sync 👯♂️
MIT License
npm i figgo -g
Typography
, Palette
and Space
in your figma file.account setting
and grab it.Assume you have already installed Figgo...
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.
figgo --sync
, let tokens store in the location you wish.figgo --sync board_name
to update tokens selectively.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"
},
{
...
}
]
}
figgo --sync
and all tokens will store in the path you wish or update selectively via appending board name.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
Edit setup configuration from config.js
in ~/.figgo
folder. You can also manually add Figma board through editting this file.
yarn install
yarn start [options]
yarn test
yarn build
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
MIT