Skip to content
On this page

@neodx/figma

The modern Figma integration tools, typed API, human-friendly files traversing, assets exporter, and more.

Installation

bash
npm install -D @neodx/figma
bash
yarn add -D @neodx/figma
bash
pnpm add -D @neodx/figma

Getting started

You can use the @neodx/figma in two ways:

  • Export API CLI - built-in automated flow for exporting assets from Figma files or published library components.
  • Node.js API - a set of functions that you can use to build your own custom Figma integration tools.

In this guide, we will use the Export CLI to export assets from Figma files.

Personal access token

We are using the Figma API, so you need to provide a personal access token to access the API.

The token can be obtained from the Figma account settings (Figma > Help and Account > Account Settings > Personal Access Tokens).

You can provide the token via the FIGMA_TOKEN environment variable, the --token CLI argument, or the token option in the configuration file.

bash
FIGMA_TOKEN=xxxxx yarn figma export
bash
yarn figma export --token xxxxx
js
// figma.config.js
module.exports = {
  token: 'xxxxx'
};

Configure your project

The simple config is just a file ID, output path and rules for collecting components (what exactly you want to export).

We're using the cosmiconfig package to load the configuration file, so you can use any supported format: figma.config.js, .figmarc.cjs, etc. (we recommend using JS files for possible future extensions).

figma.config.js:

javascript
/**
 * @type {import('@neodx/figma').Configuration}
 */
module.exports = {
  export: {
    fileId: 'YOUR_FILE_ID_OR_LINK',
    output: 'assets/icons',
    collect: {
      target: [
        {
          // First of all - select the "Icons" page
          type: 'CANVAS',
          filter: 'Icons'
        },
        {
          // Then select all components with names that starts with "32/"
          type: 'COMPONENT',
          filter: /32\/.*/
        }
      ]
    }
  }
};

Released under the MIT License.