Paste a URL. Get colours, typography, spacing, grids, tech stack — all in Figma frames with a full WCAG accessibility report. Completely free, forever.
No setup. No API keys. No backend. Everything runs inside Figma's sandbox — your data never leaves your machine.
Enter any public website URL. The plugin fetches it through a CORS proxy — stripe.com to your client's live site, no restrictions.
Select breakpoints (320–1920px), pick analysis modules — colours, typography, spacing, grid, tech stack, assets — and choose export formats.
A 10-step pipeline completes in under 30 seconds. Figma frames are created automatically. PDF, HTML, and JSON download to your machine.
Browse in-plugin results: accessibility contrast report, colour swatches, type scale, spacing tokens, grid specs, and technology fingerprint.
Six analysis modules, four export formats, full WCAG accessibility report — all in one free plugin.
Extracts every hex and RGB value from inline styles and CSS blocks. Auto-categorises into brand, background, text, accent, and border groups. Up to 60 colours per extraction.
Full contrast matrix between brand and background colours. Each pair gets a ratio, AAA/AA/AA Large/FAIL badge, and live text preview — in plugin, Figma frame, HTML, PDF, and JSON.
Detects font families from CSS and Google Fonts imports. Extracts font sizes and builds a named type scale — Display XL down to Label — with weights and line heights.
Scrapes padding, margin, and gap values from CSS to reconstruct spacing tokens. Framework-aware: Tailwind projects get a 4px base scale automatically with rem equivalents.
Detects column count, gutter width, side margins, and container max-width. Generates per-breakpoint grid specs and renders a visual column preview inside Figma.
Identifies 25+ frameworks, CMSs, and hosting providers from HTML/JS signatures — React, Vue, Next.js, Tailwind, WordPress, Shopify, Vercel, Netlify, and more.
Counts inline SVGs and image elements. Detects icon libraries — Font Awesome, Heroicons, Lucide, Feather — and reports image totals per page.
Creates 5 polished 1440px artboards: Cover with stats, Colour System with full accessibility matrix, Typography, Spacing & Grid with column visualiser, Technology Stack.
Every extraction produces four files simultaneously: Figma frames, a print-ready PDF report, a deployable HTML styleguide with CSS tokens, and a Style Dictionary JSON file.
Not just a contrast checker — a complete colour-pair accessibility matrix with live previews baked into every output format.
Every brand colour tested against light and dark backgrounds — foreground, background, ratio, and level all in one clear table.
WCAG 2.1 conformance levels for normal text (4.5:1), large text (3:1), and UI components (3:1) — clearly labelled on every pair.
See exactly how each colour pair looks with "Sample Text" rendered in the actual foreground/background combination, right in the plugin.
Instant summary: how many pairs pass AA+, how many fail, total pairs tested — exported to Figma, PDF, HTML, and JSON.
Every analysis automatically produces all four output files. Download instantly or share with your team.
From 320px pocket mobile to 1920px ultra-wide — select exactly what your project needs.
Systemic WCAG runs entirely inside Figma's sandbox. Your data never leaves your machine. Extract unlimited design systems, forever.