Token Remapping
Token remapping is the immediate disciplined replacement of every fill, text style, corner radius, shadow and spacing token that Google Stitch drops into your Figma file. Stitch ran on Gemini and shipped with Material 3 defaults so every 2025 and 2026 output arrives wired to generic primitives like md-sys-color-primary or surface-container-lowest. Your job is to select those layers in batches and map them to your semantic tokens before you touch layout, hierarchy or states. This step lives inside the Figma round-trip the Stitch article details right after plugin import. You open the variables panel, switch to your local library and reassign every mismatched value. Colors first because they affect the most layers. Then typography scales. Then borders and effects. Complete this before any creative edits because every override you add on top of foreign tokens doubles the work when you finally clean up. The entire process takes seven to twelve minutes on a mid complexity screen if you use smart selection tricks like select all with this fill or search by text style name.
What it is not is an automatic Figma feature or a quick visual tweak. Token remapping is not eyeballing colors until the file looks close enough. It is not the same as swapping in components from your library. Components come after tokens. It is not optional on any file headed for developer handoff and it is not something that gets easier if you delay it until the end of the project. Push this step past the first ten minutes and you will hunt scattered overrides one by one while your dev team implements the wrong hex codes in production.
A concrete example is the team settings screen from the Stitch prompt template. The prompt asks for two-column layout, sidebar nav, user list with avatars, invite form, role selector and permissions table using Material 3 in light mode. Stitch exports a Figma file where the sidebar background sits on its internal surface-container token at hex F5F5F5 while your system uses neutral-surface-subtle at hex FAFAFA with built-in dark mode counterpart. Primary buttons arrive using Gemini trained blue 6750A4 instead of your brand-primary-700 at 5C21A6. Headings land as display-small at 28px when your semantic title-large token demands 22px Inter 600 with -0.2 tracking. One Linear team in Q1 2026 imported eight of these screens for a workspace overhaul. They created a temporary Stitch Import mode in Figma variables, bulk remapped all eight surface colors in one pass, then swapped typography tokens in a second pass. Spacing tokens needed the most attention because Stitch defaulted to 32px container padding while Linear required 24px for their dense UI. The remap revealed three nested auto layout frames that needed grip adjustments. Total time across all screens was under ninety minutes and the files dropped straight into their existing component library without drift. Another concrete example hit a PostHog style analytics dashboard generated in March 2026. Stitch produced a card grid with shadow values that read flat against the real product elevation scale. Remapping shadow-100 through shadow-400 tokens instantly lifted every card and aligned the filter sidebar to the correct neutral borders the PostHog team actually shipped with. A third example occurred at a fintech company using Stripe design language. They generated mobile checkout flows where Stitch applied 12px radii on every button and sheet. Their system used 8px for compact buttons and 20px for bottom sheets. Remapping exposed three contrast failures against their WCAG AA tokens so they fixed the palette mappings before any state design began. Each of these cases shows the same pattern. Structure from Stitch was solid. Tokens were garbage until remapped.
Use token remapping on every import from Stitch, Figma Make generations or any prompt-to-UI tool that cannot read your library natively. Use it in the first ten minutes after the plugin drops the file. This discipline pays off hardest on the three workflows Stitch dominates: early exploration of five layout options in twenty minutes, structural drafts for unfamiliar patterns like nested permission tables, and Figma handoff preparation where named layers and auto layout already exist. Teams that remap immediately report 30 to 40 minutes saved on mid complexity screens because they stay inside their own system instead of fighting foreign values. Do not use token remapping during pure throwaway ideation where the file gets deleted after you steal one grid idea. Skip it when comparing five tools head to head on the same day and none of the outputs will reach production. Never remap if the structural logic is so broken that you are better off drawing the screen from scratch in a blank frame. The Labs status of Stitch in 2026 adds one more rule. Do not wire remapping into client delivery workflows until the tool reaches stable GA.
Remap tokens first or watch cleanup eat the entire afternoon you just saved.
Read the full guide
Related terms
Keep exploring
Design Tokens
The atomic design values (colors, spacing, typography, shadows, motion) stored as platform-agnostic variables that every component in a design system references.
Semantic Tokens
Design tokens that assign meaning to raw values. Instead of referencing color-blue-500 directly, components reference color-primary, which resolves to the appropriate raw value.
Component Library
A collection of reusable UI elements (buttons, inputs, cards, modals) built from design tokens and documented with usage guidelines. One layer of a design system, not the whole thing.
Token Discipline
Token discipline is the rule that every visible value in a design file, color, spacing, type, radius, shadow, motion, must resolve to a semantic token from a single source of truth.
Figma Round-Trip
The full workflow of generating a UI layout with AI then importing it into Figma for token remapping, structural refinement and eventual developer handoff.