microsoft-figma
microsoft-figma copied to clipboard
Published
20 hours ago •
oriziv
oriziv
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
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/
oriziv