figma2svg

Download and process SVG Icons from a Figma page into a spritesheet and JSON list

Quick Links

Overview

Features

Getting Started

Installation

Running figma2svg

Project Roadmap

Contributing

License

Overview 📖

The figma2svg script automates the extraction of SVG icons from a Figma project, converting them into a spritesheet and JSON list.

The project's primary goal is to streamline the process of integrating custom icons from Figma designs into web development projects.

Features 🌟

Fetch SVG icons from a Figma document.
Process icons to ensure "currentColor" on both fill and stroke.
Generate a single SVG spritesheet for all icons.
Produce a JSON list of icons for easy reference and integration.

Getting Started 🚀

Requirements

Ensure you have the following dependencies installed on your system:

Python: version 3.6+

You will also need a Figma access token to use the API (file key and personal access token). You can obtain these by following the instructions here.

Installation

Clone the figma2svg repository:

git clone https://github.com/cstrlcs/figma2svg

Change to the project directory:

cd figma2svg

Install the dependencies:

pip install -r requirements.txt

Running `figma2svg`

Use the following command to run figma2svg:

python main.py

This will fetch the icons from your Figma file, process them into SVG format, compile them into a spritesheet, and generate a JSON list of the icons for integration into your web projects.

It may take a while, since we don't want to overload Figma's servers with too many requests.

Project Roadmap 🛣️

► Add more CLI options to customize the output.
► Option to recovery from failed downloads.
► Option to update missing icons.

Contributing 🤝

Contributions are welcome! Please feel free to submit a Pull Request or open an Issue if you have any suggestions or ideas.

License 📝

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

cstrlcs / figma2svg