Design Engineer interview questions
100 real questions with model answers and explanations for Junior candidates.
See a Design Engineer resume example →Practice with flashcards
Spaced repetition · Hunter Pass
Questions
I would inspect each token definition and its references because names alone do not prove every layer.
- blue-500 strongly suggests a primitive palette token.
- action-background suggests a semantic role that can reference a primitive.
- button-primary is ambiguous: it may be a component token or a semantic alias, so I would confirm its scope and consumers before classifying it.
Why interviewers ask this: The interviewer is checking whether the candidate understands token layers without treating naming conventions as proof.
The button should consume a semantic action token rather than a palette value.
- The light theme can map action-background to blue-600.
- The dark theme can map the same token to blue-400.
- The component stays unchanged because theme mapping lives above it.
Why interviewers ask this: The interviewer is testing whether the candidate understands theme switching through semantic tokens.
I would replace the literal with the closest approved radius token after comparing the design.
- I would measure the Figma corner to confirm whether md or lg matches.
- I would avoid adding a new token for a one-off one-pixel difference.
- I would flag a real unmatched pattern before extending the scale.
Why interviewers ask this: The interviewer is evaluating practical token use without unnecessary additions.
I would rename the ambiguous token to the system scale and update its references.
- I would inspect its numeric value and map it to space-4 or space-6.
- I would search component styles to find every consumer before renaming.
- If neither value matches, I would confirm the intended spacing with the designer.
Why interviewers ask this: The interviewer is checking whether the candidate can normalize an inconsistent token artifact safely.
I would trace the tokens by role before deduplicating any raw values.
- The same hex can serve different semantic roles, so matching values alone do not justify merging role tokens.
- Confirmed shared palette values can reference one primitive while keeping distinct semantic aliases.
- Component tokens should remain where their scope or behavior is genuinely component-specific.
Why interviewers ask this: The interviewer is testing whether the candidate reduces value duplication without erasing semantic distinctions.
I would fix the shared disabled-state token pair rather than patch the button with a literal color.
- Disabled controls are exempt from WCAG minimum contrast requirements, so I would describe this as a product readability target.
- I would measure the rendered foreground and background against that agreed target.
- After adjusting the shared tokens, I would recheck every component that consumes them.
Why interviewers ask this: The interviewer is evaluating whether the candidate can improve a disabled state systematically without misrepresenting WCAG requirements.
I would route the toast through semantic feedback tokens rather than a named green.
- success-background can reference a green primitive for the surface.
- success-foreground and success-border should be separate roles.
- The toast can consume feedback tokens without knowing their palette values.
Why interviewers ask this: The interviewer is checking whether the candidate models feedback colors as semantic roles.
I would choose the project token as the source and make every syntax resolve to it.
- The CSS variable can hold the canonical spacing value.
- Tailwind theme configuration can map gap-2 to that variable.
- Direct 8px declarations should be replaced where they represent the same role.
Why interviewers ask this: The interviewer is testing whether the candidate can connect tokens across CSS and Tailwind.
The name encodes appearance, so I would replace it with a role such as text-muted.
- A dark theme may map text-muted to a lighter primitive.
- The semantic name remains accurate across both themes.
- Consumers no longer need theme-specific token names.
Why interviewers ask this: The interviewer is checking whether the candidate recognizes appearance-based naming as a theming constraint.
I would define focus color, width, and offset as explicit tokens or component properties.
- The ring color must contrast with both the control and surrounding surface.
- A visible two-pixel outline is a practical default.
- Offset keeps the ring distinct from the button border.
Why interviewers ask this: The interviewer is evaluating whether the candidate treats focus styling as a complete visual state.
I would choose the breakpoint where the content stops fitting, not from a device label.
- I would resize until labels, controls, or columns begin to crowd.
- At that width I would switch the grid from two columns to one.
- I would test slightly above and below the breakpoint for abrupt wrapping.
Why interviewers ask this: The interviewer is checking whether the candidate derives responsive behavior from content constraints.
I would use CSS Grid with auto-fit and a minmax column size.
- The template can use repeat(auto-fit, minmax(240px, 1fr)).
- The browser adds or removes columns as space changes.
- A consistent gap token keeps spacing aligned with the system.
Why interviewers ask this: The interviewer is testing whether the candidate knows a content-driven responsive grid pattern.
I would inspect the title flex item and usually add min-width: 0.
- Flex items default to a minimum based on their content size.
- min-width: 0 allows the title to shrink within available space.
- Then overflow-wrap or ellipsis can handle the text intentionally.
Why interviewers ask this: The interviewer is checking whether the candidate can diagnose a common flexbox overflow artifact.
I would inspect the sticky offset and every ancestor that may create a scrolling or clipping container.
- The element needs a top value such as top: 0.
- An ancestor with overflow hidden, auto, or scroll can change the sticky container.
- The section also needs enough scrollable height for sticking to occur.
Why interviewers ask this: The interviewer is evaluating concrete knowledge of sticky positioning failure modes.
I would use a fixed viewport overlay and center the dialog within it.
- The overlay should use position fixed with all four insets at zero.
- Grid place-items-center or flex alignment can center the panel.
- The panel needs a max height and internal overflow for small screens.
Why interviewers ask this: The interviewer is checking whether the candidate can build a stable modal layout artifact.
I would identify the exact overflowing element before changing global overflow rules.
- DevTools layout overlays can reveal the element wider than the viewport.
- I would check 100vw, fixed widths, transforms, and unbroken text.
- I would fix that element instead of hiding overflow on the body.
Why interviewers ask this: The interviewer is testing a disciplined response to a concrete responsive defect.
I would use a two-column grid with 280px and minmax(0, 1fr).
- The fixed track preserves the sidebar width.
- minmax(0, 1fr) lets the main panel shrink without overflow.
- A breakpoint can stack both regions when 280px leaves too little content space.
Why interviewers ask this: The interviewer is checking whether the candidate can encode a common application shell precisely.
I would reserve the chart region and render every state inside the same sized container.
- The container can use a meaningful min-height based on the chart.
- Loading, empty, error, and data states should share that wrapper.
- The empty message can center inside the reserved area without moving nearby content.
Why interviewers ask this: The interviewer is evaluating whether the candidate preserves layout across component states.
I would normally keep the glyph at 24px and make its target at least 24 by 24 CSS pixels for AA.
- WCAG 2.2 AA criterion 2.5.8 allows either a 24 by 24 CSS pixel target or sufficient spacing around a smaller target, subject to its listed exceptions.
- WCAG 2.5.5 sets a 44 by 44 CSS pixel target at AAA, so 44px can also be a stronger product target.
- The visible focus indicator should follow the full interactive target rather than only the glyph.
Why interviewers ask this: The interviewer is checking whether the candidate separates glyph size from target size and distinguishes AA from AAA criteria.
I would compare the exact font, weight file, size, line height, letter spacing, and container width.
- A fallback font can have different glyph widths even at the same size.
- A missing 600 weight may trigger synthetic bold with different metrics.
- Container padding can cause wrapping even when typography matches.
Why interviewers ask this: The interviewer is testing systematic diagnosis of a Figma-to-code typography mismatch.
Locked questions
- 21
A body text style is 16px with a 16px line height; what would you change for readability?
- 22
A numeric table column looks uneven even though it is right-aligned; what font feature would you try?
typographyschema - 23
A label is styled in all caps at 12px and becomes hard to scan; what would you adjust?
- 24
A web font causes a visible text swap and layout movement; which font-loading basics would you apply?
typography - 25
A React Button component accepts color, radius, shadow, and padding props; how would you simplify its API?
reactcomponentscss - 26
A button click handler is attached to a styled div; what would you change in the component?
components - 27
A Vue card component needs a flexible footer supplied by its consumer; what API would you use?
componentsvueapi - 28
A React input loses focus whenever its error message appears; what implementation mistake would you look for?
reactownership - 29
A dialog must trap focus and close on Escape; would you hand-code it or use Radix Dialog?
radix - 30
A shadcn/ui component does not match the product tokens; how should you adapt it?
tokenscomponentsshadcn - 31
A dropdown menu opens visually but arrow keys do nothing; what behavior should the component provide?
components - 32
A Tabs component hides panels with display none; what else must its artifact include?
componentsartifactstabs - 33
A controlled React switch shows the wrong visual state after a parent update; what would you verify?
reactforms - 34
A reusable form field needs label, hint, and error content; how would you structure it?
forms - 35
A Tailwind class list repeats the same button recipe in six files; what is a junior-friendly extraction?
tailwind - 36
A Tailwind component uses text-gray-500 directly in dark mode; what would you replace it with?
componentstailwindtheming - 37
A loading button still responds to clicks; how would you represent its state?
- 38
An input border changes only by color on error; what would you add?
- 39
A card hover lifts by 8px and makes the grid feel unstable; how would you tune it?
gridcss-grid - 40
A focus outline was removed because it looked ugly; what replacement is acceptable?
- 41
A pale gray caption on white measures 2.8:1; what would you do?
- 42
A tooltip contains a required action link; is Tooltip the right primitive?
- 43
An icon-only delete button has no visible label; what must the code artifact include?
artifacts - 44
A form places placeholder text where the label should be; what would you change?
forms - 45
A Storybook story shows only the default Button; which stories would you add first?
storybook - 46
Chromatic reports a one-pixel border change on every card; how would you review it?
visual-regression - 47
A Figma component has hover and pressed variants but no disabled state; what would you clarify before coding?
componentsfigma - 48
A Figma frame is 1440px wide with fixed cards; how would you avoid copying it as a fixed webpage?
figma - 49
A hover animation scales a button from 1 to 1.12; how would you make it safer and calmer?
motion - 50
A page transition slides the entire screen for every route; what should happen under reduced motion?
reduced-motion - 51
A profile header matches Figma on desktop but the actions overlap the name at 390px; how would you fix the artifact?
artifactsfigma - 52
A pricing card becomes much taller in Russian than in English; how would you keep the row stable?
pricing - 53
A data table must work on a 360px screen without shrinking text below 14px; what would you propose?
- 54
A card has a fixed 220px height and clips a three-line title; how would you revise it?
- 55
A CSS grid leaves a final card stretched across the whole last row; what would you inspect?
cssgridcss-grid - 56
A segmented control changes width when its active label becomes bold; how would you stop the shift?
- 57
A notification banner appears above the form and pushes the submit button below the viewport; what would you change?
formscss - 58
A sticky mobile footer covers the last form field; how would you fix the page?
forms - 59
At 200 percent browser zoom, navigation items disappear behind the logo; what is your response?
- 60
A search field looks aligned but its clear button is outside the input hit area; how would you rebuild it?
- 61
A Figma handoff shows 12px gaps, but the code spacing scale has only 8px and 16px; what do you do?
figma - 62
Figma uses an unavailable font weight of 550; how would you implement the text?
typographyfigma - 63
The coded hero title looks heavier than Figma although both say 700; how would you investigate?
figma - 64
A paragraph measure spans 110 characters per line on desktop; how would you improve it?
- 65
A skeleton uses different line heights from the loaded card and causes a jump; how would you align it?
ux - 66
A Button component can render as an anchor for navigation; what semantics must the API preserve?
componentsapi - 67
A React modal closes when clicking inside its panel; what event issue would you inspect?
reactdialogs - 68
A Vue badge component accepts both status and arbitrary background classes; what conflict would you remove?
componentsvue - 69
A shadcn Select is used for five visible options and keyboard users struggle to review them; would you keep it?
keyboardshadcn - 70
A Radix Popover is clipped by an overflow-hidden card; what would you verify before adding z-index?
radixindexescss - 71
A command palette opens but focus remains on the page behind it; what must be corrected?
- 72
A drag handle is the only way to reorder a list; what keyboard alternative would you add?
keyboard - 73
A custom checkbox toggles with Enter but not Space; what should its behavior be?
- 74
After closing a delete confirmation dialog, focus jumps to the document body; how would you fix it?
- 75
A toast announces the same success message twice to a screen reader; what would you inspect?
a11y - 76
A red and green status dot is the only difference between two rows; how would you fix the artifact?
artifacts - 77
A dark-theme input passes contrast at rest but loses its boundary on hover; what would you measure?
contrastresta11y - 78
A Storybook story requires clicking three controls to reach the error state; how would you improve it?
storybook - 79
Chromatic shows hundreds of diffs after a font update; how would you separate intended change from regressions?
typographyvisual-regression - 80
A component story passes visually but its button cannot be reached by keyboard; what check would you add?
keyboardcomponents - 81
A visual snapshot changes on every run because a timestamp is rendered; how would you stabilize it?
snapshot - 82
A new Card variant has no Storybook documentation; what minimum artifact would you submit with the code?
storybookdocumentationartifacts - 83
A designer reports that a coded card is eight pixels wider than Figma; how would you perform visual QA?
designfigmavisual-qa - 84
A Figma prototype shows a hover-only detail on a card; what handoff question would you ask?
prototypingprototypesfigma - 85
The design file has detached button copies with slightly different padding; how would you handle the code handoff?
cssdesign - 86
A component looks correct at 100 percent zoom but its border disappears on a high-density screenshot; what would you inspect?
components - 87
A large PNG icon is repeated 30 times in a feature grid; what would you replace it with?
gridcss-grid - 88
A below-the-fold gallery downloads every image on initial load; what would you change?
- 89
Lighthouse reports CLS from a promotional banner loaded after hydration; how would you address it?
hydrationweb-vitals - 90
Field data shows poor INP after adding a color-picker prototype; what would you inspect first?
prototypingprototypesweb-vitals - 91
A page imports an entire motion library for one fade-in; what would you consider?
motion - 92
A carousel auto-advances every three seconds and distracts users; how would you revise it?
- 93
A progress indicator animates from zero on every React rerender; what would you fix?
react - 94
A drawer animation feels slow even at 300ms; what measurements and properties would you inspect?
motion - 95
A code prototype for a date picker spends most effort on backend persistence; how would you rescope it?
prototypingprototypes - 96
A prototype needs to compare two navigation patterns tomorrow; React app setup is taking hours, what would you do?
reactprototypesprototyping - 97
A Figma plugin prototype reads selected layer names and exports tokens; what safeguards would you add?
tokensprototypesfigma - 98
A token export script rewrites JSON keys in random order on every run; how would you improve its DX?
tokens - 99
Designers paste invalid hex values into a token tool and get a stack trace; what would you change?
tokensdesigndebugging - 100
A component playground exposes 25 props and overwhelms designers; how would you simplify it?
componentsdesign