jxnblk / 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

figma-theme's Issues

Doesn't extract styles from Figma Components

This is based on my very limited testing…

Take this file in Figma, just a box with the Style 'Red' applied:

The script output is like so:

{
  "colors": {
    "Red": "#eb5757"
  },
  "textStyles": {},
  "fonts": [],
  "fontSizes": [],
  "fontWeights": [],
  "lineHeights": []
}

However, if you convert it to a Figma Component:

And re-run the script, the style disappears:

{
  "colors": {},
  "textStyles": {},
  "fonts": [],
  "fontSizes": [],
  "fontWeights": [],
  "lineHeights": []
}

cant create output

Awesome work!

seems that its not aligned to latest schema
its failing when i run it, here is the stack trace

TypeError: Cannot read property 'value' of undefined
at textStyles.map.map.style (index.js:103:17)
at Array.map ()
at module.exports (index.js:97:6)
at figma.file.then.res (cli.js:91:33)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
TypeError: Cannot read property 'status' of undefined
at figma.file.then.catch.err (cli.js:107:24)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

cant get line height values in pixels

Hi

I'm using your code in order to get the theme from figma.
i have noticed that the output json styles for line height extract it in percentage which is not convertable to pixels

can you adapt your code to extract the styles for line heights in pixels ?
(opened PR)
Thanks
Ori