Figma Component Inference

What This Does

Figma Component Inference is a semantic-inference engine powered by the M.ai agent. Where the Component Audit reads a live page’s real DOM, this tool reads a Figma design’s real layer and component tree and infers what it was meant to be — then tells you whether the structure is honest about that intent. The point is exactly the structure a screenshot can’t reveal: a detached instance, a group that should be a frame, a row with no auto-layout.

You sign in with Figma and paste the link to a frame. The tool:

1. Infers the pattern — is this a Button, Dropdown, Navigation, Card, Modal, Tabs, Table, Form control, Tooltip, Dialog, Menu, or genuinely Unknown — with a confidence score
2. Evaluates structure — groups that should be frames, missing auto layout, excess nesting, raw shape stacks, unnamed nodes, over-deep trees
3. Detects component opportunities — structures that look like a component but are raw nodes, repeated siblings that should be one reused component, design-system drift, likely missing variants and states
4. Flags accessibility risks — fake interactive elements, semantic mismatches, likely keyboard/focus problems implied by the structure
5. Returns a numbered annotated render — each finding is pinned on a render of the frame, on the real node it refers to, with a number that matches its row in the findings list
6. Recommends a scalable mapping — the generic component/pattern this should resolve to

Core Concept

This is a pure inference engine: observe the design → infer intent → evaluate structure → recommend a more scalable pattern. It does not critique visual style, and it does not redesign. It reasons about semantics and structure, not taste.

This is the design-time sibling of the Component Audit. Audit answers “what is built on this live page?” — Inference answers “what was this design meant to be, and is the structure faithful to that?”

How it reads your design

Input	Required?	What it’s for
Figma sign-in	Yes	Grants one-time read access so the engine can read the tree of the frame you link
Figma frame link	Yes	The specific frame to scan (the link must include a node-id)
Design-system context	Optional	When named, mapping recommendations point at that system; otherwise the engine recommends generic patterns only
Component-library notes	Optional	Extra context about what library/components your team uses

Your file stays yours — nothing is stored

Signing in lets the scanner read only the file you link. Your authorization is used once, server-side, to read that one frame (its tree and a single render) and is then discarded. Nothing is stored or cached — not the token, not your file contents, not the result.

Output: numbered render + numbered findings

The report comes in two synchronized halves so you can move between the picture and the explanation:

• An annotated render of your frame, with a numbered pin on the real node each finding refers to
• A numbered findings list — each row leads with the same number as its pin, then Current Structure → Issue → Recommendation → Why

Each finding is tagged by category (structure / pattern / component / accessibility) and severity (low / medium / high), and the summary gives you the detected pattern, a confidence percentage, and an overall risk read.

What it deliberately does NOT do

• It does not critique aesthetics — no color, spacing-taste, or “make it prettier” notes
• It does not redesign your work
• It prefers evidence over assumption, and it explains uncertainty rather than presenting a guess as fact
• Without design-system context, it recommends generic patterns only — it won’t invent a specific component it has no basis for

Limitations (v0)

• Inference, not ground truth. Structure findings are grounded in the real tree, but intent and recommendations are still inference — treat the confidence score as a real signal and verify before acting on high-stakes calls.
• One frame at a time. It scans the node you link, not the whole file.
• Generic mapping for now. Concrete design-system component mapping (Fluent, Material, Carbon) is a planned enhancement; today the mapping is generic-pattern only unless you name your system.
• Read access required. You need to be able to open the file with the Figma account you sign in with.
• No saved history or accounts.

Why it’s experimental

It grounds structure in the real tree but still infers intent, so its higher-level claims carry uncertainty by design. That’s the point — it surfaces confidence and reasoning instead of a false-precise verdict. As design-system mapping and tree analytics mature, it’ll graduate from experimental.

Companion artifacts

• Component Audit — the live-page sibling. Run it when you have a URL and want the real DOM inventory; run Inference when you only have the design and want to interrogate its intent.
• Design System Audit Playbook — the framing for triaging findings systematically (Inventory → Drift → Duplication → Risk → Action).
• Accessibility Compliance Baseline Playbook — the non-negotiable contrast and interaction checks every accessibility finding should be measured against.