Convert a PNG image to vector SVG from Figma

Tutorial
March 20, 2023
3 min
Digidop Blog
Key points

SVG files allow for higher quality images (regardless of screen size) and are "lightweight." SVGs enhance the web performance of your site without compromising its quality. The challenge is that your media files may not necessarily be vectorized.

In today's tutorial, we will show you how to convert a PNG to SVG for free and directly from Figma.

Disclaimer: The conversion may not be ideal for all images. However, this solution works well and is convenient for most black and white PNG files.

Step 1: Install the Image Tracer plugin in Figma

The first step simply involves navigating to one of your Figma projects and downloading the Image Tracer extension. This extension will transform the black edges of an image into a vector layer.

Step 2: Import a PNG into Figma

After downloading the extension, you will be able to import an image (black and white PNG) into Figma. You can drag and drop or copy and paste an image directly into your project.

Step 3: Launch the extension

Once your image is in Figma, select it by clicking on it. You can then right-click, hover over "Plugins," then "Installed plugins," and finally click on "Image Tracer."

Launching a plugin (image tracer) in figma

Step 4: Modify the plugin settings

When you launch the extension, you will immediately see a preview of the traced points and what your vector will look like. If it doesn't meet your expectations, you can adjust certain settings to fine-tune your future SVG. To do this, click on "Show options" and modify the various values according to your needs.

figma image tracer plugin conversion png to svg

Step 5: Retrieve the SVG image

Once the rendering meets your satisfaction, all you need to do is click on "Place Trace Vector." The vector will overlay your PNG image, and you can move it to see the result. You can then modify it as you see fit in Figma and export it as SVG.

vectorized png image in figma using the image tracer plugin

There you go, you now know how to convert and export a PNG to SVG in Figma. If you're interested, you can explore more Figma plugins for web design. You can also find all the Figma resources from Digidop!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

Abstract glowing visual with yellow and orange gradients, featuring the text “AI & DESIGN 2025” in the center, suggesting a theme focused on artificial intelligence and design in 2025.
Documentation
AI

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)

How AI is transforming the Designer’s Role in 2025 (and why you won't be replaced)
Screenshot of the Webflow Partner directory showcasing several agencies: Digidop, Finsweet, Flow Ninja, and Simon Lampert. The blue background features the Webflow Partner logo on the left, while partner cards display their status, starting price, awards, and preview of delivered websites.
Documentation
Webflow

The Webflow Partner Program

The Webflow Partner Program
Agentic AI vs. Generative AI
Documentation
AI

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Agentic AI vs. Generative AI: Key Differences and Real-World Applications

Want to turn your website into your most valuable asset?

Contact us today