Not yet in the Figma Community. It is built and tested outside Figma — the import logic runs against real captured data and a fake that enforces Figma's own rules — but it has never opened in the real app. This page will link straight to the listing once it is live.
What does it do?
Paste a website's address into the plugin. It reads the site's colors, type scale, spacing, border radii, shadows and motion, shows you what it found, and imports what you tick — straight into your current Figma file, no file upload or export step.
Three ways in, one result
| Source | Needs | What you get |
|---|---|---|
| From a website, with an Enrichr key | an enrichr_… key (free plan: 30 credits a month) | the full, role-aware design system, plus the site's real GSAP animation timings if you tick that too |
| From a website, no key | nothing | the free one-lookup-per-visitor preview: a short color list with no background/text/accent roles |
| From the CLI's JSON | the open-source CLI, run once in a terminal | everything the CLI measures, offline, no key, nothing sent anywhere |
What it writes into your file
- Variables, in a collection named
Enrichr · <host>: background, text, accent and border colors, the full palette, the site's own named color variables, heading/body/code fonts, text sizes, spacing, radii, breakpoints, and motion durations and easings. - Styles, under
Enrichr/<host>/…: color styles bound to those variables, text styles with the real family, weight, size, line height and letter spacing, and shadow styles. - A documentation frame on the current page: swatches, the site's own colors, type samples set in the real text styles, radii, shadows, spacing bars, and a motion section with durations, easings and the GSAP summary when you have one.
Run it again on a site you already imported and it updates what's there, matched by name, instead of duplicating it — the documentation frame is the one exception; a second run adds a second frame rather than replacing the first.
Figma already has webpage capture — what does this add?
Figma's own capture gets you a screenshot and a rough layer tree. This plugin adds what that doesn't: the site's own named CSS variables (not just sampled colors), a measured type scale with real weights and line heights, border radii and shadow values, and — with an Enrichr key — the site's actual GSAP/ScrollTrigger easing curves and durations, not a guess at "looks like it eases in."
What it can't do yet
- Fonts. Figma has no API to install a font file, so a family you don't already have falls back to Inter in the text styles. The import report names what's missing.
- Roles from the free preview. Without a key, the preview can't tell background from text from accent — you get a ranked palette with no roles attached.
- It hasn't run in real Figma yet. The logic is tested against real captured data (a CLI run, a real design-system extraction, a real free-preview response) and against a fake that enforces Figma's own rules — fonts loaded before text is set, variable types matching, unique names in a collection. It has not had its first run in the actual app, so expect small first-run surprises once it does.
What does it send, and where?
Without a key: the site's address and a random id (so the one free lookup per visitor can be counted) go to Enrichr's preview endpoint. With a key: the address and the key, in a header, never a URL — stored only if you tick "Remember it," in Figma's own per-plugin storage on your machine. The CLI-JSON tab sends nothing at all. No analytics, no telemetry, either way.
FAQ
Is there a free Figma plugin to import 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. It is free. It is not yet listed in the Figma Community; this page will link straight to the listing once it is.
How do I import a website's colors into Figma?
Open the plugin, paste the site's URL, and tick what you want. Without an Enrichr key it uses the free one-lookup-per-visitor preview, which gives you a palette with no background/text/accent roles. 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 (the free plan gives 30 credits a month) adds the type scale, named CSS variables, roles, and optionally the site's real GSAP animation timings.
Can I import tokens without sending a URL anywhere?
Yes. Run the open-source 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 in that path.
Does it import fonts?
No — Figma has no API to install a font file. If a site's family 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 to switch them over.
Is my data sent anywhere?
Only the site address you paste, and your Enrichr key if you add one (sent in a header, never a URL, stored only if you tick the Remember it option). The CLI-JSON tab sends nothing. No analytics, no telemetry.
Does re-running it on the same site duplicate everything?
No. Variables and styles are matched by name and updated in place. The documentation frame is the one exception: running the import again adds a second frame rather than replacing the first.
When will it be on the Figma Community?
It needs one real run inside Figma first — it has only been tested against a fake Figma so far — then Figma's own review. No date yet.