oriziv / microsoft-figma

Produce sass/less variables files from figma

Figma styles to SASS/LESS files

THIS IS NO LONGER MAINTAINED AND MOVED HERE https://github.com/oriziv/figma-sass-less-plugin AS FIGMA PLUGIN

CAN BE FOUND HERE https://www.figma.com/community/plugin/742750636238601912/CSSGen

Extract figma styles into scss/less files.

Prerequisites

You need to install Node JS if you dont have it already installed

1. Install NPM dependencies

npm install

2. Install gulp

npm install -g gulp

3. Get you figma personal access token

Documentation on how to get tokens

How to create styles at figma file

Learn More

Run

gulp extract-figma-styles --token=<FIGMA_PERSONAL_ACCSESS_TOKEN> --fileId=<FIGMA_FILE_ID>

This will produce 3 files: colors.scss ,typo.scss and the json file figma output.

More options

--colorFormat

rgba/hex

example: --colorFormat=hex

--colorFilename

name of the file contains the colors variables

default: _colors

example: --colorFilename=my_colors

--typoFilename

name of the file contains the texts styles mixins

default: _typo

example: --typoFilename=typography

--output

output fotmat scss or less

default: scss

example: --output=less

--outputDir

output location dir

default: dist/

example: --outputDir=../build/