A tabs component can match Figma with three short labels and fail as soon as production data arrives. The active indicator jumps when a count loads, the fifth tab disappears on mobile, focus is invisible, a deep link opens the wrong panel, or every hidden panel remains in the keyboard order.
Pixelay can compare Figma designs with live, staging, local, or authenticated web pages using overlay, split, and difference views. To make that comparison useful, treat the tab list, active panel, URL state, and responsive behaviour as one component contract.
Identify the tab model
First confirm what the interface is. Tabs switch between related views without leaving the current context. A primary navigation bar, stepper, segmented input, filter chips, and accordion may look similar but have different semantics and interaction rules.
Document:
- tab labels and stable identifiers;
- default active tab;
- whether the active state appears in the URL;
- whether panels load immediately or on demand;
- whether state is preserved when switching;
- permitted tab count and label length;
- disabled or permission-restricted tabs;
- badge and count behaviour;
- overflow strategy at narrow widths.
If the Figma component does not define these behaviours, record the gap instead of grading the build against one convenient screenshot.
Build a state and content matrix
Create deterministic fixtures that stress the component rather than flattering it. Include short and long labels, changing counts, no count, an icon with text, translated labels, disabled access, loading data, empty content, an error, and a panel with enough content to scroll.
Prepare Figma frames and reproducible build routes for:
- default active tab;
- each tab active;
- hover, focus, pressed, and disabled states;
- badge with one, two, and many digits;
- panel loading, empty, error, and populated states;
- narrow mobile, tablet, and desktop widths;
- wrapped, scrolling, dropdown, or other approved overflow behaviour;
- direct URL to a non-default tab;
- browser back and forward navigation.
This differs from an accordion and FAQ visual QA workflow. Accordions disclose stacked sections and may allow several to remain open; tabs expose one panel from a labelled set and require coordinated selection, focus, panel, and often URL state.
Stabilise the capture before comparing pixels
Load the same fixture, viewport, font state, and active tab in Figma and the implementation. Wait for badges, icons, and panel data to settle. Disable unrelated animation when the comparison environment permits it. A difference image captured while the active underline is moving reveals timing, not layout quality.
Use Pixelay’s overlay and difference views to inspect:
- tab-list position and width;
- label baseline and spacing;
- active indicator thickness, radius, and alignment;
- icon size and optical alignment;
- badge placement and reserved space;
- divider and background colours;
- gap between the tab list and panel;
- panel padding and responsive alignment.
Compare every active state. An underline that looks correct on the first tab may use a fixed width and fail on longer labels.
Test overflow as a product decision
Do not accept clipped labels merely because the desktop frame matches. At narrow widths, the design may specify horizontal scrolling, wrapping, a “More” menu, shortened labels, or a different control. Verify that the implementation follows the chosen pattern and makes hidden options discoverable.
For scrolling tabs, check the active item moves into view, focus is not lost, scroll position is sensible, and edge treatment suggests additional content. For wrapped tabs, verify that the active indicator remains attached to the correct row and that panel movement does not become disorienting. For a menu fallback, confirm that the selected label and available choices stay clear.
Long translated labels deserve real fixtures. Shrinking type until everything fits is not a localisation strategy.
Verify interaction and accessibility beside visual parity
Visual comparison cannot prove tab semantics. Use the keyboard and accessibility tree to confirm that arrow keys, Home, End, Tab, and activation behaviour follow the component’s intended pattern. Check selected state, tab-to-panel relationships, focus order, and whether hidden panels are removed from interaction.
Focus must remain visible over hover and active styling. If activating a tab loads data, decide whether selection moves focus immediately or waits for explicit activation. Avoid surprising network work as a side effect of arrow-key exploration when the panels are expensive to load.
The tooltip and popover visual QA workflow also coordinates triggers, content, boundaries, and input methods. Tabs add persistent selection and a one-to-one relationship between each trigger and panel.
Exercise state persistence and navigation
Switch tabs after entering data, scrolling a panel, or applying a filter. Confirm which state should survive. Refresh a deep-linked tab, open it in a new window, use back and forward, and test an invalid or no-longer-authorised tab identifier.
Look for layout shifts when counts or content arrive. Reserve space where a predictable badge will load, and avoid moving the active target under the pointer. If a panel error occurs, the tab list should remain usable unless the entire page is genuinely unavailable.
Report defects with viewport, fixture, active tab ID, URL, input method, screenshot, and expected behaviour. For example:
At 375 × 812 with fixture
long-labels-de, activatingbilling-historyleaves the selected tab outside the horizontal viewport and the panel begins 16 px above the Figma reference.
Separate visual defects from interaction defects even when they occur together. That helps the right owner fix the root cause and makes the retest specific.
Pixelay makes spacing, alignment, and responsive drift objective once the state is controlled. It cannot determine whether the keyboard model is correct or whether a deep link loads the right data. A complete tabs review pairs visual comparison with semantic, navigation, and state testing—because the active underline is only the visible tip of the component.
Read as Markdown Related resource index Site index for AI agents
Pro Bundle