Spatial Reference

Spatial reference is the practice of parking an AI generated layout scaffold on your canvas to inform structure spacing and hierarchy while you build the actual design with real components from your library right next to it. Figma Weave drops these scaffolds after reading your prompt for section counts content types and layout intent. You do not edit the resulting frame. You treat its layers as a fixed map of spatial decisions that accelerate your decision making without polluting your production layers. The reference tells you the right rhythm for stacking cards or the proper width for a sidebar without forcing you to start from a blank artboard or default to the same tired patterns you always use. Designers who get the most from Weave in 2026 use it exactly this way. They generate multiple variants with slightly different prompts. They observe the spatial logic in each. They pick the strongest elements and rebuild with intention using their design system. This keeps files clean prevents component drift and maintains a single source of truth in their component library instead of creating multiple competing versions of the same UI patterns. The approach mirrors how senior developers treat AI code suggestions from Cursor. Generate then evaluate then rewrite with context the AI could never possess.

A spatial reference is not your editable starting point. The common trap is to take the Weave output and begin tweaking it like any other Figma frame replacing text adjusting colors and adding interactions on top of the generic foundation. That leads to bloated files full of unnamed layers hardcoded values and no connection to your design tokens or component library. Six months later when the system updates those files become nightmares during design handoff. It is not a wireframe either. Wireframes represent your own distilled thinking about the problem space after sketches and user flows. Weave creates generic but opinionated layouts based on patterns it has seen across millions of interfaces. Those patterns often clash with your specific brand systems your accessibility requirements or the unique constraints of your product. It is not the artifact you present in critiques or handoff meetings. Clients and engineers both need to see final components not AI placeholders that look suspiciously like every other Weave output on the internet. It is not a crutch for weak information architecture skills. If you cannot evaluate hierarchy without the machine you will stay dependent on it and your designs will lack the hard won perspective that separates good from great.

The concrete example that best illustrates spatial reference comes from the 2026 Modal landing page project. The design lead fed Weave a structured prompt describing a dense five section SaaS page for a B2B AI inbox tool with hero containing email capture social proof logos row three column features grid pricing table with two tiers and bottom CTA banner using dense information hierarchy and no full bleed hero image. The output frame showed smart distribution of visual weight content density and section breaks that matched their information hierarchy needs perfectly. Rather than iterating inside that frame the team locked it and placed a new artboard directly to its right on the same canvas. They rebuilt the hero using their exact Modal Hero component with proper token values for gradients type scale and color palette pulled from their Figma variables. The features grid became instances of their FeatureCard component complete with hover states micro interactions and accurate contrast ratios that passed WCAG standards. The pricing table used real interactive elements with state variants instead of the generic boxes and text Weave provided. Throughout the four hour session the original scaffold acted as spatial reference for alignment guides white space rhythm and overall balance. Whenever debate arose about gutter spacing between sections or optimal card padding everyone glanced left at the Weave frame for quick consensus. Once the real version reached production fidelity the team moved the reference to an archive page titled AI Spatial References Q1 2026. The production file stayed lean with zero generic layers and full component connectivity for easy updates later. The same pattern played out at Pitch during their analytics overhaul where Weave scaffolds informed dashboard layouts before replacement with production components from their library. It appeared again at Vercel when scaffolding new marketing tool interfaces and at Linear for their issue view refresh. Teams using Lovable for full stack apps generate the Figma spatial reference first to align on layout before moving to code. The parallel to Cursor AI is striking. Developers generate structural code scaffolding then rewrite critical paths with their own logic and context. Designers must adopt the same discipline or watch their Figma files turn into unmaintainable swamps full of generic layers no engineer wants to touch.

Reach for spatial references in the earliest stage of greenfield projects where the blank page problem hits hardest and kills more momentum than any other phase. They cut through analysis paralysis by giving you instant structure to react against and iterate from. Use them to validate content density with your PM or client before anyone spends time on detailed visual design or interactive prototypes. They work well when exploring mobile onboarding flows for fintech apps or complex SaaS dashboards where deciding section count and hierarchy remains fluid. Deploy them during AI design workflow spikes when tools like Weave Make First Draft v0 and Lovable flood your process with raw material that needs filtering through human taste. They lose value fast once you move into known patterns already covered by your mature component library. Do not use spatial references when starting from established templates or when your design system already ships approved layouts for that exact screen type like internal admin panels. Skip them for any deliverable that touches developer handoff because engineers expect files built on your actual system with real component instances. Never lean on them for accessibility critical first passes because current AI tools like Weave still cannot guarantee proper heading order focus management or contrast ratios without significant human intervention. The moment your project demands precision in tokens or interactive states or brand expression switch fully to manual construction using the reference only for occasional spatial checks.

Spatial reference turns the firehose of AI generation into a focused tool that respects the craft of design instead of replacing it.