figma-export

Export tool for Figma.

You can easily and automatically export your figma components and use them directly into your website.

Build Status Coverage Status

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.

Figma - Account Menu

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 export the variable using .bash_profile/.bashrc file.

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/RSzpKJcnb6uBRQ3rOfLIyUs5 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 RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-components-as-svg

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

# or using `yarn`
yarn add @figma-export/cli @figma-export/output-components-as-svg --dev

Now you can create a script command inside your package.json.

Following an example:

{
  "scripts": {
+   "figma:export": "figma-export components RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-components-as-svg"
  }
}

Use it on the fly

Alternatively you can use npx to use it on the fly:

npx @figma-export/cli help

Global Setup

You can also install it as a global dependency:

npm install -g @figma-export/cli

# or using `yarn`
yarn add @figma-export/cli --global
figma-export help

Advanced

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: [
        ['components', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            onlyFromPages: ['icons', 'monochrome'],
            transformers: [
                require('@figma-export/transform-svg-with-svgo')({
                    plugins: [
                        { removeViewBox: false },
                        { removeDimensions: true }
                    ]
                })
            ],
            outputters: [
                require('@figma-export/output-components-as-svg')({
                    output: './output'
                })
            ]
        }]
    ]

};

now you can install the @figma-export dependencies that you need

npm install --save-dev @figma-export/cli @figma-export/transform-svg-with-svgo @figma-export/output-components-as-svg

and 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"
  }
}