🥷 Figma to SVG

Figma to SVG is a CLI tool that allows you to download SVGs from a specific frame in Figma

it probably works for entire files too, but that's not our use case – so feel free to try it out and let us know!

📋 You'll need

1. A Figma API token (see the guide here)
2. A Figma file URL (you can get one by opening a file in Figma, selecting a frame and copying the URL)
3. Optionally, a path to save the SVGs to (defaults to ./svgs/)

🚀 Usage

Prepare your icons and copy the frame's URL:

Then, run the CLI:

npx @storyless/figma-to-svg # npm
yarn dlx @storyless/figma-to-svg # yarn
pnpx @storyless/figma-to-svg # pnpm
bunx @storyless/figma-to-svg # bun

You can also pass parameters to the CLI, to skip the prompts:

bunx @storyless/figma-to-svg --url "https://www.figma.com/file/yourfileidhere/Project-Name?node-id=69%3A420&mode=dev" --token "figd_23eredgfEegdf-0910g2ojsDjjek-kPbbzmmo6twXG4" --out "./some/folder/"

[!NOTE]
The example uses bunx, but you can also use npx, yarn dlx, pnpx or any other package runner.

[!TIP]
If the command fails, try specifying the exact version of the package, e.g. bunx @storyless/[email protected]

Find the latest version here

⚛️ SVGR

If you want to turn these into React components, you can use SVGR.

Here's an example command to get you started:

bunx @svgr/cli --replace-attr-values=#000=currentColor --out-dir svgr --ext tsx --typescript -- svgs