How to convert a scanned logo image to vector in Figma

Figma does not have a built-in command that converts a raster image, such as a scanned logo or a PNG, into vector paths. You can get a vector logo in two ways. You can run a community tracing plugin that generates paths from the image, or you can redraw the logo by hand with the Pen tool, using the scan as a locked reference layer. For most scanned prints, the reliable result is a combination of the two: auto-trace for a starting point, then manual cleanup or a full redraw where the trace is inaccurate.

Some terms used in this guide: A raster image stores a grid of pixels, so it blurs or turns jagged when enlarged. Vector artwork stores shapes as mathematical paths, so it scales to any size without losing sharpness. A path is made of anchor points (nodes) joined by straight or curved segments, and Bezier handles control how each curve bends. Tracing means generating paths that follow the edges of a raster image.

Before you start

Confirm you have the right to reproduce and modify the logo. A file you can open or trace is not permission to reuse the mark.
If the logo owner can supply original vector artwork, ask for it first. A redraw is an interpretation of the scan, not a recovery of the original file.
Scan the print flat and straight, at a higher resolution than you would use for screen viewing, so edges and small details are clearly defined.
Clean up the scan before importing it: straighten it, crop to the logo, raise the contrast, and remove dust, paper texture and stray marks. Tracers follow every speck they detect, so a cleaner image produces fewer unwanted paths.
Note the logo's colors, and any official color references you have, because the scan's colors are affected by the paper, ink and scanner and should not be sampled as final values.
Identify any lettering in the logo and, if possible, the typeface used.

Choosing a method

Method | Suited to | Main drawback

Tracing plugin | Simple, high-contrast marks with few colors; quick drafts | Output often has too many nodes, wobbly curves and rounded corners that should be sharp

Manual redraw with the Pen tool | Final production artwork, geometric shapes, lettering, worn or low-quality scans | Takes more time and requires path-drawing skill

Trace, then refine by hand | Most scanned logos | Still requires a careful node-by-node review

Method 1: Trace the scan with a plugin

Figma's Community has plugins that convert images to vectors. Many are free to use, but names, features, usage limits and pricing change over time, so check the plugin's current listing before you rely on it. This guide does not endorse any specific plugin, and the options described below are typical of tracers, not settings from a specific product.

1. Drag the cleaned scan onto the canvas, or place it inside a frame.
2. Open the Community resources or plugin browser, search for image tracing or vectorizing, and review the plugin's description and permissions before you run it.
3. Select the image layer and run the plugin.
4. If the plugin has options, start with the fewest colors the logo needs. For a one-color mark, use a black-and-white or threshold mode. Increase detail only when small features are being lost.
5. Place the traced result directly over the original scan so you can compare the two.
6. Continue to the cleanup steps below. Don't treat raw tracer output as finished artwork.

Method 2: Redraw the logo with the Pen tool

1. Place the scan on its own layer, reduce its opacity so your paths stand out, and lock the layer so you cannot move it accidentally.
2. Create a new layer or frame above it for the vector work.
3. Draw basic geometry with the shape tools first: rectangles, ellipses, polygons and lines. Hand-drawn versions of circles and straight edges are rarely accurate.
4. Use the Pen tool for organic curves. Place anchor points at the extremes of each curve and at the corners, not along the curve, and drag handles to shape the curve between points. Fewer, well-placed points give smoother results.
5. Combine overlapping shapes with Boolean operations: Union to merge, Subtract to cut away, Intersect to keep the overlap, and Exclude to remove it. Flatten a Boolean group when you need a single editable path.
6. If you drew any parts as strokes, use Outline stroke to convert them to filled shapes, so line weights stay fixed when the logo is scaled.
7. Apply solid fills using the logo's correct color values, not colors sampled from the scan.

Handling lettering

If you can identify the typeface and you have a license that allows logo use, set the text with Figma's text tool and match its size, letter spacing and alignment to the scan. Keep an editable copy, then make a delivery copy where you convert the text to paths with Flatten. That way, the logo appears correctly on systems where the font is not installed. If the lettering is custom or modified, or you can't identify the font, redraw the letters with the Pen tool, just as you would any other shape. A traced version of the letters will usually look uneven when you zoom in.

Cleaning up traced or drawn paths

Delete small stray shapes that come from dust or paper texture.
Remove extra anchor points on smooth curves, and redraw sections that are bumpy.
Restore sharp corners that the tracer softened, and straighten edges that should be straight.
Make sure repeated elements, such as matching letter strokes or symmetrical halves, are identical. You can do this by duplicating and mirroring one side instead of tracing both.
Combine shapes of the same color where it makes sense, and name your layers clearly.
Decide whether the logo should reproduce the scan exactly, including print wear and ink spread, or represent the intended design. In most cases, reconstruct the clean version and make no correction that changes the mark's identity without the owner's approval.

Exporting the vector logo

1. Hide or delete the reference scan, so it is not included in the exported file.
2. Select the logo frame or group and add an export setting in the Export section of the properties panel.
3. Choose SVG for screen and web use, or PDF when a print vendor or layout application requires it. Export PNG only as a raster preview at the size you need.
4. In the SVG export options, check the text-outlining setting if any live text remains. Turn off ID attributes unless a developer needs them. These options may be named or placed differently in your Figma version.
5. Export a version for each layout and color variant you need, such as full color, one color and reversed.

Print limitation: Figma works in RGB and does not provide native CMYK or spot color output. If a printer needs CMYK or Pantone separations, open the exported PDF or SVG in a print-oriented vector editor, set the color values there, and confirm the requirements with the printer.

How to confirm the result is truly vector

In the layers panel, every logo element should be a vector, shape, Boolean group or flattened path. No layer should have an image fill.
Switch to Outline view in the View menu to see the paths without fills. Look for stray shapes, overlaps and unnecessary points.
Zoom in very close and check that the edges stay sharp, the curves are smooth and the corners are crisp.
Scale a copy to a very large size and a very small size, and check that the details hold up and nothing distorts.
Open the exported SVG in a text editor. It should contain path or shape elements and no embedded image element or base64 image data. A file with an .svg or .pdf extension can still contain a raster image inside it.
Place the export on light and dark backgrounds, and compare it side by side with the original print at its normal viewing size.

Gaps to check yourself

No version-specific documentation was provided for this guide. Menu locations, shortcut keys, export option names and Community plugin availability can change between Figma releases. Check them in the version you are using. The guide also gives no recommended scan resolution, plugin settings or color values, because none were confirmed.