https://github.com/ds-tools/theme.figma

Experimental: Get system-ui themes tokens from figma variables
https://github.com/ds-tools/theme.figma

Last synced: 20 days ago
JSON representation

Experimental: Get system-ui themes tokens from figma variables

• Host: GitHub
• URL: https://github.com/ds-tools/theme.figma
• Owner: ds-tools
• Created: 2019-11-05T15:59:25.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-08-02T22:00:03.000Z (over 2 years ago)
• Last Synced: 2024-02-17T12:39:46.909Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 240 KB
• Stars: 51
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        


  

  



  Get system-ui themes tokens from figma variables (local styles)

  



  



 

#### install

```

yarn add @ds-tools/theme.figma --dev

```

 

#### usage

Add it to your `package.json`

```json

{

  "scripts": {

    "theme.figma": "theme.figma --file cNjsABO9tkKDt6EXxzEtGw6R"

  }

}

```

and create a `.env` file with your [personal access token](https://www.figma.com/developers/api#access-tokens)

```

FIGMA_TOKEN:44444-6666cccc-cccc-cccc-cccc-1111cccccccc

```

 

#### input:

A figma file that follows the [system-ui spec](https://system-ui.com/theme) naming convention

[Open example file in Figma ↗](https://www.figma.com/file/cNjsABO9tkKDt6EXxzEtGw6R/Design-Tokens?node-id=0%3A1)

[![figma screenshot](/examples/figma-screenshot.png)](https://www.figma.com/file/cNjsABO9tkKDt6EXxzEtGw6R/Design-Tokens?node-id=0%3A1)

 

#### output:

```js

/* theme.js */

const theme = {

  fontSizes: [0, 12, 14, 16, 20, 30],

  fontWeights: [0, 400, 500, 700],

  colors: {

    white: '#fff',

    blues: {

      100: '#eff8ff',

      200: '#b7dbf7',

      300: '#a8d1f2',

      400: '#63a2d8',

      500: '#3692df',

      600: '#207cc9',

      700: '#2368a2',

      800: '#1a4971',

      900: '#203d54'

    },

    ...

  }

}

export default theme

```

 

#### license

MIT © [siddharthkp](https://github.com/siddharthkp)