b3nnyl / figgo

👯‍♀️A cli tool makes your Figma and local design token stay in sync 👯‍♂️

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

• 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

figgo's Issues

Output format CSS

Great tool! Do you plan by any chance a plain CSS output with custom properties (CSS variables)?

Read local figgo.config.json

Install doesn't work

I installed and reinstalled node 2 times, running node version 12.13.0

❯ npm i figgo -g
npm ERR! code ENOENT
npm ERR! syscall chmod
npm ERR! path /usr/local/lib/node_modules/figgo/dist/cli.js
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/figgo/dist/cli.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mariusnedelcu/.npm/_logs/2019-10-31T09_22_33_609Z-debug.log

Can anyone please tell me what is going on here ?

is this related to the plugin or to my environment ?

Figgo crashed if there no typography or color blocks

I trying load default color palette, but the Figgo fails because of there no any typography style.
A similar error happens when no colors styles on the page.

The error cause on these lines

figgo/lib/service.ts

Line 73 in f87c1a1

const colorBlocks = colorFrame[0].children.filter(

figgo/lib/service.ts

Line 109 in f87c1a1

const spaceBlocks = spaceFrame[0].children.filter(

TypeError: Cannot read property 'children' of undefined
    at Object.<anonymous> (/Users/a.plesovskikh/Work/mercury-front/node_modules/figgo/dist/service.js:151:45)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/a.plesovskikh/Work/mercury-front/node_modules/figgo/dist/service.js:4:58)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
TypeError: Cannot read property 'children' of undefined
    at Object.<anonymous> (/Users/a.plesovskikh/Work/mercury-front/node_modules/figgo/dist/service.js:85:47)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/a.plesovskikh/Work/mercury-front/node_modules/figgo/dist/service.js:4:58)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
TypeError: Cannot read property 'children' of undefined
    at Object.<anonymous> (/Users/a.plesovskikh/Work/mercury-front/node_modules/figgo/dist/service.js:118:47)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/a.plesovskikh/Work/mercury-front/node_modules/figgo/dist/service.js:4:58)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)

add example with git hook

Different Hex Color Output

My hex color output seems to be different from the one in Figma.

SCSS File = #ec5858;
Figma = #EB5757

Better font family token

_front_family: 'result' => _font_family = 'result,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol'