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

omidnikrah

Omid Nikrah

Posted on October 14, 2024

๐Ÿš€ 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! ๐Ÿš€

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
omidnikrah
Omid Nikrah

Posted on October 14, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About