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

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today