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

{
  "scripts": {
    "theme.figma": "theme.figma --file cNjsABO9tkKDt6EXxzEtGw6R"
  }
}

and create a .env file with your personal access token

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

 

input:

A figma file that follows the system-ui spec naming convention

Open example file in Figma ↗

 

output:

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