https://github.com/jxnblk/figma-theme

Generate development-ready theme JSON files from Figma Styles
https://github.com/jxnblk/figma-theme

css-in-js design-systems figma figma-api figma-js styled-system styles theme tokens

Last synced: 6 days ago
JSON representation

Generate development-ready theme JSON files from Figma Styles

• Host: GitHub
• URL: https://github.com/jxnblk/figma-theme
• Owner: jxnblk
• Archived: true
• Created: 2018-07-07T18:35:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-10T18:51:53.000Z (over 6 years ago)
• Last Synced: 2024-09-29T06:01:26.658Z (4 months ago)
• Topics: css-in-js, design-systems, figma, figma-api, figma-js, styled-system, styles, theme, tokens
• Language: JavaScript
• Homepage:
• Size: 11.7 KB
• Stars: 139
• Watchers: 4
• Forks: 25
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-figma - figma-theme - Generate development-ready theme JSON files from Figma Styles. (Rest API integrations)

README

        

# 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][]

```sh

npm i figma-theme

```

## Getting Started

1. Install `figma-theme` as a dev dependency in your project

2. Get a [personal access token][token] for the Figma API

3. Create a `.env` file with your access token

  - `FIGMA_TOKEN=`

  - Alternatively add an environment variable for `FIGMA_TOKEN`

4. Add an npm run script: `figma-theme `

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

[Styles]: https://help.figma.com/properties-panel/styles

[Styled System]: https://jxnblk.com/styled-system

[token]: https://www.figma.com/developers/docs#auth-dev-token

[figma-js]: https://github.com/jongold/figma-js