https://github.com/shauchenka/figmex

Generate theme assets from Figma
https://github.com/shauchenka/figmex

assets export figma figma-api json stylesheet

Last synced: 4 months ago
JSON representation

Generate theme assets from Figma

• Host: GitHub
• URL: https://github.com/shauchenka/figmex
• Owner: shauchenka
• Created: 2019-03-16T13:06:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-19T09:34:49.000Z (almost 6 years ago)
• Last Synced: 2024-10-03T03:04:50.834Z (4 months ago)
• Topics: assets, export, figma, figma-api, json, stylesheet
• Language: JavaScript
• Size: 7.58 MB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

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

```sh

npm i figmex

```

## Getting Started

1. Install `figmex` 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: `figmex ` (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](https://github.com/jxnblk/figma-theme)

[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

[figma-api]: https://www.figma.com/developers

[style-dictionary]: https://github.com/amzn/style-dictionary