Config

type Config = {
  // your Figma api access key
  apiKey: string;
  // Figma file id
  fileId: string;
  styles: {
    // The main path for exporting all requested data
    exportPath: string;
 
    /*
      Allowed themes if there is at least one styles field with flag `useTheme`
      It will parse returned name of colors or etc. and look for allowed themes at the start of names
      example: for allowedThemes: ['light','dark'] all returned names will be parsed by looking for 'light' or 'dark' at the start of name
               And if color name is 'light/text/text-900' then it will be transformed to 'text/text-900' and relate to the 'light' theme
               All others name which are not found by allowed themes will be overlooked.
      Note: If there is at least one styles field with flag `useTheme` then this field is required
     */
    allowedThemes?: string[];
 
    /**
       Default theme for styles fields with flag `useTheme`
       It's used like default variables inside generated CSS variables
       Note: If there is at least one styles field with flag `useTheme` then this field is required
     */
    defaultTheme?: string;
    colors?: {
      disabled?: boolean;
      // custom key name
      keyName?: (name?: string, useTheme?: boolean) => string;
      // Enable using of theme
      useTheme?: boolean;
    };
    gradients?: {
      disabled?: boolean;
      // custom key name
      keyName?: (name?: string) => string;
    };
    effects?: {
      disabled?: boolean;
      // custom key name
      keyName?: (name?: string, useTheme?: boolean) => string;
      // Enable using of theme
      useTheme?: boolean;
    };
    textStyles?: {
      disabled?: boolean;
      // custom key name
      keyName?: (nameFromFigma: string) => string;
      // It allows merging text styles for different screen sizes to a single style
      merge?: boolean;
    };
  };
  icons: {
    disabled?: boolean;
    nodeIds: string[];
    // custom format icon name
    iconName: (nameFromFigma: string) => string;
    exportPath: string;
    generateSprite: boolean;
    generateTypes: boolean;
    localIcons?: boolean;
  };
  /*
     It's used when textStyles -> merge == true,
     It contains title for each allowed screen size for generation accurate media queries
   */
  screens?: {
    [title: string]: number;
  };
};

Config example:

figma-extractor.config.js

// @ts-check
const { screens } = require('./theme/screens');
 
function getTextStyleName(name) {
  // format name from like "Heading / bs-h200 - 80 b" to "bs-h200"
 
  const splitLeftPart = name?.split(' / ');
  const splitRightPart = splitLeftPart?.[splitLeftPart?.length - 1]
    .split(' ')[0]
    ?.replace('.', '-');
 
  return splitRightPart || '';
}
 
const iconNaming = originalName => {
  const formattedName = originalName.replace(/ /g, '').replace('/', '-');
  return formattedName;
};
 
/**
* @type {import('@shakuroinc/figma-extractor').Config}
**/
module.exports = {
  apiKey: 'xxxxxx', // your Figma api access key
  fileId: 'xxxxxx', // Figma file id
  styles: {
    exportPath: './theme',
    colors: {
      // keyName: nameFromFigma => nameFromFigma`, // custom key name
    },
    effects: {
      // keyName: nameFromFigma => nameFromFigma`, // custom key name
    },
    gradients: {
      // keyName: nameFromFigma => nameFromFigma`, // custom key name
    },
    textStyles: {
      keyName: nameFromFigma => `.v-${getTextStyleName(nameFromFigma)}`,
      merge: true, // or false - it allows merging text styles for different screen sizes to a single style
    },
  },
  icons: {
    // disabled: true,
    nodeIds: ['2310:0', '2090:11', '276:18'],
    iconName: name => iconNaming(name), // custom format icon name
    exportPath: './atoms/icon',
    generateSprite: true,
    generateTypes: true,
    localIcons: false,
  },
  screens: {
    bs: 0,
    ...screens,
  },
};

/theme/screens.js

const screens = {
  sm: '600px',
  md: '979px',
  lg: '1200px',
  xl: '1600px',
};
 
module.exports = { screens };

Merging of text styles

The ability to merge text styles by the name's suffix.

Each suffix is one of the defined screen sizes.

Example:

for config:

figma-extractor.config.js

module.exports = {
  ...
  styles: {
    exportPath: './theme',
    textStyles: {
      ...,
      merge: true,
    },
    ...
  },
  screen: {
    bs: 0, // This is the base screen (default)
    sm: 600,
    md: 900,
    lg: 1200,
  },
  ...
};

Styles like:

- heading/h500 - bs => {fontSize: 12px}
- heading/h500 - sm => {fontSize: 14px}
- heading/h500 - md => {fontSize: 16px}
- heading/h500 - lg => {fontSize: 20px}

will be transformed:

text-styles.js

"heading/h500": {
  fontSize: '12px',
  '@media (min-width: 600): {
    fontSize: '14px',
  },
  '@media (min-width: 900): {
    fontSize: '16px',
  },
  '@media (min-width: 1200): {
    fontSize: '20px',
  },
}

Themes for colors and effects

If the colors or effects field has useTheme: true then CLI will look for allowed themes and creates colors or effects according to such themes.

allowedThemes - list of the allowed themes. By only these themes, it will be generated particular files.
defaultTheme - one of the allowed themes. Default variables for CSS variables will be taken from this theme.

Example:

for config:

figma-extractor.config.js

module.exports = {
  ...
  allowedThemes: ['light','dark','blue'],
  defaultTheme: 'blue',
  styles: {
    exportPath: './theme',
    colors: {
      ...,
      useTheme: true,
    },
    ...
  },
  ...
};

The CLI will generate such files:

/ui/theme/themes-list.ts

export const DEFAULT_THEME = 'blue';
 
export const THEMES = ['light', 'dark', 'blue'];
 
export type Theme = typeof THEMES[number];

/ui/theme/colors/dark/index.js

module.exports = {
    "text-txt600":"#000000",
    "text-txt700":"#000000",
    "text-txt800":"#000000",
    "text-txt900":"#000000",
};

/ui/theme/colors/light/index.js

module.exports = {
    "text-txt600":"#ffffff",
    "text-txt700":"#ffffff",
    "text-txt800":"#ffffff",
    "text-txt900":"#ffffff",
};

/ui/theme/colors/blue/index.js

module.exports = {
    "text-txt600":"#0000ff",
};

/ui/theme/colors/index.js

module.exports = {
    "text-txt600":"#0000ff", // it will be taken from a default theme if it is defined for a specific color
    "text-txt700":"",
    "text-txt800":"",
    "text-txt900":"",
};

/ui/theme/colors/with-vars.js

module.exports = {
    "text-txt600":"var(--sh-text-txt600,'#0000ff')", // it will be taken from a default theme if it is defined for a specific color
    "text-txt700":"var(--sh-text-txt700,'')",
    "text-txt800":"var(--sh-text-txt800,'')",
    "text-txt900":"var(--sh-text-txt900,'')",
};

/ui/theme/colors/dark/vars.css

[data-theme='dark'] {
    --sh-text-txt600: #000000;
    --sh-text-txt700: #000000;
    --sh-text-txt800: #000000;
    --sh-text-txt900: #000000;
}

/ui/theme/colors/light/vars.css

[data-theme='light'] {
    --sh-text-txt600: #ffffff;
    --sh-text-txt700: #ffffff;
    --sh-text-txt800: #ffffff;
    --sh-text-txt900: #ffffff;
}

/ui/theme/colors/blue/vars.css

[data-theme='blue'] {
    --sh-text-txt600: #0000ff;
}

/ui/theme/colors/vars.css

/* from blue theme due to it is a default theme */
:root {
    --sh-text-txt600: #ff00ff;
    --sh-text-txt700: '';
    --sh-text-txt800: '';
    --sh-text-txt900: '';
}

Also, the same files will be generated for useTheme inside effects section.

Cli API How to find node id