Back to Instructables

Design Handoff Checklist

Project: [Project Name] Version: Final

1. Assets & Files

Clean up design files

Remove unused layers, hidden groups, and exploration artboards. Name layers clearly.

Export assets

Provide icons (SVG) and images (PNG/JPG/WebP) in required resolutions (@1x, @2x, @3x).

2. Specs & Styles

Define typography & colors

Ensure all text styles and color variables map to the design system tokens.

Layout & Spacing

Document grid settings, padding, and margins using the spacing scale.

3. Interaction & States

Component states

Include designs for hover, active, focus, disabled, empty, and error states.

Flow & Logic

Provide a user flow diagram or prototype links to explain navigation and transitions.

4. Accessibility

Define Tab Order

Specify the keyboard navigation order for interactive elements to ensure a logical flow.

Provide Alt Text & ARIA Labels

Write descriptive alt text for all images and provide ARIA labels for non-descriptive icons or controls.