Nothing falls through the cracks.
A static design only shows one moment. A website lives in motion — it hovers, opens, errors, loads, and reflows. This is the reference for everything a screen does that a flat mockup quietly leaves out. Click through each demo to see the behavior, then make sure it lives in your Figma file before handoff.
How to use this: Every card shows a live example of the interaction. Hover, click, and type to see what the developer needs documented. If a behavior isn’t in your Figma file, the developer is guessing — and guesses cost time and money on the build.
Interactive States
Every clickable thing has more than one look. The developer can’t invent these — show each one.
Default, hover, pressed, focus, disabled — all five.
If cards react to the cursor, document the motion.
Form Elements
Inputs have a life cycle: empty, focused, filled, wrong, right. Each needs a frame.
Click in and out to see focus, error, and success.
On and off both need styling. Click it.
Selected and unselected states.
Closed and open. Show the open menu too.
Overlays & Layered Content
The pieces that float above the page. Easy to forget because they’re invisible until triggered.
A pop-up needs the dimmed background behind it.
Hover-triggered helper text. Document the trigger.
Alerts, cookie bars, announcements.
Navigation
How people move through the site — and how the chrome changes as they do.
Open and closed icon states. Click to animate.
If the header changes on scroll, show both. Scroll inside ↓
The header holds its place.
Content slides underneath.
Note any style change
on scroll for the dev.
More content.
And more.
Collapsed and expanded. Common in FAQs and menus.
Responsive & Content Variability
A layout that works with three words may break with thirty. Design for the messy real content, not just the ideal.
Mobile, tablet, desktop versions of each page.
What happens when copy runs long? Show the rule.
Test the layout with both extremes.
Feedback & System States
What the screen shows while it’s working, when it’s empty, and after an action. These are the most-forgotten frames of all.
What fills the space before content arrives?
Placeholder shapes while data loads.
“No results yet” — design it on purpose.
No results found.
Try a different search.
Confirmation after an action completes.
When something fails, say what and how to fix it.