Figma First Draft will hand you a full wireframe in nine seconds, and it will quietly poison your design system in the same nine seconds. The poison is not obvious. It looks like progress: frames are placed, components are named, the layout breathes. But underneath the polish, First Draft has done four specific things that, if you accept them, leak generic spacing, off-brand type, lorem-ipsum copy, and components that exist nowhere in your library straight into a file your whole team will build from. This lesson teaches you to take the speed, refuse the pollution, and walk away with a before/after comparison frame and a four-error checklist you can run on any First Draft output in two minutes flat.

The Nine-Second Wireframe That Cost an Afternoon

Here is a scene from a real Wednesday. A product designer needs a settings page for a customer portal, and the PM wants something to react to by standup. They open Figma, type "a customer-portal account settings page with profile, notifications, and billing sections" into First Draft, and watch a complete, plausible wireframe assemble itself. It looks done. They drop it into the team file, post a screenshot in Slack, and move on.

Three days later a teammate picks up that file to build the real thing and spends an entire afternoon untangling it. The spacing is 20px and 28px in a system that only uses 16 and 24. The headings are Inter at weights the brand never uses. Every label says "Setting name" and every helper text is a sentence of lorem ipsum. And there is a toggle component called "SwitchControl" that does not exist in the library, will not pick up the brand tokens, and now appears in three other files because someone copied the frame. The nine-second wireframe cost an afternoon of cleanup and seeded a small infection across the file tree. That is the trade this lesson is about: First Draft is genuinely fast, and the speed is only worth having if you refuse the four things it does by default.

This is the central discipline of L2 in one sentence. The model does the speed. You do the verification. First Draft is allowed to give you a starting arrangement. It is not allowed to decide what spacing, type, copy, or components ship in your system, because it does not know your system exists.

What First Draft Actually Does, and Why It Pollutes

First Draft is a generative layout tool baked into Figma. You give it a prompt, it produces a wireframe-to-low-fidelity screen using its own internal kit of generic components. That last part is the whole problem. First Draft does not read your library. It does not know your spacing scale, your type ramp, your color tokens, or your component set. It generates against an averaged, generic UI kit that lives inside the tool, because an averaging machine produces the arrangement most statistically consistent with every settings page it has ever seen, not the one consistent with your design system specifically.

So the output is, by construction, off-system. Not because First Draft is bad, but because it is solving a different problem than the one you have. It is answering "what does a settings page usually look like?" You need the answer to "what does a settings page look like in our system?" Those are different questions, and the gap between them is exactly the four errors below. Every one of them is a place where First Draft substituted the generic average for your specific system, and every one of them is invisible until someone tries to build from the file.

Why the Pollution Is Contagious, Not Contained

If the damage stayed inside one frame, you could shrug it off. It does not. A Figma file is a shared substrate. The moment a generic "SwitchControl" lands in a team file, three things happen. Someone copies the frame into another file, carrying the ghost component with it. An engineer reading the file via Figma Code Connect or the Figma MCP server tries to map "SwitchControl" to a real coded component and finds nothing, so they invent one or ask you in Slack. And the next designer, seeing 20px gaps in a "finished-looking" file, assumes 20px is allowed and uses it again. Off-system spacing breeds off-system spacing. The pollution compounds precisely because the file looks authoritative. A messy sketch nobody trusts is harmless. A polished First Draft output everybody trusts is how drift enters a system.

The Four Structural Errors First Draft Introduces by Default

Across hundreds of First Draft outputs the failures are not random. They cluster into exactly four categories, and they are the same four every time because they are structural to how the tool works. Learn them by name and you can audit any output in two minutes.

Error One: Off-Token Spacing

First Draft lays out with whatever spacing looks balanced to its generic kit, which is almost never your spacing scale. If your system runs on a 4-point base (4, 8, 12, 16, 24, 32, 48), First Draft will happily ship 20px gutters, 28px section gaps, and 14px padding inside cards. Visually it looks fine, because balanced spacing always looks fine. Structurally it is poison, because the instant an engineer builds from a 20px gap, your "consistent" system has a 20px exception in production, and exceptions are how a token system dies one frame at a time.

The detection move is to select any frame and read the auto-layout spacing values against your scale. Anything not on the scale is an error, full stop. The fix is mechanical once you see it: re-apply your spacing tokens via Figma Variables so every gap, gutter, and pad snaps to an approved value. Do this before you touch anything else, because spacing is the layer everything else sits on.

Error Two: Generic Typography

First Draft picks type the way it picks everything: by averaging. You will get Inter or a system default at weights and sizes that look professional and match nothing in your ramp. If your brand uses a specific display face at a defined scale (32/24/18/16/14 with set line-heights and weights), First Draft will give you 30px and 22px headings in the wrong weight, with line-heights it invented. It reads as clean. It is not your type system.

Catch this by checking every text layer against your type styles. The tell is text that is not bound to a named text style at all, just raw font settings. The fix is to swap every text layer to a real text style from your library. If a heading does not have a style that fits, that is a finding worth raising, not a reason to leave a raw override in the file. Raw type overrides are the typographic equivalent of off-token spacing: invisible, plausible, and corrosive.

Error Three: Placeholder Copy

Every First Draft output ships with placeholder copy, and in 2026 that still frequently means literal lorem ipsum or its cheerier cousin, "Setting name" and "Description goes here." This is the most visible error and, paradoxically, the one teams are most likely to leave in, because "we'll fill in the copy later" is the oldest lie in design. The problem is that placeholder copy hides real layout failures. "Setting name" is two words; the actual label might be "Two-factor authentication via authenticator app," which wraps to three lines and breaks the row you designed. You cannot see the failure until the real string is in.

The fix is not to write final production copy at this stage. It is to replace placeholders with realistic content, including the longest realistic string for each field, so the layout is tested against reality rather than against "Setting name." Pull real copy from your content design library if you have one, or write honest first-draft strings. The point is to stop the layout from being a lie that only holds for two-word labels.

Error Four: Ghost Components

This is the most dangerous of the four, the one that escapes the file and causes Slack threads. First Draft builds with its own internal components, named things like "SwitchControl," "CardItem," or "PrimaryButton," that look like your components but are not instances of anything in your library. They are detached, generic, and unbound. They will not update when your tokens change. They will not be found by Code Connect. They are ghosts: present, plausible, and connected to nothing.

Detect them by selecting any element that should be a component and checking whether it is an instance of a real main component from your library. If it is a detached frame or a First Draft internal component, it is a ghost. The fix is the most important move in the whole lesson: swap every ghost for the real design-system component. Delete First Draft's "SwitchControl," drop in your actual Toggle, and let it inherit your tokens. This is the step that turns a polluting wireframe into a system-aligned one, and it is the step everyone skips.

First Draft does not pollute your system because it is wrong. It pollutes because it is generic, and generic is the one thing a design system exists to defeat. Your job is to swap the average for the specific, four errors at a time.

The Swap Pass: Turning Generic Into System in Order

The correction is not a vague "clean it up." It is a fixed sequence, run in this order on purpose, because each layer depends on the one before it. Run it as a checklist and a polluting First Draft output becomes a system-aligned wireframe in about the same time you would have spent untangling it later, except now it happens before the contamination spreads.

Step one, spacing first. Select the top frame and walk the auto-layout values. Snap every gap, gutter, and padding to your spacing tokens via Figma Variables. Do this first because everything sits on the spacing grid, and fixing components before spacing means re-fixing them after.

Step two, components next. Replace every ghost component with the real library instance. As each real component drops in, it brings its own correct internal spacing and tokens, which is why components come after the frame-level spacing pass and before type: many text layers will resolve automatically once the real component carries them.

Step three, typography. Bind every remaining text layer to a named text style. Anything First Draft left as a raw override gets a real style or gets flagged as a missing-style finding.

Step four, copy. Replace placeholder strings with realistic content, including the longest realistic label for every field, and confirm the layout holds. If a real string breaks a row, that is a layout finding to fix now, not later.

When the four steps are done, the frame looks almost identical to where it started, which is the point and the trap. The visual delta is small. The structural delta is total. Before the pass, nothing was bound to anything. After it, every gap, every type layer, every component, and every string is system-aligned and build-ready. The pass is invisible and load-bearing, exactly like good design ops always is.

The Before/After Comparison Frame

The first artifact this lesson produces is a before/after comparison frame, and it earns its keep twice: once as a teaching tool for your team and once as proof, to a skeptical lead, that "we used First Draft" did not mean "we shipped slop." Build it as a single Figma frame with two columns. Left column: the raw First Draft output, untouched, with four numbered callouts pinned to a concrete instance of each error (the 20px gap, the raw Inter heading, the "Setting name" label, the "SwitchControl" ghost). Right column: the swapped version, with the same four callouts now showing the corrected value (16px token, Heading/M style, real label, system Toggle instance).

The comparison frame does something a verbal "I cleaned it up" never can: it makes the pollution visible and the correction auditable. A teammate can see, side by side, that the two screens look nearly identical and are structurally worlds apart, which is the single most important lesson about First Draft anyone on your team can internalize. It also becomes a portfolio artifact in AI-honest form: not "I generated a wireframe with AI," but "I generated a wireframe with AI and here is exactly what I had to correct and why." That second sentence is what gets a senior designer hired in 2026.

The Four-Error Checklist You Can Pin in Figma

The second artifact is the checklist itself, built to be run by anyone on the team in two minutes, because the understanding First Draft lacks should not live only in your head. Pin it as a sticky in your team's working file next to where First Draft output lands.

1. Spacing on-token? Select frames and read auto-layout values. Is every gap, gutter, and pad on your spacing scale, bound via Variables? Any raw value is an error.
2. Type bound to styles? Is every text layer an instance of a named text style, not a raw font override? Any unstyled text is an error.
3. Real content tested? Is placeholder copy replaced with realistic strings, including the longest realistic label per field, and does the layout still hold?
4. Components real? Is every component a true instance of a main component from your library, with zero ghosts and zero detached frames? Any First Draft internal component is an error.

Notice the parallel to the rest of L2. None of these four questions asks whether the screen looks good, because looks were never in doubt. First Draft is excellent at looks. The checklist interrogates the four things it is structurally worst at, which are the four things that determine whether the output strengthens your system or quietly corrodes it.

When First Draft Earns Its Place, and When It Does Not

It would be easy to read this lesson as "never touch First Draft." That is the wrong takeaway. First Draft is a legitimately useful tool for one specific job: getting a rough structural starting point on the canvas fast, so you have something to react to instead of a blank frame. Used that way, with the swap pass run immediately and the checklist enforced, it genuinely saves time on the boring scaffolding of a screen.

Where it stops earning its place is the moment anyone treats its output as done. The failure is never the generation; it is the acceptance. A First Draft wireframe that goes straight into a team file unswapped is not a time-saver, it is a debt you have handed to whoever opens the file next, plus interest in the form of contamination across every file that touches it. The rule is simple and worth saying out loud in your team: First Draft output is a draft of the structure only, and it does not leave your hands until the four-error checklist passes. Treat the generation as cheap and the swap pass as mandatory, and First Draft becomes an accelerator instead of a liability.

Putting It to Work This Week

The next time you reach for First Draft, do three things differently. First, generate into a scratch frame, not the team file, so nothing can escape before it is clean. Second, run the swap pass in order (spacing, components, type, copy) before you show the output to anyone, and time yourself; you will find it takes minutes, not the afternoon the unswapped version costs downstream. Third, build the before/after comparison once and show it in your next design sync, because the fastest way to stop a team from shipping First Draft slop is to let everyone see, side by side, the difference between generic and system.

You will know the practice has landed when a teammate opens a First Draft output and instinctively reaches for the spacing values before admiring the layout. That instinct, checking the four errors before trusting the polish, is the whole skill. The wireframe in nine seconds is the easy part and the part the tool gives you for free. The swap pass is the part that keeps your design system alive, and a living design system is worth far more than nine saved seconds.

Key Takeaways

• Figma First Draft generates against its own generic internal UI kit, not your design system, so its output is off-system by construction: a fast starting arrangement that pollutes your file unless you correct it.
• The pollution is contagious, not contained: a polished First Draft output looks authoritative, so off-token spacing breeds more off-token spacing, ghost components spread by copy-paste, and engineers reading via Code Connect hit components that do not exist.
• The four structural errors are always the same: off-token spacing, generic typography, placeholder copy, and ghost components. Each is a place First Draft substituted the generic average for your specific system.
• Run the swap pass in order: spacing first (it underlies everything), then real components (they carry their own tokens), then type styles, then realistic copy including the longest realistic string per field.
• Ship two artifacts: a before/after comparison frame with four numbered callouts that makes the pollution visible and the correction auditable, and a four-error checklist any teammate can run in two minutes.
• First Draft earns its place as a structural starting point only when the swap pass is mandatory before the output leaves your hands. The failure is never the generation; it is accepting it unswapped.