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)
• --out-name: output filename without extension (default "theme")
• --out-type: output type (default and currently only supported format is json)
• --filter: comma separated list for filtering outputs (e.g. --filter colors,textStyles)
• --metadata: include additional metadata from the Figma API
• --opacity-as-alpha: use fill opacity value as color's alpha channel
• --rgb: Use rgb(a) format in all color values
• --rgba: Use rgba format (instead of #rrggbbaa) in color values with an alpha channel (this is redundant when using --rgb option)
• --sort: sort results