Designs look perfect in Figma and different in production — spacing drifts, hover states vanish, mobile breakpoints break. This handoff guide covers naming, specs, components, and review rituals that keep CrixSol design and dev teams aligned.
The gap between design and development is rarely malice — it is missing information. Developers guess spacing; designers assume hover states are obvious. A structured Figma handoff saves rework and keeps the shipped site faithful to the approved mockup.
Organise the file for builders, not presentations
Separate pages: Cover (links, changelog), Components, Desktop screens, Mobile screens, Prototype flows. Delete exploration frames or move them to an Archive page so devs do not implement the wrong variant.
- Use consistent frame widths (1440 desktop, 390 mobile)
- Name layers semantically: `btn/primary/default`, not `Rectangle 47`
- Lock background decoration layers devs should ignore
Components, variants, and design tokens
Buttons, inputs, and cards should be components with documented variants (default, hover, disabled, error). Publish colour and type styles as Figma variables matching CSS custom properties — primary-600, text-body, spacing-4. When tokens align, Tailwind or SCSS setup matches Figma without translation errors.
Document what static frames cannot show
Add a Handoff notes frame per template listing: animation duration, focus order, empty states, error messages, skeleton loaders, and max text length for CMS fields. If the hero headline can be three lines in production, show that in a stress-test frame.
Responsive rules beyond “design mobile too”
Specify breakpoint behaviour: stack vs horizontal scroll for tables, which nav becomes hamburger, image crop focal points. Redlines for spacing are helpful; annotations explaining why matter more when devs make micro-decisions.
Review ritual before sign-off
Short joint walkthrough: designer shares screen, developer asks “what happens when…” questions live. Record decisions in Slack or the ticket. QA compares staging to Figma side-by-side — pixel perfection is less important than interaction parity and content hierarchy.
Key takeaway
Good handoff is a process, not a Figma export button. Invest one hour at file setup; save ten hours of revision loops.
