Export tool for Figma. You can easily and automatically export your Figma components and use them directly into your website.
MIT License
Bot releases are hidden (Show)
cli
, output-components-as-es6
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, output-styles-as-css
, output-styles-as-less
, output-styles-as-sass
, output-styles-as-style-dictionary
, transform-svg-with-svgo
website
cli
, core
, output-components-as-es6
, output-components-as-stdout
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, output-styles-as-css
, output-styles-as-less
, output-styles-as-sass
, output-styles-as-style-dictionary
, transform-svg-with-svgo
, types
, utils
, website
This library is now pure ESM.
This change may seem significant, but for most users, it's likely to have minimal impact. If your project already uses type="module"
in your package.json
, you're good to go.
However, if your project hasn't yet made this transition, you'll need to rename your .figmaexportrc.js
configuration file:
- .figmaexportrc.js
+ .figmaexportrc.mjs
adjust the command you run:
figma-export use-config .figmaexportrc.mjs
and start using import foo from 'foo'
instead of const foo = require('foo')
to import the packages inside the .figmaexportrc.mjs
. You can take a look at .figmaexportrc.example.js as an example.
Full Changelog: https://github.com/marcomontalbano/figma-export/compare/v5.0.1...v6.0.0-beta.0
core
, types
overrides
for axios (@marcomontalbano)cli
, core
, output-components-as-es6
, output-components-as-stdout
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, output-styles-as-css
, output-styles-as-less
, output-styles-as-sass
, output-styles-as-style-dictionary
, transform-svg-with-svgo
, types
, utils
, website
Update all dependencies to the latest available with support to Node.js >= v16.14
.
SVGR has been updated to the latest version. Starting from v7 they removed plugin-jsx
from the core so you'll need to install it manually.
npm install --save-dev @svgr/plugin-jsx
// .figmaexportrc.js
...
outputters: [
require('@figma-export/output-components-as-svgr')({
output: './output/svgr',
getSvgrConfig: () => ({
plugins: ['@svgr/plugin-jsx']
})
})
]
...
core
, output-styles-as-css
, output-styles-as-less
, output-styles-as-sass
, output-styles-as-style-dictionary
, types
cli
, core
, types
cli
, core
, output-components-as-es6
, output-components-as-stdout
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, types
includeTypes
attribute to support component instance (@marcomontalbano)core
, output-components-as-es6
, output-components-as-stdout
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, website
onlyFromPages
can be used when exporting styles (@marcomontalbano, @Ingramz)core
core
, types
cli
, core
, types
cli
, core
, output-components-as-es6
, output-components-as-stdout
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, types
includeTypes
attribute to support component instance (@marcomontalbano)core
core
, types
core
, output-components-as-es6
, output-components-as-stdout
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, website
onlyFromPages
can be used when exporting styles (@marcomontalbano, @Ingramz)cli
, output-components-as-es6
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, output-styles-as-css
, output-styles-as-less
, output-styles-as-sass
, output-styles-as-style-dictionary
, types
, website
output-styles-as-style-dictionary
package (@marcomontalbano)output-components-as-es6
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, output-styles-as-css
, output-styles-as-less
, output-styles-as-sass
, output-styles-as-style-dictionary
cli
, output-components-as-es6
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, output-styles-as-css
, output-styles-as-less
, output-styles-as-sass
, output-styles-as-style-dictionary
, types
, website
output-styles-as-style-dictionary
package (@marcomontalbano)core
, types
pathToComponent
to the ComponentOutputterParamOption
(@alejandrofdiaz)core
, output-components-as-es6
core
core
, output-components-as-es6
, output-components-as-svgr
, output-components-as-svgstore
pageName
with slashes (es6 and svgstore outputters) (@marcomontalbano)core
, output-components-as-svgr
, transform-svg-with-svgo
, types
, website
core
, output-components-as-svg
, output-components-as-svgr
cli
, core
, types
cli
, core
, output-components-as-es6
, output-components-as-stdout
, output-components-as-svg
, output-components-as-svgr
, output-components-as-svgstore
, output-styles-as-css
, output-styles-as-less
, output-styles-as-sass
, transform-svg-with-svgo
, types
, utils
, website
cli
, core
, types
cli
, core
, types
output-components-as-svgr
output-components-as-svgr
transform-svg-with-svgo
, types
, website
output-styles-as-css
, output-styles-as-less
, output-styles-as-sass