Export tool for Figma
You can easily and automatically export your figma components
and styles
and use them directly into your website
SVG into .js
data:image/svg+xml
module.exports = {
commands: [
['components', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
onlyFromPages: ['icons'],
outputters: [
// https://www.npmjs.com/package/@figma-export/output-components-as-es6
require('@figma-export/output-components-as-es6')({
output: './output/es6-dataurl',
useDataUrl: true,
})
]
}]
]
}
Base 64
data:image/svg+xml;base64,
module.exports = {
commands: [
['components', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
onlyFromPages: ['icons'],
outputters: [
// https://www.npmjs.com/package/@figma-export/output-components-as-es6
require('@figma-export/output-components-as-es6')({
output: './output/es6-base64',
useBase64: true,
})
]
}]
]
}
SVG Sprites
SVG Symbols
<svg><use href="#icon-name" /></svg>
module.exports = {
commands: [
['components', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
onlyFromPages: ['icons'],
outputters: [
// https://www.npmjs.com/package/@figma-export/output-components-as-svgstore
require('@figma-export/output-components-as-svgstore')({
output: './output/svgstore'
})
]
}]
]
}
Monochrome SVG Symbols
fill
properties are removed from the svg so you can easily customize the icon color from css.module.exports = {
commands: [
['components', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
onlyFromPages: ['icons'],
outputters: [
// https://www.npmjs.com/package/@figma-export/output-components-as-svgstore
require('@figma-export/output-components-as-svgstore')({
output: './output/svgstore-monochrome',
svgstoreConfig: {
cleanSymbols: ['fill']
}
})
]
}]
]
}
SVG into (p)React Component
React Components
.jsx
files into your project and start using your Figma components as React components.import { Squirrel } from './output/icons/octicons-by-github';
module.exports = {
commands: [
['components', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
onlyFromPages: ['icons/octicons-by-github'],
outputters: [
// https://www.npmjs.com/package/@figma-export/output-components-as-svgr
require('@figma-export/output-components-as-svgr')({
output: './output'
})
]
}]
]
}
Solid Colors
Linear Gradients
Effects
Text
CSS Variables
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);
}
module.exports = {
commands: [
['styles', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
outputters: [
// https://www.npmjs.com/package/@figma-export/output-styles-as-css
require('@figma-export/output-styles-as-css')({
output: './output/css',
})
]
}]
]
}
Style Dictionary
tokensbase.json
.module.exports = {
commands: [
['styles', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
outputters: [
// https://www.npmjs.com/package/@figma-export/output-styles-as-style-dictionary
require('@figma-export/output-styles-as-style-dictionary')({
output: './output/style-dictionary',
})
]
}]
]
}
SASS
and SCSS
module.exports = {
commands: [
['styles', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
outputters: [
// https://www.npmjs.com/package/@figma-export/output-styles-as-sass
require('@figma-export/output-styles-as-sass')({
output: './output/scss',
}),
require('@figma-export/output-styles-as-sass')({
output: './output/sass',
getExtension: () => 'SASS',
})
]
}]
]
}
LESS
module.exports = {
commands: [
['styles', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
outputters: [
// https://www.npmjs.com/package/@figma-export/output-styles-as-less
require('@figma-export/output-styles-as-less')({
output: './output/less',
})
]
}]
]
}