Skip to content
Export tool for Figma. You can easily and automatically export your figma components and use them directly into your website.
JavaScript CSS HTML Batchfile
Branch: master
Clone or download
marcomontalbano Merge pull request #22 from marcomontalbano/update-cli-md
Update package list on README.md (cli)
Latest commit b5bc979 Dec 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Add 'coverallsapp/github-action' Nov 12, 2019
images Update READMEs Oct 29, 2019
packages Update package list on README.md (cli) Dec 2, 2019
.eslintrc.js
.figmaexportrc.example.js Rename 'exportComponents' to 'components' and move the code into 'com… Nov 1, 2019
.gitignore website: initial commit Nov 29, 2019
CONTRIBUTING.md Add CONTRIBUTING document Nov 4, 2019
LICENSE Create LICENSE Nov 2, 2019
README.md Update README.md Nov 29, 2019
lerna.json v1.1.0 Dec 2, 2019
package-lock.json website: initial commit Nov 29, 2019
package.json Use 'lerna boostrap' to fix 'lerna version' issue Dec 2, 2019
test--packages.js Refactor test--packages.js file Oct 5, 2019
test--registers.js Remove useless sinon sandboxes Oct 26, 2019

README.md

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"
  }
}
You can’t perform that action at this time.