2.5.0 • Published 7 months ago

fiado v2.5.0

Weekly downloads
-
License
ISC
Repository
github
Last release
7 months ago

Fiado (Figma Asset Downloader)

npm version

Fiado is a CLI tool to automatically download all assets from a Figma file. It provides flexibility through command-line options, .env file support, and programmatic usage.

Installation

Install fiado globally using your preferred package manager:

Using pnpm:

pnpm add -g fiado

Using npm:

npm install -g fiado

This will make the fiado command globally available.

Usage

Basic Command

To download assets from a Figma file:

fiado --accessToken YOUR_ACCESS_TOKEN --fileId YOUR_FILE_ID --directory ./assets

Options

OptionDescriptionDefault
--accessTokenYour Figma access token.Required
--fileIdThe ID of the Figma file to download.Required
--directoryDirectory to save the downloaded assets../dist
--dryRunGenerates a config.json with a list of assets without downloading them.false
--fileTypeFile extension for the assets (svg or png).svg
--customLogoString with custom logo (like ascii art)Fiado
--hideLogoHide logofalse
--patternRegex pattern to filter component names (e.g., ^logo-).null

Using It Programmatically

Fiado can also be used in a Node.js script:

import fiado from "fiado";

(async () => {
  try {
    await fiado({
      accessToken: "your-figma-access-token",
      fileId: "your-figma-file-id",
      directory: "./dist",
      dryRun: false,
    });

    console.log("Assets downloaded successfully!");
  } catch (error) {
    console.error("Error during asset download:", error.message);
  }
})();

Using a .env File

To avoid passing sensitive information as command-line arguments, you can use a .env file in the current working directory:

FIGMA_ASSET_TOKEN=your-figma-access-token
FIGMA_FILE_ID=your-figma-file-id

Fiado will use these values if no command-line arguments are provided for accessToken and fileId. Command-line arguments always take precedence over .env values.

Interactive Prompts

If any required option is missing from both arguments and the .env file, Fiado will prompt you interactively to provide the information.

Features

  • Automatically downloads all assets from a specified Figma file.
  • Supports configuration via command-line arguments, .env files, and interactive prompts.
  • Programmatic API for advanced use cases.
  • Customizable save directory for downloaded assets.
  • Dry-run option to generate a preview of assets without downloading them.
  • Regex filtering with --pattern to match specific component names.

Notes

  • Ensure your Figma access token has the required permissions to access files.
  • The --pattern option allows you to filter which components to download based on their names using regular expressions (regex). This is useful when you only want specific components, like icons, logos, or other naming patterns.

What is an accessToken or fileId?

To use Fiado and interact with Figma's API, you need to provide two key pieces of information: an accessToken and a fileId. Here's what they mean:

1. accessToken

An accessToken is a unique string that grants your tool access to your Figma account. It acts as a secure way to authenticate requests to Figma's API.

How to Get an accessToken

  1. Go to your Figma Account Settings.
  2. Go to the Security tab.
  3. Click Generate new token.
  4. Copy the generated token and provide it to Fiado as the --accessToken option or via your .env file.

Note: Keep your accessToken private. Anyone with access to your token can make requests on your behalf.

2. fileId

A fileId is the unique identifier for the Figma file you want to download assets from. It is part of the URL for your Figma file.

How to Find the fileId

  1. Open the Figma file you want to work with.
  2. When you share the file or check its URL in the address bar, it will look something like this:

https://www.figma.com/design/{fileId}/{something else but not the fileId}

How to use the --pattern option.

The --pattern option takes a regular expression (regex) to filter component names.

Regex ExampleMatches Component NamesExplanation
^icon-icon-user, icon-homeMatches names that start with icon-.
-logo$brand-logo, company-logoMatches names that end with -logo.
^button.*primary$button-primary, button-main-primaryMatches names starting with button and ending with primary.
.*everythingMatches all component names (no filtering).
^ICON- (with i flag)icon-user, ICON-adminCase-insensitive match for names starting with ICON-.

License

This project is licensed under the ISC License.

2.5.0

7 months ago

2.4.0

7 months ago

2.3.0

8 months ago

2.2.0

8 months ago

2.1.0

8 months ago

2.0.0

8 months ago

1.1.1

8 months ago

1.0.1

8 months ago

1.0.0

8 months ago

0.1.1

8 months ago

0.1.0

8 months ago