@neodx/figma

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

• Flexible optimized Export API - the simple but powerful way to automate your design system
  • Exporting assets from file
  • Exporting assets from published library components
• Fully Typed Figma API and common helpers
• Brilliant human-friendly Figma document graph traversing

Installation

npm

npm install -D @neodx/figma

yarn

yarn add -D @neodx/figma

pnpm

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.

Environment variable

FIGMA_TOKEN=xxxxx yarn figma export

CLI argument

yarn figma export --token xxxxx

Configuration file (not recommended)

// 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:

/**
 * @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\/.*/
        }
      ]
    }
  }
};