Copied!
Blog

Enrichr for Figma: import any website's design system as variables

Paste a URL into the plugin and a site's colors, type scale, spacing, radii, shadows and motion land in your file as Figma variables, styles and a documentation frame.

← Blog

October 25, 2026

3 min readFree · early access

Starting a Figma file in the same visual system as a reference site usually means a round trip through DevTools, screenshots and guesswork. Enrichr for Figma skips that: paste a website's address into the plugin, and its colors, type scale, spacing, border radii, shadows and motion land in your current file as variables, styles and a documentation frame — no file upload, no export step.

Try it on any site. The free website font finder shows you every font a page is set in, with weights and fallbacks. Paste a URL, no sign-up for your first lookup.

Three ways in, one result

SourceNeedsWhat you get
From a website, with an Enrichr keyan enrichr_… key (first analysis free)the full, role-aware design system, plus the site's real GSAP animation timings if you tick that too
From a website, no keynothingthe free one-lookup-per-visitor preview: a short color list with no background/text/accent roles
From the CLI's JSONthe open-source CLI, run once in a terminaleverything the CLI measures, offline, no key, nothing sent anywhere

What lands in your file

Colors come in as Figma variables, named and grouped by role when a key is used — background, text, accent and the rest of the ranked palette — so swapping a reference site later is a rename, not a rebuild. Type scale, spacing and radii land as styles matched to Figma's own primitives. A documentation frame summarizes everything the import found in one place: the full palette with coverage, the type scale, and the motion timings if you pulled those in too.

Fonts: the one thing it can't do for you

Figma has no API to install a font file from a plugin, so if a site's typeface isn't already in your Figma, text styles fall back to Inter. The import report names exactly which font is missing, so you can install it yourself and re-run the import to switch the text styles over — matched by name, not duplicated.

Re-running it on a site you've already imported

Variables and styles are matched by name and updated in place, so pulling a site in again refreshes the numbers rather than leaving two copies of everything. The documentation frame is the one exception: each run adds a new frame rather than replacing the last, so you can compare an old capture against a fresh one side by side.

What the plugin sends, and when

Only the site address you paste, and your Enrichr key if you add one — sent in a request header, never a URL, and stored only if you tick Remember it. The CLI-JSON tab sends nothing at all: the whole import happens from a file already on your machine. No analytics, no telemetry, either way.

What it doesn't do

It imports the design system — colors, type, spacing, radii, shadows, motion timings — not the layout or components. It won't recreate a page's structure in Figma, and it can't install a font file for you. For the parts of a live site that only exist while the page is running (compiled shaders, the Three.js scene), a full Enrichr capture is the way in, same as it is for the CLI.

Full details, screenshots and the current build status: the Enrichr for Figma page.

FAQ

Is there a Figma plugin that imports a website's design tokens?

Yes. Enrichr for Figma reads a site's colors, type, spacing, radii, shadows and motion and writes them into your file as variables, styles and a documentation frame, directly from a pasted URL.

How do I import a website's colors into Figma?

Open the plugin, paste the site's address, and tick what you want. Without an Enrichr key it uses the free one-lookup-per-visitor preview, a palette with no background/text/accent roles assigned. With a key it imports the full, role-aware design system in one pass.

Does it need an Enrichr account?

No. It works with no account at all, using the free preview. An Enrichr key — your first analysis is free — adds the type scale, named CSS variables, color roles, and optionally the site's real GSAP animation timings.

Can I import tokens without sending a URL anywhere?

Yes. Run the open-source Enrichr CLI (npx enrichr-cli tokens example.com --json) in your own terminal and paste its JSON into the plugin's third tab. Nothing is sent to Enrichr on that path.

Does it import fonts?

No — Figma has no API to install a font file. If a site's font isn't already in your Figma, text styles fall back to Inter and the import report names the missing font so you can install it and re-run the import.

Does re-running the import duplicate everything?

No. Variables and styles are matched by name and updated in place, so running it again refreshes them rather than piling up duplicates. The one exception is the documentation frame, which adds a new one each run rather than replacing the last.

Is my data sent anywhere?

Only the site address you paste, and your Enrichr key if you add one, sent in a header and never a URL. The CLI-JSON import path sends nothing at all. No analytics, no telemetry.