figma-icon-getter

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

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

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

• Create a component set.

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

• 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.