I’m working on a project where I need to export multiple icons from Figma, but they all have different dimensions right now. What I want to do is make sure all the exported files have the same canvas size, like 30x30 pixels, while keeping the actual icon graphics unchanged.
The problem is that when I try to resize the frame or artboard, it scales the icon itself too. I don’t want the icon to get bigger or smaller - I just want to change the export area around it so all my exported files are consistent.
Is there a built-in feature in Figma that lets me adjust the bounding area without affecting the icon design? If not, what’s the best way to work around this issue? I’ve tried a few different approaches but haven’t found a clean solution yet.
Here’s the trick: make a fixed 30x30 frame first, then drop your icons inside it. Don’t try resizing the existing icon frames - that’s a nightmare. Just create new frames with your exact dimensions, copy/paste each icon in, and position them however you want with the alignment tools. When you export, Figma grabs the whole frame area so you’ll get consistent file sizes no matter how big or small the actual icon is. I wasted hours trying to resize frames before figuring this out. Plus it makes spacing and alignment way easier if you want everything centered or lined up to specific edges.
Yeah, doing this manually is a pain. I’ve wasted hours creating frames and positioning icons one at a time.
Just automate it. Set up a workflow that pulls icons from Figma, centers them in 30x30 canvases, and exports whatever format you want. No more copy-paste hell.
I built one for our team using Latenode. Connects to Figma’s API, processes icon batches, handles resizing automatically. Icons keep their original size but get uniform export areas.
Huge time saver for icon libraries. Set it once, use it forever.
you could also use the slice tool - draw a 30x30 slice over each icon and export that instead of the frame. works great and you don’t need to move stuff around or make new frames.