______________        ______        
___  ____/__(_)______ ___  /____  __
__  /_   __  /__  __ `/_  /__  / / /
_  __/   _  / _  /_/ /_  / _  /_/ / 
/_/      /_/  _\__, / /_/  _\__, /  
              /____/       /____/ 

CLI tool that fetches data from the Figma Web API and generates styling elements and components

Installation

You can install figly with yarn or npm as a global or local package, we recommend installing it as a dev dependency in your project.

yarn add figly --dev

You can then run yarn figly. If no configuration is detected the CLI will prompt you for all the necessary configuration and store your responses in a figly.config.js file in your project root.

Note: You can run yarn figly without the init parameter since it's the default.

figly supports the following configuration formats:

• a figly property in package.json
• a .figlyrc file in JSON or YAML format
• a .figlyrc.json file
• a .figlyrc.yaml, .figlyrc.yml, or .figlyrc.js file
• a figly.config.js file exporting a JS object

• Installation
• Usage
• Commands

Usage

$ npm install -g figly
$ figly COMMAND
running command...
$ figly (-v|--version|version)
figly/3.0.3 darwin-x64 node-v16.1.0
$ figly --help [COMMAND]
USAGE
  $ figly COMMAND
...

Commands

• figly config:clear
• figly generate
• figly init

figly config:clear

clears the internal cache

USAGE
  $ figly config:clear

OPTIONS
  -h, --help     show CLI help
  -v, --version  show CLI version

See code: src/commands/config/clear.ts

figly generate

creates an example app at the specified location

USAGE
  $ figly generate

OPTIONS
  -h, --help       show CLI help
  -n, --name=name  folder name to copy the example project into
  -v, --version    show CLI version

See code: src/commands/generate.ts

figly init

runs the main figly command

USAGE
  $ figly init

OPTIONS
  -a, --assets=assets          Assets to produce artifacts for i.e colors,icons,typography
  -c, --nocomp                 Skip component prompt when no config is detected
  -d, --dsmversion=dsmversion  Figma File Version
  -f, --force                  Force figly to generate assets
  -g, --svgformat=svgformat    What format do you want svg to be generated in?
  -h, --help                   show CLI help
  -m, --formats=formats        File formats to support i.e js,scss
  -o, --output=output          Output directory for artifacts
  -p, --projectid=projectid    Figma project id
  -s, --staticdir=staticdir    Location to write static assests i.e icons & images or spritesheets
  -t, --token=token            Figma API Token
  -u, --staticurl=staticurl    Path to use when referencing static assets
  -v, --version                show CLI version
  -w, --watch                  Watch for changes to config

See code: src/commands/init.ts

Figma naming conventions

In order for figly to correctly identify and parse your design files there are certain naming convention you need to follow: Unless mentioned otherwise the names you give your layers will correspond to the variable/mixin name that gets generated by figly.

NOTE: All layers that start with __ will be ignored

You can check out the example app & DSM for some guidance:

• Example App: run yarn figly generate --name=[folder_name]
• Figma DSM: https://www.figma.com/file/9Slpevne49qHQwq5aVA42W/Figlet?node-id=0%3A1

Colors

Top Layer Name: Colors, Top Layer Type: FRAME Color Names: snake_case || camelCase, Color Type: RECTANGLE

Ensure each color is represented by a RECTANGLE node, you should create a local color palette and add these to your rectangles fill property.

Icons

Layer Name: Icons, Top Layer Type: FRAME Icon Names: snake_case || camelCase, Type: COMPONENT

Besides those mentioned above there are no restrictions to icon names as long as they are COMPONENT nodes

Typography

Top Layer Name: TypographyII (This will soon change to Typography), Top Type: FRAME Typography Names: snake_case || camelCase, Type: TEXT

Besides those mentioned above there are no restrictions to typography names as long as they are TEXT nodes

Components

We only support button components at the moment but are planning to add more soon. If you need other components you can write your own parsers and adjust the figly config to point to them, more on that in the Custom Parsers section.

You can find a list of default components and corresponding naming conventions in the plugins section.

Plugins

Button

example config

...
    "components": [
        {
            "name": "button",
            "id": "16:8",
            "parser": "plugins/button"
        }
    ]
...

Figma naming conventions

• Ensure your layers (buttons) are components i.e type = COMPONENT
• Ensure you have a layer named button containing the styles for your button, it must be of type RECTANGLE

Custom Parsers

You can configure your own parsers by adding them to the figly config:

{
  ...
    "components": [
        {
            "name": [component_name], // can be any name will correspond to the file name containing the generated styles
            "id": [node_id], // the node id of the FRAME that contains your components
            "parser": [./relative_path/to/parser] // relative to project root, the parser must be the default export
        }
    ]
  ...
}

Custom parsers must have the following type:

(components: Figma.ComponentNode[]) => JSButtonParserOutput | string[]

You can read up on the different node types and their properties at https://www.figma.com/developers/api#node-types or checkout the types folder

Contributing

The recommended approach to development is using yarn workspaces, you can read up on how they work here -->> https://classic.yarnpkg.com/en/docs/workspaces/

You can use the following package.json file for your workspace

{
    "private": true,
    "workspaces": {
        "packages": ["packages/*"],
        "nohoist": ["**/cz-conventional-changelog", "**/cz-conventional-changelog/**", "**/@oclif", "**/@oclif/**"]
    }
}

The project also uses commitizen and autchanglog to track project history and to produce release notes, you do not need to use yarn ci every time you make a commit, but make sure that final commit that marks the completion of a feature, refactor or bugfix is committed using yarn ci.

Running the Test Suite

• yarn test

Version control

Simply run npm version [patch|minor|major], you can also run it with a specific version ex. npm version 1.0.1

This will ensure all tags are pushed to github

Publish

Just run npm publish

You will need to be logged in to span's npm account to do this, please contact Deoward or Ruaan for auth details