Vector Pixel Art - Pixel Art Style Vectors in Figma
by•
You use Figma for all your design work. Then a project needs pixel art: a Gather Town map, a game asset, sprites, or just any other kind.
Your components, design system, design assets: all stranded. Aseprite can't import them. You either trace every node by hand for days, or start over in a new tool.
Figma has no answer. It is built for smooth edges, not pixel grid boundaries. Or is it?
Vector Pixel Art changes this. Design as usual. Choose Grid Size. Convert. Pixel art in seconds.
Replies
I built this all because all my design tokens, components, and the whole design system were in Figma. We had to develop maps for gather.town and workadventu.re. Either we were stuck with their predesigned maps or our maps were of poor quality, which just really ruined the experience for everyone, if we have to be honest about it. I knew there had to be a better way than having to shift entire systems to other pixel native options like Asperite. Hence, designed this so that no matter the object, sprite sheet, or even the entire map, I can just design the entire thing in figma.com and when it's time to export, just convert it in a few seconds (instead of days).
How does the conversion handle things like anti-aliased edges or smooth gradients from Figma, do those get quantised cleanly to the chosen grid size or end up messy?
Hey@nazar59264
Edges: yes, cleanly. Every shape boundary is rewritten onto the pixel grid, so canvas-level anti-aliasing from sub-pixel positioning disappears; what you see is what exports.
Gradients: the plugin doesn't touch fills at all, only position/size. A gradient stays a smooth gradient, just bounded by a crisp, grid-aligned edge. It won't get quantised into flat pixel-art colour bands (that'd be a separate feature, not something this does today).
One catch worth knowing: Figma's own Image resampling export setting defaults to Detailed, which can reintroduce softness even on perfectly grid-aligned content; switching to Basic on export fixes it. Not a plugin thing, just a Figma setting worth checking.
Finally tried this on a messy Gather Town map and the grid conversion actually respected my layer order, which I did not expect. Would be nice to tweak the palette per layer but for a few seconds of work it already saved me an afternoon.
Hey@canselxfua! It's so good to hear that it saved you an afternoon and worked well on your Gather Town map.
On palette per layer: right now, the plugin doesn't touch colour at all; everything you see is 100% your native Figma fills, so you can already set a different colour per layer today through Figma's own tools. Is that what you meant, or were you picturing something more like locking a layer to a fixed set of swatches (say, 8 colours) and having the plugin auto-snap fills to the nearest one? Different feature entirely; I want to scope the right one before I add it to the list.