Design systems engineer design interview questions

As asked

A dashboard card can move from loading, to partial data, to complete, to error. How would you design the motion so users understand the state without being distracted?

Sample answer outline

A strong answer starts with information hierarchy, not animation taste. Loading should set expectation without pretending precision, partial data should reveal structure progressively, complete should settle quickly, and error should draw attention only enough to prompt recovery. The candidate should discuss duration, easing, stagger, interruption, and reduced-motion behaviour. Interviewers look for restraint: motion should clarify continuity and state, not decorate the interface. A common miss is designing one beautiful transition while ignoring rapid state changes, network retries, or users who prefer reduced motion.

Expect these follow-ups

• How would this change for a finance dashboard that updates every second?
• What is your rule of thumb for when motion should be removed?
• How do you hand this off so engineering does not guess timings?

As asked

A shared Button and Dropdown library is used by 30 teams. How do you prevent accessibility regressions as the library evolves?

Sample answer outline

Bake accessibility into component contracts rather than treating it as after-the-fact QA. Use unit tests for keyboard behaviour and ARIA attributes, Storybook accessibility checks for common states, and end-to-end tests for focus movement in realistic flows. Document expected usage and reject APIs that let consumers remove labels or break semantics too easily. Manual screen reader testing is still needed for complex interactions because automated tools catch only part of the problem. Strong candidates also mention release notes and migration guidance because consumers can create regressions even when the library is sound.

Expect these follow-ups

• Which accessibility issues do automated tools usually miss?
• How do you test keyboard behaviour for a composite widget?
• What do you do when a consuming team misuses the component?

As asked

Your product uses page transitions, animated charts, skeleton loaders, and celebratory effects. How do you design a reduced-motion strategy that still feels coherent?

Sample answer outline

Reduced motion is not the same as no feedback. Keep semantic state changes but swap spatial movement for opacity, colour, instant layout changes, or shorter fades where appropriate. The answer should reference OS-level prefers-reduced-motion, product settings, QA coverage, and documentation in the motion system. The candidate should separate essential motion that supports comprehension from ornamental motion that can be removed. A weak answer treats accessibility as a final toggle rather than a design constraint from the start.

Expect these follow-ups

• Which animations would you keep even in reduced-motion mode?
• How would you test this with users who experience vestibular discomfort?
• How do you prevent teams from bypassing the motion tokens?