DEV Community

Cover image for ๐Ÿš€ Introducing Figma Sprite Generator โ€“ Effortlessly Create PNG Sprites from Your Figma Icons
Omid Nikrah
Omid Nikrah

Posted on

1

๐Ÿš€ Introducing Figma Sprite Generator โ€“ Effortlessly Create PNG Sprites from Your Figma Icons

Hey DEV community! ๐Ÿ‘‹

I just released a Figma plugin called Figma Sprite Generator, and Iโ€™d love to get your feedback! The tool is designed to help designers quickly generate PNG sprites from selected icons within Figma.

๐ŸŽฏ Key Features:
Easy-to-use interface: Select your icons and export them as a single PNG sprite with just a few clicks.
Customizable ratios: Resize icons to your desired scale with a simple ratio selection (e.g., 1.5x or 2x).
Automatic sprite.json generation: Along with the sprite image, youโ€™ll get a JSON file with all the icons' coordinates and dimensions for easy integration in your projects.

๐ŸŽจ Why I Built This:
As a software engineer, Iโ€™ve worked closely with many designers who often struggle with creating spritesheet icons. Itโ€™s a frustrating process for themโ€”exporting all the icons from Figma, uploading them to a platform to generate the spritesheet, and then going through additional steps to get the final result. This manual approach is time-consuming and inefficient. Figma Sprite Generator automates the entire process, instantly creating sprites and generating metadata, simplifying the workflow for both designers and developers.

๐Ÿ› ๏ธ How It Works:
Select the icons you want in Figma.
Choose the desired ratio for resizing.
Generate a PNG sprite and JSON metadata with the positions and sizes of each icon.

๐ŸŒŸ Check it out:
You can find the project on GitHub: Figma Sprite Generator. Feel free to contribute, open issues, or suggest improvements!

Let me know what you think in the comments! ๐Ÿš€

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs