figmex

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

Getting Started

1. Install figmex as a dev dependency in your project
2. Get a personal access token for the Figma API
3. Create a .env file with your access token

• FIGMA_TOKEN=<personal-access-token>
• Alternatively add an environment variable for FIGMA_TOKEN

4. Add an npm run script: figmex <figma-file-id> (see params for output)
5. Run the script to create a theme.json and styles file based on Figma Styles

Now 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

Options can be passed as CLI flags or included in a figmex object in your package.json

• --out-dir, -d: output directory (default current working directory), default './styles'
• --format, -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