Get started
Extract style system and SVG icons from Figma
Figma extractor is a CLI tool that extracts a style system (colors, effects, text styles, responsive variables) and SVG icons from a Figma file into ready-to-use TypeScript and CSS files.
Setup
Install the package
pnpm add -D @shakuroinc/figma-extractorIf you plan to generate an SVG sprite (generateSprite: true), also install the peer dependency svg-symbol-sprite:
pnpm add -D svg-symbol-spriteAdd a config file
Create figma-extractor.config.js in the root of your project. The config is resolved with cosmiconfig, so figma-extractor.config.cjs, a .figma-extractorrc file, or a figma-extractor key in package.json work too.
See the full reference on the Configuration page.
Add a variables JSON file
Export local variables from your Figma file to a JSON file (for example variables.json) using a variables export plugin in Figma, and point jsonVariablesPath in the config to it.
If a variables collection named fonts is present in the exported JSON, it is used to map font family keys to readable names in the generated text-styles.ts. See Font family mapping.