Tracepen for Figma: Trace Images Into Vector Paths

Get Tracepen on Figma Community →

Tracepen converts an image — a file you open, or the layer already selected on your canvas — into editable vector paths inside Figma, one path per colour. The tracer is deterministic: no AI, no randomness, the same picture with the same settings produces the same curves every time, and the conversion happens on your machine. Free with every feature and a few exports a day with a free 3dshouse account. Tracepen Pro removes the daily limit for $80 one-time, and a single purchase covers the web app, the SketchUp extension, the Blender add-on and this plugin.

• Real vector nodes, not a placed picture: the result arrives as a frame of vector paths you can push around with the node tool.
• Use selection: vectorize what is already on the canvas — the one thing an export format can never do for you.
• One path per colour, holes encoded inside the same path, curves fitted as Beziers.
• Four knobs that matter: colour count, noise filter, smallest region kept, corner roundness.
• Converting is unmetered — retrace as often as you like; only placing a result on the canvas counts as an export.
• Published free on Figma Community under the Community Free Resource License.

What it does in Figma

The panel opens at a fixed 480 x 720 px and holds the same interface as the web app: file picker, crop, the four sliders, a colour-layer list, and one button. When you press Add to design, the plugin hands the finished vector data to Figma’s own SVG importer, which is why the trace lands as a frame of vector paths rather than a bitmap pinned to the board. Every path is live geometry: boolean it, round its corners, recolour it, feed it to a component.

The plugin runs in Figma Design files. Network access is limited to two addresses in the manifest: 3dshouse.com for sign-in and the free-quota check, and tracepen.3dshouse.com for the sample images on the first-run strip. Your picture is traced inside the plugin panel, and none of those requests carries it.

Why “Use selection” is the point

I shipped the web app first, and SVG already imports into Figma cleanly. So a plugin only earns its place if it does something the file round trip cannot: read the canvas. Press Use selection and the plugin asks Figma to export the first selected node as a PNG — any node, so a photo, a frame, a group, a flattened sketch — then feeds that straight into the tracer as if you had opened it from disk. Select nothing, or select something Figma refuses to export, and the panel says so instead of failing quietly. Of all the hosts Tracepen runs in, Figma is the only one that can pass the selection over, so this button exists nowhere else.

How to trace an image in Figma

1. In a Figma Design file, run Plugins → Tracepen.
2. Sign in. The plugin opens a browser tab for the 3dshouse sign-in and waits for it — up to ten minutes — then picks the session up by itself. A free account is required before the tool unlocks.
3. Open an image file (or click a sample), or select a layer on the canvas and press Use selection.
4. On open, the image is analysed: flat artwork and photographs take different quantization routes, and Color number is pre-set to the palette size actually found.
5. Tune. Noise filter smooths before quantization (0 is off). Merge min area drops colour regions below that pixel count. Corner smooth runs from sharp corners to fully round. Line thickness and Line color add an outline.
6. Press Convert. The button counts steps while it works and finishes with the number of colours it produced.
7. Check the Color Layers list, recolour a swatch or untick a layer you do not want — unticked layers are left out of the output.
8. Press Add to design.

What lands on the canvas

Each visible colour becomes exactly one path containing every outer contour and every hole, resolved with an even-odd fill rule, so a letter O stays a letter O instead of two stacked shapes. The frame is named after the source file, centred on your current viewport and left selected, ready to drag or group. Layers are ordered largest area first, then by colour proximity, so neighbouring rows in the list look like neighbours.

Two details worth knowing, because they prevent the usual tracer complaints. When Line thickness is 0, each region still carries a one-pixel stroke in its own fill colour — that kills the hairline seams you normally get between adjacent flat colours. And small-region cleanup absorbs specks into whichever neighbour they share the longest border with, but always keeps at least one component per colour, so a 1 px black outline survives a high Merge min area instead of vanishing. Set Color number to 1 and you get a silhouette: a single mask from a luminance threshold.

Tracepen, Figma’s Vectorize and other tracing plugins

Figma has its own Vectorize since February 2026, an AI feature for Full seats on paid plans with AI enabled. Tracepen is for everyone else, and for anyone who wants the same paths from the same image every time and colours that come out as one layer each. For a side-by-side of Vectorize and eleven tracing plugins (colour support, whether the image leaves Figma, price), read Figma image to vector plugins compared.

Gotchas

• Selection export is capped. The PNG Figma hands over is scaled so its long side is 1500 px. A tiny thumbnail blown up on the canvas still traces as a tiny thumbnail — re-import the original file if you have it.
• Large images block the panel. The conversion runs inside the panel itself, deliberately: Figma’s plugin sandbox freezes the entire interface when code there runs long, so the heavy work is kept out of it. The panel is still busy for the whole run, so a large photograph makes you wait, while a logo or an icon is the size it is built for.
• Add to design is the metered action, exactly like a file download elsewhere. The check runs before the node is built, so a denied add places nothing.
• No download menu here. Inside a design host the panel replaces it with Add to design. For SVG, PNG, PDF or the three DXF flavours, open the same trace in the web app.
• Anti-aliasing inflates colour counts. A “two-colour” screenshot carries in-between shades along every edge. Lower the colour count or raise the minimum region size.
• Sign-in is per place. Browser storage is unavailable to a plugin iframe, so the session is kept in Figma’s own plugin storage — signing in on the web app does not sign you in here.

Free vs Pro

The free plan is not a crippled demo: every feature, full colour, every export format, every surface. The only limit is a few finished exports a day per account, and that count is shared across the web app, SketchUp, Blender and this plugin, because they all meter against the same account. Tracing and retracing are free and unlimited, so you can iterate on settings as long as you like and spend an export only when you are happy. Tracepen Pro is a one-time purchase per account, $80 regular, that removes the daily cap everywhere at once.

Other surfaces

• Tracepen web app — the full tool in a browser, with every export format.
• Tracepen for SketchUp — builds native faces and groups straight in the model.
• Tracepen for Blender — meshes or editable Bezier curves, one object per colour.

Install

Get Tracepen on Figma Community →

1. Open the Community page and open the plugin in Figma from there.
2. In a Figma Design file, run Plugins → Tracepen.
3. Sign in with a free 3dshouse account in the browser tab that opens, then return to the panel.

Requirements

• A Figma account and a Figma Design file.
• A free 3dshouse account for sign-in and the daily export count.
• Figma desktop app or browser; the plugin runs inside Figma, nothing to install locally.