figma-icon-getter v0.0.2

Figma Icon Getter

This is a CLI and TypeScript library to fetch icons from Figma using their REST API.

Benefits

• Automate icon workflow from Figma to production.
• Sync repository with a single Figma file.
• Use component sets in Figma, making it easier for designers to configure options.

Design Setup

1. Create a new Figma file and notate the file ID.

2. Create a new icons. Make sure to flatten the paths to a single layer.

3. Create a component set.

4. Add properties to the component, e.g. variant = filled | outlined and size = 16 | 24

5. Generate a personal access token.

   !NOTE Make sure that the token has access to your icon file

CLI usage

!NOTE Requires a recent version of Node.js.

Run the following command to download icons from Figma:

FIGMA_PAT=<access token> npx figma-icon-getter --file <file key> --out <output directory>

Explanation:

• FIGMA_PAT=<access token>: Replace <access token> with the Figma personal access token generated in the Design Setup section above.
• --file <file key>: Replace <file key> with the file key appearing in the URL of the Figma file. For example, given a URL of https://www.figma.com/design/mfiglkk3bXQwetaRsftZQz/Icon-Playground?node-id=0-1&t=RDa9Ma6rkxW492eB-0, the file key is mfiglkk3bXQwetaRsftZQz.
• --out <output directory>: Replace <output directory> with the path to the directory where you want to download the icon SVG files.

!TIP If you need to convert the downloaded icon SVG files to React icon components, we recommend SVGR.

API

Installation

npm install figma-icon-getter

Usage

You can use the getFigmaIcons function to conveniently download icon SVGs:

import { getFigmaIcons } from "figma-icon-getter";

const icons = await getFigmaIcons({
  figmaAccessToken: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  fileKey: "mfiglkk3bXQwetaRsftZQz",
});

console.log(icons);

/* example output
[
  {
    "name": "Acorn",
    "properties": {
      "variant": "outlined",
      "size": "16"
    },
    "svg": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">...</svg>\n"
  }
]
*/

Parameters

• figmaAccessToken: The Figma personal access token generated in the Design Setup section above
• fileKey: The file key appearing in the URL of the Figma file. For example, given a URL of https://www.figma.com/design/mfiglkk3bXQwetaRsftZQz/Icon-Playground?node-id=0-1&t=RDa9Ma6rkxW492eB-0, the file key is mfiglkk3bXQwetaRsftZQz.

Return value

Promise<
  {
    name: string;
    properties: Record<string, string>;
    svg: string;
  }[]
>;

• name: The name of the icon, derived from the component set that the icon component belongs to
• properties: A record containing the component properties defined in Figma
• svg: The icon SVG data

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please submit a pull request or open an issue to discuss any changes.