figma-export-file-assets

Export icons from the Community Weather Icons Kit

We strongly recommend checking out the impressive @neodx/svg example. This showcases automatic sprite generation, type creation, practical code usage, and a complex icon export setup.

A simple example of how to use the @neodx/figma to export icons.

Our point of interest is a Community Weather Icons Kit.

This kit designed as a multiple component sets with different variants of the same component.

I had declared the following requirements:

• We're interested in the "icon" page
• All icons are placed under Component Sets (named group with different variants of same component)
• All Component Set contains a Color=On and Color=Off variants
• We want to export the Color=Off variant only

So, we need to collect all the Component Sets in the "icons" page, filter the Color=Off variants and name or exports based on the Component Set name.

Let's see how to do it.

Install @neodx/figma

# yarn
yarn add -D @neodx/figma
# pnpm
pnpm add -D @neodx/figma
# npm
npm i -D @neodx/figma

Define the configuration

// figma.config.js
const { formatExportFileName } = require('@neodx/figma');

/**
 * @type {import('@neodx/figma').Configuration}
 */
module.exports = {
  export: {
    fileId:
      'https://www.figma.com/file/H9kVbqMwzIxh579BpXKZbj/Weather--Icons-Kit-(Community)?type=design&node-id=0-1',
    output: 'assets/icons',
    write: {
      getExportFileName({ format, value }, root) {
        const parent = root.registry.byId[value.parentId];

        return formatExportFileName(
          `${parent.source.name.toLowerCase().replace('32/', '')}.${format}`
        );
      }
    },
    collect: {
      target: [
        {
          type: 'CANVAS',
          filter: 'icon'
        },
        {
          type: 'COMPONENT_SET',
          filter: /32/
        },
        {
          type: 'COMPONENT',
          filter: 'Color=Off'
        }
      ]
    }
  }
};

Get the token and export the icons

The token can be obtained from the Figma account settings:

# yarn
yarn figma export --token <your_token>
# pnpm
pnpm figma export --token <your_token>
# npm
npm run figma export --token <your_token>

In our package.json we have a script export that is an alias for @neodx/figma CLI.

Result

source	result