Component Swap Pass

A component swap pass is the disciplined hand work that turns an AI generated layout scaffold into a production file. Figma Weave drops a frame built from generic rectangles, basic text layers, and placeholder cards that follow the prompt but know nothing about your system. The swap pass is when you sit down and replace every one of those elements with actual components from your library. You map the AI sidebar to your real SidebarNav component complete with its variants for active states and icons. You turn the generic KPI areas into your MetricCard instances that already carry the correct elevation tokens and responsive behavior. This step applies your semantic tokens for color typography and spacing so the output stops looking like generic AI slop and starts looking like your product. The pass forces you to make concrete decisions about hierarchy interaction states and edge cases the prompt never considered. It is the moment craft and systems knowledge reassert control after the machine has handled the blank canvas problem.

A component swap pass is not editing the generated layers in place. That lazy path creates files bloated with thousands of individual overrides that engineers will reject during handoff. It is not a quick find and replace or a simple restyle. The core activity is structural replacement of entire component trees not just their appearance. It is not automated. No tool in 2026 including Weave v0 or Lovable can read your private library of 200 components with their specific variants and property controls. The pass is also not optional busywork for junior designers. Every senior who ships at scale budgets time for it because skipping it produces inconsistent files that erode the entire design system. It is not the same as a design review or a token sweep although both happen inside it. The swap pass is structural first.

A concrete example is the 2026 redesign of the Pitch.com landing page flow. The team fed Weave a prompt for a new pricing comparison layout with three tiers dense feature grids and enterprise CTA. Weave returned a decent scaffold but every button was a plain rectangle every table was loose rows of text and the hero used placeholder logos with zero brand alignment. The swap pass started by placing the Weave frame on its own page at 25 percent opacity as a visual reference. Designers then built the real version alongside it. They replaced the three pricing blocks with their TierCard component that already contained the annual monthly toggle variant and the correct success styling for the popular tier. The feature grid became instances of their FeatureList component with check icons pulled from the shared icon set. Every CTA button was swapped for the real Button component wired to the primary large variant with the exact border radius from their tokens. During the same pass they ran a token sweep swapping every hardcoded gray for semantic values like background-elevated text-primary and border-subtle. The final screen looked almost identical in structure but was now fully consistent with the rest of Pitch product files. Implementation took engineers two days instead of the usual week of clarification questions.

Another concrete example comes from the shadcn inspired library at a logistics SaaS called ShipBob in late 2026. After Weave generated an analytics dashboard with KPI rows charts and a recent activity table the team executed a 75 minute swap pass. The AI version used 28 loose layers for what became a single DataTable instance with built in sorting filtering and pagination. The activity feed became their ActivityFeed component that already handled avatars timestamps and status badges. They discovered during the pass that their library was missing a compact KPI variant for dense dashboards so they added it on the spot and updated the component documentation. The resulting file contained zero raw shapes only component instances. When handed off the frontend team mapped the Figma component names directly to their React equivalents with zero guesswork. A third example is the mobile onboarding flow for a fintech app where the swap pass turned Weave output into a production screen using real FormField Toggle and ProgressStepper components. Each swap revealed small gaps in the library that were fixed before the next sprint.

Run a component swap pass on every AI scaffold that leaves exploration and enters production territory. Use it after every Weave generation after importing v0 output into Figma and after any prompt surface that produces editable layers. The larger and more mature your design system the more value the pass delivers because it keeps every screen aligned and surfaces missing components early. Perform the pass when you need handoff ready files when you are maintaining consistency at scale or when the output will be used as the source of truth for multiple teams. The pass improves both the immediate design and the long term system by forcing regular library maintenance.

Skip the full component swap pass when the scaffold is pure throwaway ideation used only to validate section count or information hierarchy. Do not waste time on it for one off marketing assets that never touch your product library or for internal brainstorms that get deleted after the meeting. If you have no design system yet there is nothing to swap to so the pass does not apply. Avoid it when your final deliverable is code from tools like Lovable because the workflow lives in a different format.

The component swap pass separates designers who use AI from designers who are used by AI.