@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
Icon 0Icon 1Icon 2Icon 3Icon 4Icon 5Icon 6Icon 7Icon 8Icon 9Icon 10Icon 11Icon 12Icon 13Icon 14Icon 15Icon 16Icon 17Icon 18Icon 19Icon 20Icon 21Icon 22Icon 23Icon 24Icon 25Icon 26Icon 27Icon 28Icon 29Icon 30Icon 31Icon 32Icon 33Icon 34Icon 35Icon 36Icon 37Icon 38Icon 39Icon 40Icon 41Icon 42Icon 43Icon 44Icon 45Icon 46Icon 47Icon 48Icon 49Icon 50Icon 51Icon 52Icon 53Icon 54Icon 55Icon 56Icon 57Icon 58Icon 59Icon 60Icon 61Icon 62Icon 63Icon 64Icon 65Icon 66Icon 67Icon 68Icon 69Icon 70Icon 71Icon 72Icon 73Icon 74Icon 75Icon 76Icon 77Icon 78Icon 79Icon 80Icon 81Icon 82Icon 83Icon 84Icon 85Icon 86Icon 87Icon 88Icon 89Icon 90Icon 91Icon 92Icon 93Icon 94Icon 95Icon 96Icon 97Icon 98Icon 99Icon 100Icon 101Icon 102Icon 103Icon 104Icon 105Icon 106Icon 107Icon 108Icon 109Icon 110Icon 111Icon 112Icon 113Icon 114Icon 115Icon 116Icon 117Icon 118Icon 119Icon 120Icon 121Icon 122Icon 123Icon 124Icon 125Icon 126Icon 127Icon 128Icon 129Icon 130Icon 131Icon 132Icon 133Icon 134Icon 135Icon 136Icon 137Icon 138Icon 139Icon 140Icon 141Icon 142Icon 143Icon 144Icon 145Icon 146Icon 147Icon 148Icon 149Icon 150Icon 151Icon 152Icon 153Icon 154Icon 155Icon 156Icon 157Icon 158Icon 159Icon 160Icon 161Icon 162Icon 163Icon 164Icon 165Icon 166Icon 167Icon 168Icon 169Icon 170Icon 171Icon 172Icon 173Icon 174Icon 175Icon 176Icon 177Icon 178Icon 179Icon 180Icon 181Icon 182Icon 183Icon 184Icon 185Icon 186Icon 187Icon 188Icon 189Icon 190Icon 191Icon 192Icon 193
@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.
Figma Export iconFigma Export logo
import asES6 from '@figma-export/output-components-as-es6'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons'],
      outputters: [
        asES6({
          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,
svg iconsvg icon
import asES6 from '@figma-export/output-components-as-es6'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons'],
      outputters: [
        asES6({
          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>
import asSvgstore from '@figma-export/output-components-as-svgstore'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons'],
      outputters: [
        asSvgstore({
          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.
import asSvgstore from '@figma-export/output-components-as-svgstore'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons'],
      outputters: [
        asSvgstore({
          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/icons/octicons-by-github';
import asSvgr from '@figma-export/output-components-as-svgr'

export default {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      onlyFromPages: ['icons/octicons-by-github'],
      outputters: [
        asSvgr({
          output: './output'
        })
      ]
    }]
  ]
}

Figma Styles

You can export Figma Styles to different output.
https://www.figma.com/file/fzYhvQpqwhZDUImRz431Qo
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-text-font-family);
  font-size: var(--regular-text-font-size);
}
        
import asCss from '@figma-export/output-styles-as-css'

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

Export your styles as Style Dictionary tokens

Once exported, you can configure a Style Dictionary project and use the generated base.json.
import asStyleDictionary from '@figma-export/output-styles-as-style-dictionary'

export default {
  commands: [
    ['styles', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      outputters: [
        asStyleDictionary({
          output: './output/style-dictionary',
        })
      ]
    }]
  ]
}

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");
}
        
import asSass from '@figma-export/output-styles-as-sass'

export default {
  commands: [
    ['styles', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      outputters: [
        asSass({
          output: './output/scss',
        }),
        asSass({
          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];
}
        
import asLess from '@figma-export/output-styles-as-less'

export default {
  commands: [
    ['styles', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',
      outputters: [
        asLess({
          output: './output/less',
        })
      ]
    }]
  ]
}

ready to start?

Shell - npm install @figma-export/cli
@figma-exportGitHub logo