@figma-export

Export tool for Figma

You can easily and automatically export your figma components and styles and use them directly into your website

run
figma-export
figma arrow
@figma-exportGitHub logo

Figma Components

SVG into .js

Exporting SVG into JS is a good solution. You will have multiple exported variables that you can easily import in your project. Another benefit is being able to use tree shaking to load only icons that you really need.

Export your icons as data:image/svg+xml

The .js file contains all components as Data URL so you can easly put this value into the src of your images. This is the best way to load an svg as image.

module.exports = {
    commands: [
        ['components', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            onlyFromPages: ['icons', 'monochrome'],
            outputters: [
                require('@figma-export/output-components-as-es6')({
                    output: './output/es6-dataurl',
                    useDataUrl: true,
                })
            ]
        }]
    ]
}

Export your icons as Base 64

The .js file contains all components with Base 64 encoding. If you want to use it into your images you need to prepend the Data URL data:image/svg+xml;base64,

module.exports = {
    commands: [
        ['components', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            onlyFromPages: ['icons', 'monochrome'],
            outputters: [
                require('@figma-export/output-components-as-es6')({
                    output: './output/es6-base64',
                    useBase64: true,
                })
            ]
        }]
    ]
}

SVG Sprites

Probably you already know what CSS Sprites are, basically you can combine multiple images into a single image file and use it on a website. SVG Sprites are very similar, but you will use .svg instead of .png. Discover more on this article "Icon System with SVG Sprites" where you will also find how to use this technique.

Export your icons as SVG Symbols

The .svg file contains all components as <symbol> so you can easly use an icon with<svg><use href="#icon-name" /></svg>

module.exports = {
    commands: [
        ['components', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            onlyFromPages: ['icons', 'monochrome'],
            outputters: [
                require('@figma-export/output-components-as-svgstore')({
                    output: './output/svgstore'
                })
            ]
        }]
    ]
}

Export your icons as Monochrome SVG Symbols

The .svg file contains all components as <symbol> and all fillproperties are removed from the svg so you can easily customize the icon color from css.

module.exports = {
    commands: [
        ['components', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            onlyFromPages: ['icons'],
            outputters: [
                require('@figma-export/output-components-as-svgstore')({
                    output: './output/svgstore-monochrome',
                    svgstoreConfig: {
                        cleanSymbols: ['fill']
                    }
                })
            ]
        }]
    ]
}

SVG into (p)React Component

If you work on a React/Preact project, probably you need to export your Figma components into (p)React components.

Export your icons as React Components

You can easily import the generated .jsx files into your project and start using your Figma components as React components.
import { Squirrel } from './output/octicons-by-github';

module.exports = {
    commands: [
        ['components', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            onlyFromPages: ['octicons-by-github'],
            outputters: [
                require('@figma-export/output-components-as-svgr')({
                    output: './output'
                })
            ]
        }]
    ]
}

Figma Styles

You can export Figma Styles to different output.
https://www.figma.com/file/RSzpKJcnb6uBRQ3rOfLIyUs5?node-id=119:2
Solid Colors
Linear Gradients
Effects
Text
Sample text
Sample text
Sample text
Sample text

Export your styles as CSS Variables

Once exported, you can easly use them directly into your css file.
body {
  color: var(--color-3);
  background: var(--color-linear-gradient);
  font-family: var(--regular-test-font-family);
  font-size: var(--regular-test-font-size);
}

module.exports = {
    commands: [
        ['styles', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            outputters: [
                require('@figma-export/output-styles-as-css')({
                    output: './output/css',
                })
            ]
        }]
    ]
}

Export your styles as SASS and SCSS

Once exported, you can import the generated _variables.scss and use it.
It contains variables and maps.
body {
  color: $color-3;
  background: $color-linear-gradient;
  font-family: map-get($regular-text, "font-family");
  font-size: map-get($regular-text, "font-size");
}

module.exports = {
    commands: [
        ['styles', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            outputters: [
                require('@figma-export/output-styles-as-sass')({
                    output: './output/scss',
                }),
                require('@figma-export/output-styles-as-sass')({
                    output: './output/sass',
                    getExtension: () => 'SASS',
                })
            ]
        }]
    ]
}

Export your styles as LESS

Once exported, you can import the generated _variables.less and use it.
It contains variables and maps.
body {
  color: @color-3;
  background: @color-linear-gradient;
  font-family: #regular-text[font-family];
  font-size: #regular-text[font-size];
}

module.exports = {
    commands: [
        ['styles', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            outputters: [
                require('@figma-export/output-styles-as-less')({
                    output: './output/less',
                })
            ]
        }]
    ]
}