Your Figma design, next to your live site. Every difference, listed.
Paste a Figma link. Check’d finds the page each frame was designed for, renders it at the frame’s width, and tells you what differs: text, fonts, colours, spacing and anything missing. Each difference lands in your issue inbox with the design value to fix it to.
Read-only access to Figma. On every plan; paid plans compare more frames per run.
Three steps, then one button
No mapping spreadsheets, no plugin to install in Figma.
Step 1: Connect Figma
Paste a personal access token with read-only file access. One token serves every project in the workspace.Step 2: Paste the Figma link
A whole file, one page or a single frame. Check’d lists the top-level frames and their widths.Step 3: Confirm the matches
Check’d proposes the page for each frame. Confirm them all at once, or pick another page.Step 4: Run the check
Now, on a schedule or from CI. Each frame is compared at its own width.
Measured, not eyeballed
- Repeated mismatches fold together, like a design token implemented wrong in twelve places.
- A match score out of 100 per frame: half pixels, half text and style.
| Check | Example |
|---|---|
| Text | “Plan, build and launch” in Figma, “Plan, build and ship” on the page |
| Fonts | Inter in the design, a fallback font on the page |
| Sizes and weights | Hero title 40px in Figma, 32px on the page |
| Colours | Button #2563eb, closest design colour Brand/Primary |
| Spacing | 48px above the subtitle where the design has 32px |
| Missing and extra | An image or a sentence on one side only |
See it the way a designer would
Side by side
The frame and the page at the same width, aligned to the frame.Slider and onion skin
Sweep or fade between them to spot shifts.Highlighted areas
Changed regions outlined in red, ignored ones left out.In plain English
An optional AI summary of what a person notices first.
From difference to fix
One inbox
Each difference is an issue next to your test findings and production errors, with the Figma value and the live value.Fix pull requests
Ask for a fix and the AI gets the design value as the expected result, then opens a pull request you review. About AI fixes.On every release
Put design checks on a schedule or call them from CI, so drift is caught before it ships.
Design check docs
Set up
Open a website project, then the Design check tab. It walks through three steps: paste a Figma personal access token (Figma, Settings, Security, Personal access tokens, with File content set to Read-only), paste a link to a Figma file, page or frame, and confirm the page Check’d proposes for each top-level frame. Workspace owners and admins manage the token, also under Settings, Figma.
Matching looks at the frame name against page addresses and titles, the words in the frame against the words on each page, and how the top of each candidate page looks at the frame’s width. Only when a frame is still unclear does one short AI step pick among the candidates. You can change any match, paste a URL or a path like /pricing, skip a frame, or draw areas to ignore.
What is compared
| Difference | Reported when |
|---|---|
| Text | A design text is missing, or the page shows different words |
| Font size | Off by more than 1px or 6%, whichever is bigger |
| Font weight | Off by 100 or more |
| Colour | Further apart than a person can easily see (CIE76 distance over 8) |
| Spacing | The gap between neighbouring texts is off by more than 8px or 30% |
| Position | A text starts more than 12px or 2% of the frame further left or right |
| Images | An image in the design has nothing of a similar size nearby on the page |
| Page height | The page is more than 15% taller or shorter than the frame |
| Pixels | Areas of 16px cells where the pictures differ, anti-aliasing ignored |
Schedules and CI
Pick Design check on the Schedules tab, or start one from CI with a workspace API key. With no other fields, every confirmed frame is compared; add a design object to narrow it to one Figma file or some frames.
Start a design check from CI
curl -X POST https://getchecked.twelveai.app/api/v1/ci/runs \
-H "Authorization: Bearer tfy_YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{"projectId": 42, "kind": "frontend_design"}'Usage
Design checks use the same rates as every other run: finding pages and rendering them count as browser minutes, each frame and page comparison counts as one test case, and the AI summary and matching step count their AI tokens. A blocked session refuses new checks until it refreshes, like any run.
Questions people ask
Figma access, matching, screen sizes and what counts as a difference.
What does Check’d need from Figma?
A personal access token with read-only access to file content, and a link to the file, a page or a frame. Check’d reads the frames and renders them as images through the Figma API. It never changes your files, and the token is stored encrypted and never shown again in full.
Do I have to tell it which page each frame is?
No. Check’d looks through your site, compares each frame’s name, words and look with the pages it finds, and proposes a page for every frame. You confirm them in one click, or pick another page or paste a URL. Confirmed matches are kept for every later run.
Which screen size does it check?
The frame’s own width. A 1440 pixel frame is compared with the page rendered at 1440 pixels, a 768 frame at 768 and a 375 frame at 375, so desktop, tablet and mobile designs are each checked where they apply.
What counts as a difference?
Missing or different text, font family, size and weight, text and background colours (with the nearest colour from your design), spacing between elements, horizontal alignment, missing images, extra text and page height, each within a tolerance, plus the areas where the pictures differ. Anti-aliasing and sub-pixel shifts are ignored.
What about carousels, cookie banners and dates?
Common cookie and chat banners are hidden and animations are frozen before the screenshot. Anything else that changes on its own can be marked as an area to ignore on the frame, and it stays ignored for every run.
Can it check pages behind a sign-in?
Yes. Design checks use the project’s environment, so a page that shows a sign-in form is signed into with the saved test account first, and a one-time code is asked from you when the run is started from the app.
How is it charged?
Like every other run: rendering pages counts as browser minutes, each frame and page comparison counts as one test case, and the optional AI summary counts its AI tokens. The Free plan compares fewer frames per run than the paid plans.
Works with the rest of Check’d
- Production monitoringErrors, failed requests and slow pages from real users, in one inbox with your test findings.
- Session replaySee what happened before an error, with every input masked.
- AI explain and fixA plain-English cause and fix for any issue, then a pull request you review.
- Import from any docs linkSwagger UI, Redoc, Postman, ReadMe, Mintlify and more, or a file.
- JourneysRecord a journey once in the browser and replay it on every release.
Check your site against the design
Start free, paste a Figma link, and see the first comparison in a few minutes.