ChandanMahapatra / figma-theme

Generate development-ready theme JSON files from Figma Styles

figma-theme

Generate development-ready theme JSON files from Figma Styles

• Parse Styles from a Figma file ID
• Works with Styled System and other CSS-in-JS setups
• Built with figma-js

npm i figma-theme

Getting Started

1. Install figma-theme 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: figma-theme <figma-file-id>
5. Run the script to create a theme.json file based on Figma Styles

Options

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

• --out-dir: output directory (default current working directory)
• --metadata: include additional metadata from the Figma API