Skip to content

antonvasin/styled-system-figma

Repository files navigation

styled-system-figma

Generate theme file for styled-system from Figma file.

Install

yarn add styled-system-figma
# or
npm install --save styled-system-figma

Example

import generateTheme from 'styled-system-figma';
import * as Figma from 'figma-js';

const fileId = 'FILE_ID';

const client = Figma.Client({
  personalAccessToken: 'FIGMA_TOKEN',
});

client.file(fileId).then(({ data }) => {
  const theme = generateTheme(data);

  fs.writeFileSync('theme.js', JSON.stringify(theme, null, 2));
});

TODO

  • colors
  • lineHeights
  • radii
  • fontSizes
  • fontWeights
  • letterSpacings
  • fonts
  • boxShadows
  • parse styles for names
  • textVariants