Handoff Spec Sheet

01 — Structure & naming

The file's layers should already read like the component tree it's about to become.

Layers and frames are named to match the code component they'll become Repeated elements are real components + instances, not duplicated one-offs Auto Layout is applied everywhere responsive behavior is expected Resizing is set per element: hug, fill, or fixed — matching intended CSS behavior Constraints are set on anything living outside Auto Layout

02 — Tokens & styles

If the file doesn't respect a scale, there's no scale for code to enforce later.

Colors are variables/styles, not raw hex on a layer (light + dark variants included) Every type role has a saved text style — no manual overrides sitting on top Spacing follows a defined scale (4pt/8pt grid), nothing eyeballed Shadows, blurs, and corner radii are saved as reusable effect styles

03 — Responsive rules

Behavior between breakpoints has to be written down — a dev won't guess it correctly.

A frame exists for every breakpoint actually being supported What happens between breakpoints is documented, not left implicit Min/max width constraints are noted wherever they matter Text overflow behavior is specified: wrap, truncate + ellipsis, or clip

04 — States

Every state is a variant, not a verbal description devs reconstruct later.

Default, hover, active/pressed, and focus-visible are built as variants Disabled, error, loading, and empty states are built as variants Any motion is spec'd: duration, easing, and what triggers it

05 — Assets & export

Anything not exportable gets approximated at build time.

Icons are components on a consistent grid/stroke width, marked for SVG export Images are at real resolution with export settings (@1x/2x, format) already set No missing or placeholder assets remain in the file

06 — Content & edge cases

Truncation and wrap bugs only ever surface with real, ugly content.

Real content is used throughout — not lorem ipsum The longest realistic string has been tested for wrap/truncation Empty and error states are designed, not left blank

07 — Annotations

Redlines cover anything a dev can't infer from Auto Layout alone.

Redlines added wherever spacing or sizing isn't self-evident Contrast has been checked and is noted where it's close Tab order is noted for anything non-standard Variants are mapped to the component's actual prop names in code

08 — File hygiene

One current version, clearly marked — so nobody builds off an old direction.

One version is marked "ready for dev"; explorations live on a separate archive page No detached instances have drifted from their main component Pages are organized: cover → tokens → components → flows → archive

09 — Dev Mode

Handoff should be a lookup, not a re-decision.

Figma variables are named to mirror the code's design tokens Only the final frames are marked "Ready for dev"

Clear everything?