How to Vectorize a Logo from a Photograph in Figma

The short answer

Figma does not include a built-in automatic image-trace command. To vectorize a logo from a photograph in Figma, you place the photo on the canvas as a reference, lock it, and redraw the logo on top using vector shapes and the Pen tool. You then rebuild any lettering with a matching font or hand-drawn outlines, combine overlapping parts with Boolean operations, and export the result as SVG or PDF. Community plugins that attempt automatic tracing are available, but their output from a photograph usually needs the same cleanup as a manual redraw, so this guide treats manual reconstruction as the primary method.

A vector is artwork described by mathematical paths instead of pixels. A path is a line or curve defined by anchor points (the points the line passes through) and Bézier handles (the control arms that set the curve's direction and tension). Because the shape is stored as geometry, a vector logo can be scaled to any size without blurring. A photograph is a raster image, which means it is a grid of colored pixels; it contains no paths, so vectorizing it is a redrawing task rather than a file conversion.

Before you start

Confirm that you have the right to recreate and use the logo. Redrawing a mark does not change who owns it, and having it in a vector format does not grant permission to reuse it. If the logo belongs to a client or employer, check whether an original vector master already exists before redrawing; an official file is more accurate than any reconstruction from a photo.

Prepare the photograph outside Figma if it needs geometric correction. Figma can crop and adjust basic image properties, but it does not correct perspective or lens distortion. If the logo was shot at an angle, on a curved surface or through a wide lens, straighten it in a photo editor first so that lines meant to be straight and parallel are straight and parallel in the reference. Tracing an uncorrected photo bakes the distortion into your vector.

• Use the sharpest, most front-on photo available, ideally one where the logo fills much of the frame.
• Crop to the logo with a small margin around it.
• Increase contrast if edges are hard to see; the goal is a clear guide, not an attractive image.
• Note every color in the logo and any places where lighting or reflections may be hiding the true color.
• If the logo includes text, take note of letter shapes that might help identify the typeface.

Step-by-step: redrawing the logo in Figma

Menu names and keyboard shortcuts below reflect standard Figma behavior, but Figma updates its interface regularly and this guide was not verified against a specific release. If a command is missing or labeled differently, search for it with Figma's Quick Actions (Ctrl+/ on Windows, Cmd+/ on Mac) or check Figma's current help documentation.

1. Set up the reference layer

• Create a new design file and add a frame large enough to hold the logo comfortably; larger working sizes make small curves easier to place accurately.
• Drag the photo into the frame, or use the image placement option in the shape tools menu.
• Scale the photo so the logo fills most of the frame.
• Lower the photo layer's opacity (pressing a number key such as 5 sets 50% on a selected layer) so your vector shapes will stand out against it.
• Lock the photo layer (Shift+Ctrl+L or Shift+Cmd+L, or the lock icon in the Layers panel) so you do not move it while drawing.
• Rename the layer to something such as "Reference" to keep the Layers panel readable.

2. Analyze the construction before drawing

Look for the geometry underneath the logo. Many marks are built from circles, rectangles, rounded rectangles and straight lines, sometimes cut away from one another. Identifying these lets you draw them with Figma's shape tools, which produces cleaner, more symmetrical results than freehand tracing. Reserve the Pen tool for genuinely organic curves. Also decide which parts are separate shapes, which are holes cut out of other shapes, and which are lettering.

3. Build geometric parts with shape tools

• Use the Rectangle (R) and Ellipse (O) tools for any parts that are true rectangles, circles or ellipses. Hold Shift while dragging to constrain to a square or circle.
• Use the corner radius control on rectangles where corners are rounded, rather than drawing curves by hand.
• Use the Line tool (L) or Polygon and Star tools where they match the design.
• Give shapes a solid fill with no stroke while constructing; strokes complicate later Boolean operations.
• Use alignment controls and smart guides to keep shapes centered and symmetrical where the original logo appears to be.

4. Trace organic curves with the Pen tool

Select the Pen tool (P). Click to place a corner point; click and drag to place a smooth point with handles. Place anchors at the extremes of each curve (the topmost, bottommost, leftmost and rightmost points) and at the places where a curve changes direction, not evenly along the outline. Fewer, well-placed points produce smoother curves than many closely spaced points. Close the path by clicking the first point.

• Press Enter, or double-click a vector, to enter vector edit mode and adjust points and handles.
• Keep handles roughly in line with the direction of the curve; extreme handle lengths create bulges and kinks.
• Holding Shift while dragging a handle constrains its angle, which helps keep horizontal and vertical extremes clean.
• Use the bend tool in vector edit mode (hold Ctrl or Cmd) to convert between corner and smooth points.
• Delete unnecessary points and check whether the curve still matches the reference.
• Do not trace photographic noise, blur or reflections; draw the shape the designer intended.

5. Combine and cut shapes with Boolean operations

Boolean operations combine selected shapes into new ones. Union merges shapes into one outline, Subtract removes the top shape from the one below it, Intersect keeps only the overlap, and Exclude keeps everything except the overlap. In Figma these are available from the Boolean groups control in the toolbar when two or more shapes are selected. Use Subtract for counters and holes, such as the inside of a letter O or a cut-out within an emblem.

Figma keeps Boolean results as editable groups. Once a shape is final, you can use Flatten (Ctrl+E or Cmd+E) to merge it into a single vector path. Flattening is harder to undo later, so consider keeping an unflattened copy on a hidden layer or separate page.

6. Rebuild the typography

Text in a logo can be handled in two ways. If you can identify the typeface and are licensed to use it, set the text with Figma's Text tool (T), match size, letter spacing and weight to the reference, then convert it to outlines for delivery. If the lettering is custom, modified, or the font cannot be identified with confidence, trace each letter as vector shapes. Figma does not identify fonts from images, so identification must happen elsewhere or by eye; treat any match as provisional until compared closely against the photo.

Converting text to outlines turns each character into vector paths so the logo no longer depends on the font being installed. In Figma, selecting a text layer and applying Flatten converts it to outlined vectors; the SVG export settings also offer an option to outline text. Keep a live-text copy hidden in your file so the wording and spacing can still be edited.

7. Apply color

Colors sampled from a photograph are affected by lighting, camera processing and the screen you view them on, so an eyedropper reading is an approximation, not the brand color. Use sampled values only as placeholders. If official color values exist, apply those. If they do not, choose clean values by eye, keep the palette to the number of distinct colors the logo actually uses, and record that the colors are estimates. For print delivery, specify CMYK or spot colors in a print-focused application, because Figma works in RGB.

8. Organize the file

• Group the finished logo and name the group clearly.
• Place the logo in its own frame with consistent padding, which becomes the export boundary.
• Remove stray points, empty groups and leftover construction shapes.
• Keep the reference photo on its own locked layer, hidden or removed from the export frame.
• If the logo needs variations, such as one-color or reversed versions, create each in its own frame.

Checking the result

Run these checks before treating the vector as finished. Each produces something you can see, so you can confirm the work rather than assume it.

Check | How to do it in Figma | What a pass looks like

Path outline review | Toggle Outlines view (Ctrl+Y or Cmd+Y) | Clean, closed outlines with no stray points, overlapping duplicates or unexpected lines

Reference comparison | Show the reference photo under the logo at low opacity | Vector edges follow the intended shape of the logo, ignoring photographic blur and distortion

Curve smoothness | Zoom in closely on curves | No visible kinks, flat spots or wobbles where the original curve is smooth

Small-size legibility | View or export the logo at a small size | Counters stay open and details remain distinguishable

One-color test | Duplicate the logo and set every fill to black | The shape still reads correctly without color, and no hidden overlapping shapes appear

Text independence | Inspect the layers of the delivery version | Lettering is outlined vectors, not live text, unless editable text was intentionally requested

Export round trip | Export as SVG and reopen it in Figma or another vector application | The file opens as editable paths with correct shapes, fills and holes

Pay particular attention to holes. If a cut-out appears filled in after export, the path's fill rule or Boolean structure may be incorrect. In vector edit mode, Figma lets you fill or unfill individual regions of a vector network; fix the issue in the source and export again.

Exporting the vector logo

Select the logo's frame, open the Export section in the right-hand panel, and add an export setting. Choose the format based on where the logo will be used.

• SVG: the usual choice for web, apps and passing the logo to other vector software. Figma's SVG export includes options such as outlining text, including layer names as id attributes, and simplifying strokes; outline text for logo delivery, and decide whether id attributes are useful for the recipient.
• PDF: useful for sharing a vector file that opens widely and for some print workflows. Confirm color requirements with the printer, since Figma exports RGB color.
• PNG: a raster export for situations where a pixel image is required, such as some document or social media uses. Export at the size needed, or at a multiplier for high-density screens. This is not a vector file.

A file ending in .svg or .pdf is not automatically clean vector artwork. Either format can contain embedded pixel images, including your reference photo if it was inside the exported frame. Reopen the exported file and confirm that it contains only paths.

Limits and gaps to be aware of

• A redraw from a photograph is an interpretation. Proportions, curve details and colors may differ from the original master artwork, especially if the photo is low resolution, angled or partially obscured.
• This guide does not cover specific automatic-tracing plugins, because their availability and behavior change; test any plugin on a copy of your file and inspect the output in Outlines view.
• No confirmed version-specific details were available for this article. Verify shortcuts, menu locations and export options against the version of Figma you are using.
• For print jobs that require spot colors, CMYK values or specific print-ready settings, Figma alone may not meet the requirement; plan to finalize the artwork in a print-oriented vector application.