Convert PNG image to SVG vector from Figma

SVG files allow to have better quality images (whatever the screen size) and "light". SVG files allow you to improve the web performance of your site without impacting the quality of your site. The problem is that your media files are not necessarily 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. Nevertheless, this solution works well for most black and white PNG files.

Step 1: Install the Image Tracer plugin in Figma

The first step is simply to go to one of your Figma projects and download 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 (PNG in black and white) into Figma. You can directly drag and drop or copy and paste an image into your project.

Step 3: Launch the extension

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

Step 4: Change the plugin settings

When you launch the extension, you have directly a preview of the drawn points and thus of what your vector will look like. If you don't like it, you can change some parameters to adjust your future SVG. To do this, you can click on"Show options" and modify the different values according to your needs.

Step 5: Retrieve the SVG image

Once you are satisfied with the rendering, you just have to click on"Place Trace Vector". The vector will be superimposed on top of your PNG image, you just have to move it to see the rendering. You can then modify it to your liking in Figma andexport itas an SVG.

Now you know how to convert and export PNG to SVG in Figma. If you want, you can discover other Figma plugins for webdesign. You can also find all the Figma resources on Digidop!