How to Convert PNG to SVG in Figma

Figma is primarily a vector design tool, so converting a raster image like a PNG to an SVG (Scalable Vector Graphics) format requires a bit of manual work. This guide walks you through how to take a PNG image, trace it into editable vector paths, and export it as an SVG.

Why Convert PNG to SVG?

Scalability: SVGs don’t lose quality when resized.
Editability: SVGs are made of paths and shapes that can be styled and adjusted.
File size: SVGs are often smaller and easier to work with in web or UI projects.

Let’s go through the steps.

Step 1: Import Your PNG into Figma

Open your Figma file or start a new one.
Drag your PNG file into the canvas or use File > Place Image to import it.

Once it’s in, position the image as needed and lock the layer so it doesn’t move while you trace it.

Step 2: Manually Trace the Image Using Vector Tools

Figma does not have built-in auto-tracing like some illustration tools, so you’ll need to:

Option A: Use the Pen Tool

Select the Pen Tool (P).
Carefully click around the image to trace the outlines.
Close the shape and apply fill or stroke colors as needed.
Repeat this for all parts of the image you want vectorized.

Option B: Use a Plugin Like “Image Tracer”

Go to Resources (Shift + I) and search for Image Tracer.
Install and run the plugin.
Follow the prompts to convert the PNG into vector paths.
Tweak and clean up the resulting vectors.

Step 3: Organize and Group Your Vectors

Once you’ve traced the entire image:

Select all vector elements.
Group them (Ctrl/Cmd + G) for easier export.
Make any last-minute edits, like color corrections or layering.

Step 4: Export as SVG

Select your group of vector elements.
Click Export in the bottom-right panel.
Choose SVG as the format and click Export.

You now have a clean, scalable SVG version of your original PNG design.

Tips for Better Results

Use high-contrast PNGs for easier tracing.
Simplify your design if possible — too many small details can clutter your SVG.
Optimize your SVG using tools like SVGOMG or SVGO for smaller file sizes.

Final Thoughts

While Figma doesn’t convert PNG to SVG automatically, it gives you precise vector tools to do it manually or with help from plugins. This gives you full control over the output, perfect for clean, scalable design assets. Once you get the hang of tracing, converting images becomes a quick and rewarding process.