Export tool for Figma.
You can easily and automatically export your figma components and styles and use them directly into your website.
โจ In Short
Components
You can export your Figma Components as SVG and use them inside your website.
This is particularly useful when you have your own icon set and you want to keep your website icons up-to-date with your Figma file.
Styles
You can export your Figma Styles into different output like .sass format, .scss format, Style Dictionary tokens or you can create your own outputter.
If you want to keep the style of your Figma file in-sync with the
.cssof your website, this is a must-have.
๐จ Colors (paints)
- Color
- Linear Gradient
๐ญ Effects
Shadow and Blur effects cannot be combined together since they use two different CSS properties.
- Inner Shadow
- Drop Shadow
- Layer Blur
โ๏ธ Text
- font-family
- font-weight
- font-size
- line-height
- letter-spacing
- font-style
- font-variant
- text-transform
- text-decoration
- text-align
๐๏ธ Personal Access Token
First of all you have to set the environment variable FIGMA_TOKEN.
To do so, you need a Personal Access Token. You can generate one from your Account Settings.
Inside the Account Settings click on Create a new personal access token and enter a description.
Copy the token, this is your only chance to do so!
export FIGMA_TOKEN=<personalAccessToken>You can use dotenv or
exportthe variable using.bash_profile/.bashrcfile.
๐งช Just Try
If you wanna try it just run following command and you will be able to download all components from https://www.figma.com/file/fzYhvQpqwhZDUImRz431Qo as .svg ๐
# export figma token
export FIGMA_TOKEN=<personalAccessToken>
# export figma components as svg
npx -p @figma-export/cli -p @figma-export/output-components-as-svg figma-export components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svgor you can export all styles into .scss
# export figma token
export FIGMA_TOKEN=<personalAccessToken>
# export figma styles as .scss variables
npx -p @figma-export/cli -p @figma-export/output-styles-as-sass figma-export styles fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-styles-as-sass๐ฆ Packages
@figma-export/core
This package contains the core functionalities for figma-export. You can download and use it as a dependency of your project.
@figma-export/cli
This package allows you to consume all core functionalities from your terminal.
๐ Usage
Typically you'll prefer to use the cli. Here different ways to do the same:
Build Process
You can use figma-export as part of your build process.
npm install --save-dev @figma-export/cli @figma-export/output-components-as-svg @figma-export/output-styles-as-sass
# or using `yarn`
yarn add @figma-export/cli @figma-export/output-components-as-svg @figma-export/output-styles-as-sass --devNow you can create a script command inside your package.json.
Following an example:
{
"scripts": {
+ "figma:export-components": "figma-export components fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-components-as-svg",
+ "figma:export-styles": "figma-export styles fzYhvQpqwhZDUImRz431Qo -O @figma-export/output-styles-as-sass",
}
}Use it on the fly
Alternatively you can use npx to use it on the fly:
npx @figma-export/cli --helpGlobal Setup
You can also install it as a global dependency:
npm install -g @figma-export/cli
# or using `yarn`
yarn add @figma-export/cli --globalfigma-export --helpAdvanced
Last but not least, you can create a configuration file and use a single command to rule them all ๐
Let's create the file .figmaexportrc.js and paste the following:
module.exports = {
commands: [
['styles', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
// version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans
// onlyFromPages: ['icons'], // optional - Figma page names (all pages when not specified)
outputters: [
require('@figma-export/output-styles-as-sass')({
output: './output/styles'
})
]
}],
['components', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
// version: 'xxx123456', // optional - file's version history is only supported on paid Figma plans
onlyFromPages: ['icons'],
// filterComponent: (component) => !/^figma/.test(component.name), // optional
transformers: [
require('@figma-export/transform-svg-with-svgo')({
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
}
}
},
{
name: 'removeDimensions',
active: true
}
]
})
],
outputters: [
require('@figma-export/output-components-as-svg')({
output: './output/components'
})
]
}]
]
};โน๏ธ Take a look at .figmaexportrc.example.js for more details.
now you can install the @figma-export dependencies that you need
npm install --save-dev @figma-export/cli @figma-export/output-styles-as-sass @figma-export/transform-svg-with-svgo @figma-export/output-components-as-svg @figma-export/output-styles-as-sassand update the package.json.
{
"scripts": {
+ "figma:export": "figma-export use-config"
}
}If needed you can also provide a different configuration file.
{
"scripts": {
+ "figma:export": "figma-export use-config .figmaexportrc.production.js"
}
}TypeScript
If you prefer, you can create a .figmaexportrc.ts and use TypeScript instead.
For doing so, you just need to install a few new dependencies in your project.
npm install --save-dev typescript ts-node @types/node @figma-export/typesand slightly change your package.json
{
"scripts": {
+ "figma:export": "ts-node ./node_modules/@figma-export/cli/bin/run use-config .figmaexportrc.ts"
}
}Take a look at .figmaexportrc.example.ts for more details.
Node.js ESM
Node.js is now supporting ECMAScript modules (ESM).
If your package.json contains the "type": "module" field then you'll need to rename your .figmaexportrc.js configuration file:
- .figmaexportrc.js
+ .figmaexportrc.cjsand adjust the command you run:
figma-export use-config .figmaexportrc.cjsIf instead you're using the TypeScript setup you'll need to rename the .figmaexportrc.ts configuration file.
- .figmaexportrc.ts
+ .figmaexportrc.cts๐ More Packages
For the list of all official packages or if you want to create your own transformer or outputter you can continue reading CLI Documentation.