Figma / Public website reference / Make the next move clear.
Make the next move clear.
Transitions, feedback, keyboard behavior, and responsive transformations.
Navigation that keeps context
Wide navigation opens a grouped panel below the header. Small screens use one menu disclosure. The local reference uses click, Enter, and Space to open; Escape returns focus to the trigger. Clicking outside closes the panel. These are explicit reconstructed contracts; source captures prove the expanded appearance.
State lab
The following is a local implementation exercise, not a claim about Figma’s private network behavior. Change the state to inspect the same collection under difficult conditions.
Motion specification
| Pattern | Source rule | Local reference |
|---|---|---|
| Action feedback | background / box-shadow 180ms ease-out | 180ms, interrupted by current input |
| Action arrow | opacity / translate 180ms ease-out | Arrow appears on hover or focus |
| Navigation underline | transform / opacity 250ms | Visible hover line; keyboard focus uses an outline |
| Reduced motion | Source-specific behavior remains a boundary | All non-essential transition/animation disabled |
| Route transition | Native browser navigation | No animated route lock or artificial delay |
Responsive and input contract
At 1024px the desktop navigation is replaced and the hero stacks. At 768px grids collapse to one column, component details stack, and side-by-side specimens become full width. At 390px, padding remains 16px. Large tables scroll within a labeled region; the page itself must not scroll horizontally.
Local buttons have at least 44px hit height; captured source controls may differ. Native links and buttons keep browser semantics. No hover-only action is essential. Focus uses a 3px blue ring with 3px offset and forced-colors uses Highlight. An original skip link lets keyboard users reach main content.
Recovery copy
| Condition | Visible copy | Action / persistence |
|---|---|---|
| Loading | Loading reference items… | Polite status; keep collection region size |
| Empty | No items yet. Start with a component. | Link to components |
| Filtered empty | No components match. Clear the search. | Query remains editable |
| Error | The items could not be loaded. Your filter is preserved. | Retry; keep input |
| Offline | You’re viewing the local reference. Remote sources may be unavailable. | Keep local content; retry remote navigation manually |
| Unavailable media | Reference image unavailable. Read the source description. | Caption remains; original URL is available |
Extension contracts, version 1
Original local additions · adopted after an independent handoff exposed missing decisions
Loading action
Use a native button with a stable visible label and accessible name. Reserve an 18px progress slot in every state. Click, Enter, or Space starts one operation. While busy, set aria-busy=true and aria-disabled=true; keep the element focused and in the tab order, and guard the handler against duplicate activation. A polite adjacent status announces progress once. Completion clears both attributes and leaves the label unchanged. The deterministic fixture completes after 900ms; production duration comes from the actual operation. Reduced motion uses a static progress mark. Never represent this timing as observed Figma behavior.
Dismissible inline notification
Require a stable root ID, heading referenced by aria-labelledby, a native dismissal button with a specific accessible name, and data-focus-return pointing to a surviving enabled control. Dismissal sets hidden, preserves the content and surrounding query, returns focus to that target, and emits a bubbling notification:dismiss event. The consumer announces dismissal once. Essential notices have no expiry timer. An explicit restore control may reveal the same instance. Use the local informational lavender token; error messages instead require the named error role and recovery copy.
Combined offline and empty collection
Local static resources remain searchable offline. Read navigator.onLine and listen for online/offline events, treating that signal only as browser connectivity. Preserve query and category across transitions. Show offline context and filtered-empty guidance together; neither replaces the other. One atomic polite live region announces the count and connectivity context. Retry checks the current browser signal without making an unapproved remote request and must not claim endpoint recovery. Only explicit Reset clears filters and returns focus to the search input. Long translated text wraps; DOM and keyboard order stay unchanged.
Runnable implementations
Open the four extension examples → · Exact added APIs → · Extension CSS → · Extension JavaScript →
Acceptance: loading width drift ≤0.1px, one activation during busy, no lost focus or query, no page overflow at 390/768/1440px, explicit recovery, no transmitted data. Test scripts and captures remain in evidence/handoff/.
More working patterns
Explore carousel navigation, feature details, media controls, grouped mobile navigation, resource filters, and customer proof.
Open pattern examples