Generate development-ready theme JSON / SCSS/ LESS files from Figma Styles
- Parse Styles from a Figma file ID
- Works with Styled System and other CSS-in-JS setups
- Generetes JSON, ans css compactible with different preprocessors (scss, less, etc.)
- Built with figma-api
npm i figmex
figmexas a dev dependency in your project
- Get a personal access token for the Figma API
- Create a
.envfile with your access token
- Alternatively add an environment variable for
- Add an npm run script:
figmex <figma-file-id>(see params for output)
- Run the script to create a
theme.jsonand styles file based on Figma Styles
figmex can export styles from files in strict format, for example please check: https://www.figma.com/file/Z4RWc6X1BN5UlM6myQtt1d/tokens-Copy?node-id=0%3A1 make sure that page and artboard names are the same.
In further releases I will add support to export from figma project styles.
Options can be passed as CLI flags or included in a
figmex object in your
-d: output directory (default current working directory), default './styles'
-f: include additional metadata from the Figma API, default 'less'
--metadata: include additional metadata from the Figma API
Based on Brent Jackson's figma-theme