figma-export

The figma-export packages are pure ESM. If your project's package.json does not contain "type": "module", you cannot use .js for your configuration file.

Instead, rename your configuration file to .figmaexportrc.mjs and use standard ESM import syntax instead of require().

# Rename file
mv .figmaexportrc.js .figmaexportrc.mjs

# Run command
figma-export use-config .figmaexportrc.mjs

This outputter exports Figma components as named constants within .js files. Each file is named after the Figma page it contains.

Naming Convention: Component names are converted to camelCase. For example, a component named icon/eye will be exported as the variable iconEye.

Output Formats

Standard SVG (Default):

export const figmaLogo = `<svg ...> ... </svg>`;

Base64 Encoding (useBase64: true):

export const figmaExport = `PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gLi4uIDwvc3ZnPg==`;

Data URL (useDataUrl: true):

export const figmaExport = `data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3e ... %3c/svg%3e`;

You can run figma-export without installing it globally using npx.

Export components as SVG:

export FIGMA_TOKEN=<personalAccessToken>
npx -p @figma-export/cli -p @figma-export/output-components-as-svg figma-export components <FILE_ID> -O @figma-export/output-components-as-svg

Export styles as SASS variables:

export FIGMA_TOKEN=<personalAccessToken>
npx -p @figma-export/cli -p @figma-export/output-styles-as-sass figma-export styles <FILE_ID> -O @figma-export/output-styles-as-sass

To use this outputter, add it to the outputters array within a styles command in your .figmaexportrc.js file. The output option is mandatory and specifies the directory where the .css file will be generated.

import asCss from '@figma-export/output-styles-as-css'

export default {
    commands: [
        ['styles', {
            fileId: 'YOUR_FILE_ID',
            outputters: [
                asCss({
                    output: './output'
                })
            ]
        }],
    ]
}

Install the CSS styles outputter as a development dependency using npm or yarn to export Figma styles as CSS variables.

npm install --save-dev @figma-export/output-styles-as-css

or

yarn add @figma-export/output-styles-as-css --dev

Install the ES6 outputter as a development dependency using npm or yarn.

npm install --save-dev @figma-export/output-components-as-es6

or

yarn add @figma-export/output-components-as-es6 --dev

To use this outputter, import asSvgstore in your .figmaexportrc.js configuration file and add it to the outputters array within a components command.

Each component is exported as a <symbol> inside an .svg file named after its Figma page. For example, components from the 'icons' page will be saved to output/icons.svg.

import asSvgstore from '@figma-export/output-components-as-svgstore'

export default {
    commands: [
        ['components', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            onlyFromPages: ['icons', 'unit-test'],
            outputters: [
                asSvgstore({
                    output: './output'
                })
            ]
        }],
    ]
}

To use this outputter, import it into your .figmaexportrc.js configuration file and add it to the outputters array within a components command.

Note: The output option is mandatory.

import asES6 from '@figma-export/output-components-as-es6'

export default {
    commands: [
        ['components', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            onlyFromPages: ['icons', 'unit-test'],
            outputters: [
                asES6({
                    output: './output'
                })
            ]
        }],
    ]
}

Add the asSass outputter to the outputters array within a styles command in your .figmaexportrc.js configuration file. This allows you to export Figma styles as SASS/SCSS variables.

import asSass from '@figma-export/output-styles-as-sass'

export default {
    commands: [
        ['styles', {
            fileId: 'YOUR_FIGMA_FILE_ID',
            outputters: [
                asSass({
                    output: './output'
                })
            ]
        }],
    ]
}

To use the LESS styles outputter, install it as a development dependency using npm or yarn.

npm install --save-dev @figma-export/output-styles-as-less

# or

yarn add @figma-export/output-styles-as-less --dev

Install the SVG outputter as a development dependency using npm or yarn.

npm install --save-dev @figma-export/output-components-as-svg

or

yarn add @figma-export/output-components-as-svg --dev

Install the Style Dictionary outputter as a development dependency to export Figma styles into a JSON format compatible with Amazon's Style Dictionary.

npm install --save-dev @figma-export/output-styles-as-style-dictionary

# or

yarn add @figma-export/output-styles-as-style-dictionary --dev