How-to guide

How to Convert PNG to SVG in Figma

Figma can't trace a PNG into a vector on its own — here's the free way to do it.

If you have tried to turn a PNG into an SVG inside Figma, you have probably discovered that there is no button for it. Figma is a vector editor, but it has no built-in raster-to-vector trace — dropping a PNG in and exporting as SVG just wraps the same pixels in an SVG container. This guide shows the actual fix: trace the PNG to real vector paths with VectorDrop, then import the SVG into Figma fully editable. It is free and takes about a minute.

Try the playground free →

What you need

  • ▸A PNG source file (a logo, icon, or line art works best)
  • ▸A Figma account — the free tier is enough
  • ▸A browser

Steps

  1. 01
    Open VectorDrop

    Go to vectordrop.co.in and open the live playground. Nothing to install and no account needed.

  2. 02
    Upload the PNG

    Drag and drop the PNG onto the canvas — the trace runs instantly and shows a live preview.

  3. 03
    Tune the SVG output

    Use the playground controls to balance detail against node count. Fewer nodes means cleaner curves and a file that stays responsive once it is in Figma.

  4. 04
    Export the SVG

    Download the SVG file to your device.

  5. 05
    Import into Figma

    Drag the .svg file straight from your file manager onto the Figma canvas. You can also use File → Place image, but dragging is faster and gives the same result.

  6. 06
    Edit as vector in Figma

    The SVG arrives as a real vector group. Double-click into it to select individual paths, recolour fills, adjust nodes with the pen tool, or resize to any dimension without blurring.

Tips

  • ▸Verify you got a true vector: double-click the imported layer. If you can select individual paths and nodes, the trace worked. If you only ever select one rectangular image object, you imported a PNG wrapped in an SVG, not a traced vector
  • ▸Keep the node count low — a 3,000-node SVG will make Figma sluggish and is almost never necessary for a logo
  • ▸Flatten and Outline Stroke only operate on vectors that already exist; neither converts a raster image into paths
  • ▸Group the SVG's layers in Figma right after import to keep your layer panel tidy
  • ▸If the traced shape has stray specks, raise the smoothing or remove the noise in the source PNG before tracing — cleaning up in Figma afterwards is far slower

Frequently asked questions

Can Figma convert a PNG to SVG natively?

No. Figma has no built-in image trace or vectorise function. Exporting a PNG layer as SVG produces an SVG file with the original bitmap embedded inside it — the file extension changes, but it does not become scalable vector artwork. You need to trace the image outside Figma first.

Is there a Figma plugin that does this?

There are community plugins that attempt raster tracing inside Figma. They can work for simple shapes, but they run inside Figma's plugin sandbox and generally give you less control over detail and smoothing than a dedicated tracer. Tracing first and importing the finished SVG is usually both faster and cleaner.

Why does my PNG look blurry when I scale it up in Figma?

Because it is still a raster image. Figma will happily scale a PNG, but it is interpolating pixels, not redrawing shapes. Only a genuine vector stays crisp at any size — which is exactly what tracing produces.

Can Figma open VectorDrop SVGs?

Yes. VectorDrop exports standard SVG, which Figma imports natively as editable vector paths.

Do I need a paid Figma plan?

No. Importing and editing SVGs works on Figma's free tier.

How do I go the other way and export an SVG out of Figma?

Select the layer or frame, open the Export section at the bottom of the right-hand panel, choose SVG as the format, and click Export. This works for any vector layer, including one you imported from VectorDrop.

Ready to vectorise your image?

Upload a PNG, JPG, or WebP and get a clean SVG in seconds. Free and browser-based.

Open the playground →