BatSwap

About this plugin

BatSwap is a Figma design system plugin that does the heavy lifting your library deserves.It scans your file for every raw hex value, unstyled text node, and hard-coded spacing number — then binds them all to your design tokens in seconds. It also handles batch component replacement across your entire file while preserving text overrides, because nobody should be copy-pasting button labels in 2025.If you've ever said any of these out loud, BatSwap is for you:"I need to replace this component across 40 frames.""Half this file still uses raw hex instead of our color variables.""Someone hand-typed paddingLeft: 15 and our scale only has 12 and 16.""Claude just gave me a full UI layout — now how do I make it actually use our design system?"Here's a workflow that's becoming standard for design teams — and until now, had no clean solution:You prompt Claude (or any AI) to generate a UI layout, component, or full screen.You bring that raw output into Figma — via a plugin, HTML import, or copy-paste.You're left with a frame full of raw hex values, hard-coded spacing, generic text, and zero component bindings.Every other plugin stops there. BatSwap is what comes next.BatSwap takes your raw Claude-generated frame and makes it native to your design system:Binds every #6366F1 to your color/primary/500 variableSnaps every 16px padding to your space/16 tokenReplaces generic placeholder components with your actual library componentsMaps text overrides from the AI-generated content into the new components — so the copy Claude wrote doesn't disappear when you swapNo other Figma plugin handles the full loop: swap the components and keep the AI-generated overrides. BatSwap does both in the same action.Real workflow:Claude generates a settings screen. You bring it into Figma. It looks right but it's technically a mess — raw colors, no tokens, placeholder components.Open BatSwap. Apply Exact on Color. Apply Exact on Space.Lock your Input/Default component, select all the placeholder inputs, Replace. Every label Claude wrote transfers intact. Your file is now on-system. Total time: under 3 minutes.This is the missing link between AI-generated UI and production-ready Figma files.The Zero-MCP Workflow — No API Setup. No Tokens. Just Name Your Layers.You don't need a Figma MCP server. You don't need API keys. You don't need Claude to talk to Figma directly at all.You just need Claude to name things right.Here's the entire workflow:Step 1 — Tell Claude Your Component Names"Generate a settings screen. Use these exact names for any components you create as layers: Button/Primary, Input/Default, Card/Base, Nav/Item"Claude will output a structured layout — HTML, a frame description, whatever format you're using — with layer names that match your design system exactly.Step 2 — Send It to FigmaUse any plugin that imports HTML or structured content into Figma. Figma's own paste, Builder.io, Anima, Locofy — whatever gets the frame into the canvas. At this point it's raw. That's fine.Step 3 — BatSwap Does the RestOpen BatSwap. Now those layer names Claude used are sitting there waiting:Color tab: Bind every raw fill to your variable. Exact matches in one click.Space tab: Snap every padding and gap to your tokens. One click.Swap tab: Lock Button/Primary as your source. Select every layer Claude named Button/Primary. Replace. All the button labels Claude wrote transfer across automatically.Repeat for every component type. Your entire frame goes from raw output to fully on-system — variables bound, components swapped, overrides intact.Why This WorksClaude doesn't need to understand Figma's API. It just needs to be consistent with naming. BatSwap handles everything that requires actual Figma access — the variable binding, the component lookup, the override mapping. Claude handles what it's actually good at: generating structured content with sensible naming.Two tools. One clean handoff. No infrastructure. No spandex.The short version: Claude names your layers. You paste into Figma. BatSwap binds and swaps. You ship.Five Tabs. One Plugin. No Manual Labor.TabWhat It DoesSwapBatch replace components across frames — text overrides preservedColorBind raw fills & strokes to color variablesTextMatch unstyled text nodes to library text stylesSpaceBind padding, gap, and corner radius to spacing tokensConfigControl which collections and variable groups are activeSwap Tab — Batch Replace Components at ScaleLock. Select. Replace. Done.Select your new component. Click Lock Source.Select all frames with the old component. Click Lock Target.Hit Replace (or Enter).BatSwap replaces every instance and automatically maps text overrides — your labels, copy, and content transfer cleanly to the new component's text slots. This is exactly what makes it work for Claude-generated layouts: the AI-written content survives the component swap.This means:Migrate from one component library to another without rebuilding framesPush a redesigned component to 80 instances in one actionReplace AI-generated placeholder components with your real library components — copy intactSwap button variants, card layouts, nav items — anything — across your entire fileOptions:Fit to selection size — new component matches the target's dimensionsBatSwap remembers your last source component between sessionsColor Tab — Apply Color Variables Across Your Entire FileOpen the Color tab and BatSwap immediately scans every unbound fill and stroke in your selection (or the whole page). It matches each one to the nearest color variable in your library and shows you a categorized report:Exact matches — pixel-perfect. Bulk-apply with one click.Approximate matches — close but not identical, shown with a delta %. Review these manually.Scope-aware: Variables scoped to STROKE_COLOR won't appear as fill suggestions. Variables scoped to TEXT_FILL won't pollute your frame backgrounds. BatSwap respects Figma's variable scopes so suggestions always make sense.Example: Claude generated a UI with 87 raw color values. 62 are exact matches to your token library. Click "Apply Exact." Done in under a second. Review the remaining 25 in minutes — not an afternoon.Text Tab — Bind Unstyled Text to Your Type SystemBatSwap scans every text node without an applied style and matches it to your library text styles based on font size, weight, and family. Same interactive report — exact matches, approximate matches, bulk-apply or individual review.Example: 45 unstyled text nodes. 30 are exactly 16px Semibold → maps to Heading/H6. Apply Exact. Typography police: satisfied.Space Tab — Bind Padding, Gap & Radius to Spacing TokensEvery frame with raw numeric padding, gap, or corner radius values gets scanned and matched to your spacing variable library. Snap 60 frames to space/16 and space/24 in one click — then manually decide what to do with that rogue 15px padding.Config Tab — Reduce the Noise, See Only What MattersYour team library has 500 variables across 6 collections. You only need 2 of them. Open Config and toggle collections or individual variable groups on and off. Think of it as the Bat-Signal for your token library — only the right ones answer the call. Choices persist across sessions and are shared with anyone who opens the same file.Performance Worth MentioningBatSwap is built fast on purpose:Quantized color grid — 4096-cell spatial index for O(1) nearest-neighbor color matching. No brute-force.Binary search on spacing — sorted variables, O(log n) lookup.Zero-copy swaps — all changes pre-computed before a single DOM write, then applied in one burst.Parallel indexing — components, styles, and variables indexed simultaneously.8-second timeout — team library calls are capped so a slow network never freezes the plugin.Quick StartRun BatSwap in Figma.First time? Hit Config — make sure your variable collections are enabled.Select nodes to scan, or select nothing to scan the whole page.Open Color, Text, or Space — scanning starts immediately.Click Apply Exact for instant wins. Review approximates at your own pace.No account. No onboarding flow. No cave required.