Media
4 items
Description
Compare a page with its Figma design, audit it for SEO and accessibility, then sweep every page on the site at once. Flow Pixel QA is the last pass before a site goes live. It answers three questions about the page you are on — does this match the design, will it index, can everyone use it — and one about the site as a whole. COMPARE THE BUILD AGAINST THE DESIGN Paste a Figma frame link and it appears over the live page at the right width. Nudge it into place with the arrow keys, or switch on Difference blend, where matching pixels turn black and every misalignment lights up. Blink flicks between design and build so your eye catches shifts as movement. Long pages drift. One section taller in the build than in the design pushes everything below it out of alignment, and a single offset cannot fix that. Split lines can: click where the boundary is and everything below it gets its own shift. Alignment is remembered per page and per breakpoint, so returning to a page picks up where you left off. MEASURE SPACING Click two elements to get the gap between them, the four-sided inset when one sits inside the other, or the shared region when they only partly cross. Click one element twice to measure it inside its parent. The reading travels with the screenshot into the report, so a ticket carries the number as text. TECHNICAL SEO Open the SEO tab and it runs. No design needed, no setup. Indexability: noindex in the meta tag or the X-Robots-Tag header, whether robots.txt blocks this URL, the canonical, http versus https, and whether the page is in the sitemap. Meta and social: title and description presence, duplicates and length, html lang, viewport, charset, favicon, hreflang, the Open Graph tags, and whether the og:image actually loads at a usable size. Content structure: exactly one H1, images missing alt text, links with no accessible name, insecure links on a secure page. Structured data: whether each JSON-LD block parses, and whether every item carries the properties Google's rich results actually require. An inspector window shows a card per item with its source JSON. Links: internal and external counts, plus an opt-in checker that fetches the same-origin links and reports 404s and redirects. Staging domains are recognised. On a webflow.io subdomain, being de-indexed is the correct state, so those checks report information instead of failures. ACCESSIBILITY, WITHOUT OVERCLAIMING Fifty-two checks in seven groups, ordered by how often each problem actually occurs, across the full set of 50 WCAG 2.1 AA success criteria. Every criterion is accounted for as automated, proven inapplicable, or left to manual review, and the tab states those totals rather than implying a clean bill of health. A finding either cites a success criterion or is marked best practice. There is no third state, so a helpful suggestion can never be mistaken for a legal obligation. Three of the checks are ones no static tool can perform, because they need the page as rendered rather than as served: Contrast over photos, gradients and video. Walking the CSS cascade cannot tell you what colour sits behind the third word of a heading, which is why other tools return "incomplete" here. Flow Pixel QA takes a screenshot and reads the pixels, discarding the glyphs themselves by colour distance so the text does not drag its own reading down. Text spacing and 200% text. Both criteria ask that nothing is lost when a reader makes text larger or looser, and neither asks the author to set any value — so neither can be answered by reading markup. Each is measured: the override is applied, the geometry re-measured, and anything now clipped or overlapping is reported. The page is put back exactly as it was found. Motion that never stops. Read from the animations the browser is actually running, which includes ones declared in a cross-origin stylesheet that no analyser can read. SWEEP THE WHOLE SITE The Site tab checks every page at once — the half of technical SEO that a page-at-a-time tool structurally cannot do. Duplicate titles are not a fact about one document. It starts from your sitemap, follows a sitemap index into its children, and reads each page as the server sent it. Opening the tab reads the sitemap alone, so the first thing you see is the size of the job before you commit to it. What it finds: duplicate title and description clusters, orphan pages nothing links to, pages linked but missing from the sitemap, sitemap entries that redirect or carry noindex, canonicals pointing off-site or into a chain, sitemap hygiene, and the whole per-page analysis totalled across the site so one glance answers whether a problem is one page or ninety. Every finding lists the pages behind it, and each one carries what you need to act: the status code, the title it duplicates, its own reason for failing — and, for anything found through a link, the page it was found on. A broken link tells you what is dead; the page linking to it is the file you open. Copy report gives you all of it plus a table of every page with its status, title, description and H1. Results are cached per site, so reopening the tab costs nothing and a re-run only refetches pages whose sitemap lastmod has moved. WHAT IT WILL NOT CLAIM Automated checks can prove a failure. They cannot prove a pass, and this extension says so where it matters. The sweep reads pages without running their JavaScript, which is what a crawler's first pass sees. On a server-rendered site that is the whole story; on one that injects meta tags from script, the tab tells you it is under-reporting. External links are counted and named, never called broken. Verifying another domain's status codes needs a permission this extension deliberately does not ask for. Every limit is reported rather than quietly applied. A cap nobody mentions reads as "all clear". PRIVACY Nothing you QA leaves your machine. Pages, screenshots, findings and sweep results are analysed and stored locally, and there is no analytics or telemetry of any kind. The one exception is by your own instruction: when you paste a Figma frame link, your own Figma access token is sent to Figma's API to fetch that frame. Nowhere else, and to nobody else. Built by Flow Ninja, a Webflow agency, for our own pre-launch QA.