Export tool for Figma. You can easily and automatically export your Figma components and use them directly into your website.
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