Four Next.js apps use four incompatible Button APIs. How would you converge them without a flag day?

I would introduce one intent-based contract behind temporary adapters. - I would inventory real prop combinations before choosing variant and size values. - Each adapter would preserve events and DOM while warning on unmapped combinations. - I would migrate one app at a time and block new legacy imports in CI.

A Card has 18 booleans but cannot express a clickable card with a separate menu. What API would you propose?

I would replace conflicting flags with structural slots and one explicit interaction mode. - Header, media, body, and actions slots would expose composition without internal selectors. - The card destination and the menu would remain separate focus targets. - TypeScript unions would reject impossible combinations such as disabled with href.

One Select must support native forms, remote search, and 10,000 options. Would you keep one component?

I would split a native Select from an async Combobox while sharing field styling. - Select remains the default for short lists and normal form submission. - Combobox owns request cancellation, loading, empty results, and virtualization. - A shared Field wrapper aligns labels, errors, density, and focus treatment.

A DatePicker migration changes Date values to ISO strings across 46 forms. How would you roll it out?

I would separate the value-format change from the visual rewrite. - Contract tests would cover UTC, negative offsets, daylight-saving changes, and date-only values. - A deprecated adapter would accept Date and emit the old callback shape. - I would migrate by workflow and compare submitted payloads before removing the adapter.

Teams override Dialog internals to create sheets and confirmations. How would you reshape the API?

I would share an accessible overlay foundation but expose Dialog, AlertDialog, and Sheet separately. - The foundation would own focus containment, Escape, scroll locking, and restoration. - Each public primitive would constrain placement and dismissal instead of accepting arbitrary flags. - Interaction tests would cover nested menus and a trigger removed during confirmation.

Every Table consumer implements row selection differently. What contract would you add?

I would put selection in a headless state contract and keep cell rendering composable. - Stable row IDs and selected IDs would replace DOM-based selection. - One selection column would own checkboxes, shift ranges, and indeterminate state. - Server pagination docs would distinguish selecting one page from selecting the dataset.

A library must move from CSS-in-JS to CSS Modules without changing consumer markup. How would you stage it?

I would replace the styling layer beneath the existing public contract. - Computed-style and Chromatic checks would prove parity component by component. - Runtime theme values would become CSS variables while static variants move to modules. - A canary app and bundle budget would gate each batch before dependency removal.

Consumers target internal Input classes to place icons. How would you close that escape hatch?

I would replace private selectors with explicit start and end adornment slots. - Input would own padding, hit areas, disabled styling, and error-icon spacing. - Migration examples would cover search, currency, and clear-button fields. - After adoption, hashed internals could change without breaking supported layouts.

Importing Badge adds 34 KB through the package barrel. What would you change?

I would publish a side-effect-free Badge entry point and remove runtime locale data from it. - Package exports would keep the barrel compatible while enabling direct imports. - Status copy would come from the product; Badge would only map status to semantic styles. - Route chunks would gain a size budget verified against the packed package.

Two teams cannot adopt the new Button this quarter. How would you avoid permanent dual support?

I would time-box the adapter and expose every remaining call site by owner. - The old export would warn in development and link to the migration guide. - CI would reject new uses while preserving current behavior for delayed teams. - A dated removal release would turn edge cases into API decisions rather than endless exceptions.

Tokens Studio produces two names that collapse to one CSS variable. Where would you fix it?

I would reject the collision before Style Dictionary emits platform files. - Validation would normalize paths exactly like the CSS transform and report both sources. - Design would choose the surviving semantic name, with a one-release alias for the other. - CSS, TypeScript types, and manifests would stay deterministic after the rename.

Dark mode is right in Figma but buttons receive the light alias in production. Where would you debug?

I would trace one failing token from its Figma set to the computed button value. - First I would confirm the intended Tokens Studio theme was exported. - Then I would inspect transforms, selector order, and the document theme attribute. - A two-theme fixture would block the same alias-resolution defect in CI.

Web and iOS interpret the same typography token with different units. How would you define it?

I would share typographic intent and generate platform-specific numeric forms. - The source would separate family role, weight, size, line height, and tracking. - Transforms would emit unitless CSS line-height and validated iOS point values. - Two-line reference specimens would catch drift that schemas cannot see.

A chart asks for raw blue-550 because no semantic token fits selection. What would you do?

I would model the selected-series role before adding a palette escape hatch. - I would inspect hover, disabled, dark theme, and adjacent-series requirements. - A missing primitive could remain private beneath a data-selected semantic token. - Real chart backgrounds and color-vision simulations would verify distinguishability.

Renaming surface-subtle affects three repositories on different release cadences. How would you version it?

I would publish the replacement first and retain surface-subtle as a generated alias. - The changelog would name the reason, replacement, and final alias version. - Repository scans would report remaining references more reliably than download counts. - A major package release would remove the alias only after every consumer ships.

A one-pixel spacing change alters 73 Chromatic stories. Should you change the token?

I would determine whether the shared meaning is wrong or one component chose the wrong role. - A dependency report would separate intentional consumers from accidental reuse. - Dense, default, and mobile compositions would be reviewed before accepting baselines. - A local anatomy mismatch should remap the component, not mutate the whole scale.

Style Dictionary orders output differently on macOS and Linux. How would you make it reproducible?

I would impose stable ordering before formatting and verify identical artifacts across operating systems. - Paths, theme sets, and destinations would use one locale-independent comparator. - Node and Style Dictionary versions would be pinned, with timestamps removed. - A CI matrix would generate clean artifacts on macOS and Linux, then compare their bytes and SHA-256 hashes.

Muted text loses contrast only on tinted surfaces after a release. What guard would you add?

I would validate declared semantic foreground and background pairs. - The manifest would list approved text-muted surfaces for every theme. - CI would calculate WCAG contrast and name the exact aliases that fail. - Storybook would still cover real font sizes, hover, and disabled states.

React, Vue, and Astro consume one token build. What should the package publish?

I would publish framework-neutral CSS variables plus typed metadata. - CSS variables would carry runtime themes while JSON supports design tooling. - Framework helpers could wrap theme selection but never own token values. - A fixture in each stack would install the tarball and verify matching aliases.

Designers can publish Tokens Studio changes directly, and a bad alias reached production. What would you change?

I would preserve design authorship but require a reviewed package release. - Export would open a pull request with generated diffs and affected components. - Design owns semantic intent; engineering owns transforms and package integrity. - Applications would consume immutable versions rather than a branch's latest JSON.

Design Engineer interview questions

100 real questions with model answers and explanations for Middle candidates.

See a Design Engineer resume example →

Practice with flashcards

Spaced repetition · Hunter Pass

Questions

nextjsapi

I would introduce one intent-based contract behind temporary adapters.

I would inventory real prop combinations before choosing variant and size values.
Each adapter would preserve events and DOM while warning on unmapped combinations.
I would migrate one app at a time and block new legacy imports in CI.

Why interviewers ask this: The interviewer is evaluating safe convergence of divergent component APIs.

api

I would replace conflicting flags with structural slots and one explicit interaction mode.

Header, media, body, and actions slots would expose composition without internal selectors.
The card destination and the menu would remain separate focus targets.
TypeScript unions would reject impossible combinations such as disabled with href.

Why interviewers ask this: The interviewer is evaluating composition and invalid-state modeling.

components

I would split a native Select from an async Combobox while sharing field styling.

Select remains the default for short lists and normal form submission.
Combobox owns request cancellation, loading, empty results, and virtualization.
A shared Field wrapper aligns labels, errors, density, and focus treatment.

Why interviewers ask this: The interviewer is evaluating choosing boundaries between controls with different behavior.

migrations

I would separate the value-format change from the visual rewrite.

Contract tests would cover UTC, negative offsets, daylight-saving changes, and date-only values.
A deprecated adapter would accept Date and emit the old callback shape.
I would migrate by workflow and compare submitted payloads before removing the adapter.

Why interviewers ask this: The interviewer is evaluating protecting date semantics during a broad migration.

api

I would share an accessible overlay foundation but expose Dialog, AlertDialog, and Sheet separately.

The foundation would own focus containment, Escape, scroll locking, and restoration.
Each public primitive would constrain placement and dismissal instead of accepting arbitrary flags.
Interaction tests would cover nested menus and a trigger removed during confirmation.

Why interviewers ask this: The interviewer is evaluating sharing overlay mechanics without merging distinct patterns.

I would put selection in a headless state contract and keep cell rendering composable.

Stable row IDs and selected IDs would replace DOM-based selection.
One selection column would own checkboxes, shift ranges, and indeterminate state.
Server pagination docs would distinguish selecting one page from selecting the dataset.

Why interviewers ask this: The interviewer is evaluating state ownership in a reusable data table.

css

I would replace the styling layer beneath the existing public contract.

Computed-style and Chromatic checks would prove parity component by component.
Runtime theme values would become CSS variables while static variants move to modules.
A canary app and bundle budget would gate each batch before dependency removal.

Why interviewers ask this: The interviewer is evaluating retiring styling infrastructure without visible regressions.

I would replace private selectors with explicit start and end adornment slots.

Input would own padding, hit areas, disabled styling, and error-icon spacing.
Migration examples would cover search, currency, and clear-button fields.
After adoption, hashed internals could change without breaking supported layouts.

Why interviewers ask this: The interviewer is evaluating turning accidental coupling into a narrow extension point.

I would publish a side-effect-free Badge entry point and remove runtime locale data from it.

Package exports would keep the barrel compatible while enabling direct imports.
Status copy would come from the product; Badge would only map status to semantic styles.
Route chunks would gain a size budget verified against the packed package.

Why interviewers ask this: The interviewer is evaluating connecting API design with delivered bundle cost.

decision-making

I would time-box the adapter and expose every remaining call site by owner.

The old export would warn in development and link to the migration guide.
CI would reject new uses while preserving current behavior for delayed teams.
A dated removal release would turn edge cases into API decisions rather than endless exceptions.

Why interviewers ask this: The interviewer is evaluating finishing a bounded deprecation.

csstokens

I would reject the collision before Style Dictionary emits platform files.

Validation would normalize paths exactly like the CSS transform and report both sources.
Design would choose the surviving semantic name, with a one-release alias for the other.
CSS, TypeScript types, and manifests would stay deterministic after the rename.

Why interviewers ask this: The interviewer is evaluating collision handling inside a token pipeline.

themingfigma

I would trace one failing token from its Figma set to the computed button value.

First I would confirm the intended Tokens Studio theme was exported.
Then I would inspect transforms, selector order, and the document theme attribute.
A two-theme fixture would block the same alias-resolution defect in CI.

Why interviewers ask this: The interviewer is evaluating end-to-end diagnosis of theme resolution.

tokenstypography

I would share typographic intent and generate platform-specific numeric forms.

The source would separate family role, weight, size, line height, and tracking.
Transforms would emit unitless CSS line-height and validated iOS point values.
Two-line reference specimens would catch drift that schemas cannot see.

Why interviewers ask this: The interviewer is evaluating cross-platform typography token semantics.

tokens

I would model the selected-series role before adding a palette escape hatch.

I would inspect hover, disabled, dark theme, and adjacent-series requirements.
A missing primitive could remain private beneath a data-selected semantic token.
Real chart backgrounds and color-vision simulations would verify distinguishability.

Why interviewers ask this: The interviewer is evaluating turning a chart color request into a durable semantic role.

I would publish the replacement first and retain surface-subtle as a generated alias.

The changelog would name the reason, replacement, and final alias version.
Repository scans would report remaining references more reliably than download counts.
A major package release would remove the alias only after every consumer ships.

Why interviewers ask this: The interviewer is evaluating versioning a token migration across repositories.

tokensvisual-regression

I would determine whether the shared meaning is wrong or one component chose the wrong role.

A dependency report would separate intentional consumers from accidental reuse.
Dense, default, and mobile compositions would be reviewed before accepting baselines.
A local anatomy mismatch should remap the component, not mutate the whole scale.

Why interviewers ask this: The interviewer is evaluating impact analysis for a broad token edit.

reproducibility

I would impose stable ordering before formatting and verify identical artifacts across operating systems.

Paths, theme sets, and destinations would use one locale-independent comparator.
Node and Style Dictionary versions would be pinned, with timestamps removed.
A CI matrix would generate clean artifacts on macOS and Linux, then compare their bytes and SHA-256 hashes.

Why interviewers ask this: The interviewer is evaluating deterministic token generation across environments.

contrasta11y

I would validate declared semantic foreground and background pairs.

The manifest would list approved text-muted surfaces for every theme.
CI would calculate WCAG contrast and name the exact aliases that fail.
Storybook would still cover real font sizes, hover, and disabled states.

Why interviewers ask this: The interviewer is evaluating contrast validation based on actual token pairings.

reactvuetokens

I would publish framework-neutral CSS variables plus typed metadata.

CSS variables would carry runtime themes while JSON supports design tooling.
Framework helpers could wrap theme selection but never own token values.
A fixture in each stack would install the tarball and verify matching aliases.

Why interviewers ask this: The interviewer is evaluating separating token distribution from framework adapters.

tokensdesign

I would preserve design authorship but require a reviewed package release.

Export would open a pull request with generated diffs and affected components.
Design owns semantic intent; engineering owns transforms and package integrity.
Applications would consume immutable versions rather than a branch's latest JSON.

Why interviewers ask this: The interviewer is evaluating cross-functional ownership of token publication.

Locked questions

21
A card overflows only inside a 280 px sidebar. How would you make it context-responsive?
responsive
22
A toolbar jumps between English and Russian as actions wrap. What CSS system would you use?
csssystem-design
23
Cards must stay between 240 and 360 px while filling any host. How would you express the grid?
gridcss-grid
24
Sticky stops after the app shell adds overflow: clip. How would you diagnose it?
25
A split editor needs a resizable 320 px inspector without canvas overflow. How would you build it?
26
A mobile hero using 100vh is hidden behind browser chrome. Which viewport unit would you choose?
css
27
A container query works, but its nested chart no longer measures its parent. What would you inspect?
queriescontainers
28
A JavaScript masonry shifts while images load. What CSS-first alternative would you assess?
cssjavascript
29
Product overrides beat forced-color rules despite cascade layers. How would you organize them?
30
Checkout reorders after hydration from window width and causes CLS. How would you remove it?
hydrationweb-vitals
31
A Next.js page needs clicks, but most of its shell can remain server-rendered. Where is the client boundary?
nextjs
32
A React Tooltip reads document during import and breaks Next.js SSR. How would you repair it?
reactssrnextjs
33
React and Vue need the same Tabs anatomy. Would you share rendering code?
reactvuetabs
34
A Vue control copies a prop into local state and ignores parent resets. How would you fix its API?
vueapi
35
An Astro pricing calculator sits below the fold. Which hydration directive would you choose?
pricinghydration
36
A React widget in Astro doubles JavaScript by importing the whole design system. How would you narrow it?
reactdesign-systemsystem-design
37
A Svelte action mutates classes also owned by the design system. How would you make it predictable?
system-designdesigndesign-system
38
SvelteKit flashes the wrong theme because preference lives in localStorage. How would you fix it?
39
A package root exports React hooks, making a Next.js Server Component client-only after a token import. How would you restructure it?
reactcomponentsnextjs
40
A modal fails during Astro view transitions because focus restoration targets stale DOM. How would you handle it?
dialogsdom
41
A Framer Motion list animates 200 rows on every filter and drops frames. How would you redesign it?
42
Spring values for one button are copied into 27 files. How would you create a motion token?
tokens
43
A Next.js route transition starts before data is ready and leaves a blank panel. How would you sequence it?
nextjs
44
A draggable sheet works with a pointer but not a keyboard. How would you complete it?
keyboard
45
View Transitions morphs avatars between pages, but identities sometimes mismatch. What would you change?
46
A Lottie success animation delays checkout completion by two seconds. How would you revise it?
motion
47
A Rive hero keeps rendering offscreen and raises mobile CPU. How would you control it?
48
A notification stack animates height and pushes the page on every arrival. How would you stabilize it?
49
A prototype uses Framer Motion, Motion One, and CSS for three simple effects. How would you reduce it?
cssprototypesprototyping
50
Design requests a 900 ms reveal, but users click before it finishes. How would you resolve it?
design
51
An account menu opens on hover, closes when the pointer crosses a gap, and cannot be reached by keyboard. How would you repair the interaction?
keyboard
52
A multi-select combobox announces neither the result count nor removed chips in NVDA. What would you change?
53
A Kanban board supports drag and drop across columns but has no non-pointer workflow. How would you make it WCAG-compliant?
wcagschemaa11y
54
A checkout validation summary is visible, but screen-reader users must hunt for the invalid fields. How would you deliver the fix?
validation
55
A virtualized data grid loses screen-reader context as rows unmount. What bounded fix would you own?
gridcss-gridvirtualization
56
A chart tooltip exposes exact values only on pointer hover. How would you make the visualization usable nonvisually?
dataviz
57
A session-expiry dialog gives users 20 seconds and cannot pause the countdown. What is your response?
sessions
58
A nested dialog opens a date picker and focus escapes to the page behind both overlays. How would you diagnose it?
59
At 400 percent zoom, a sticky cookie banner covers the only Save button. How would you resolve the audit finding?
cookies
60
A design-system audit finds focus indicators inconsistent across 46 components and forced-colors mode removes several of them. How would you scope the remediation?
system-designdesigncomponents
61
A variable-font upgrade creates 600 Chromatic diffs across the library. How would you review them without bulk-accepting regressions?
typographyvisual-regression
62
Playwright screenshots pass locally but fail in Linux CI because text wraps differently. What would you stabilize first?
playwright
63
A carousel snapshot is flaky because autoplay advances during capture. How would you keep the test meaningful?
snapshotflaky
64
A one-pixel border diff appears only at device scale factor 1.25. Would you raise the threshold?
65
A token PR changes shadows in 80 stories, but product pages are not represented in Storybook. How would you assess blast radius?
tokensstorybookresilience
66
Chromatic reports no diff, yet a button is invisible in Windows High Contrast. What coverage would you add?
coveragevisual-regressiona11y
67
A responsive navigation has snapshots at 375 and 1440 pixels but breaks at 820. How would you redesign the VRT matrix?
responsivesnapshot
68
A screenshot test waits two seconds for a skeleton to disappear and still flakes under load. What would you change?
uxdebugging
69
A team wants to snapshot every permutation of a component with 12 props. How would you keep the suite useful?
componentssnapshot
70
A visual baseline was approved with a real truncation bug. How would you prevent accepted defects from becoming permanent?
defects
71
Figma defines a Button property called Emphasis while code exposes variant. Which side becomes the source of truth?
figma
72
A designer detaches instances to achieve a compact table row that code does not support. How would you resolve the mismatch?
design
73
Tokens Studio exports a radius token that code renamed two releases ago. How would you prevent silent divergence?
tokens
74
A Figma frame specifies fixed 1440-pixel geometry but the product must support embedded panels from 480 to 900 pixels. What contract would you request?
figma
75
Figma and production disagree on whether a destructive dialog has one or two actions. How would you settle the source-of-truth conflict?
conflictfigma
76
A code component supports an empty state that has never been added to the Figma library. What would you do before the next feature copies it?
componentsfigma
77
A Figma-to-code generator emits absolute positions and opaque class names. Would you adopt it for product UI?
decision-makinggeneratorsfigma
78
A color token changed in Figma on Friday, but the generated package is still old on Monday. How would you make ownership visible?
tokensownershipfigma
79
Field INP worsened from 160 to 310 milliseconds after a filter drawer shipped, while lab tests remain green. How would you investigate?
ab-testingtestingweb-vitals
80
A redesigned hero improves aesthetics but raises mobile LCP from 1.9 to 3.4 seconds. What would you change?
81
A personalization banner creates a CLS spike only for returning users. How would you instrument and fix it?
discoveryweb-vitals
82
A design-system package adds 28 KB of JavaScript to every route for one tooltip. How would you enforce a budget?
system-designdesignjavascript
83
RUM shows poor Core Web Vitals mostly on low-end Android, but the team dashboard reports only global averages. What would you add?
web-vitals
84
A product team wants to ship a rich animation that consumes 45 milliseconds of main-thread time on each input. How would you negotiate the budget?
motionconcurrency
85
A Framer prototype validates a new onboarding flow, and you are asked to ship it in Next.js next sprint. How would you productionize it?
prototypingnextjsprototypes
86
A WebGL product configurator prototype delights users but drains laptop batteries and lacks a fallback. What is your plan?
prototypingprototypesconfig
87
A Rive prototype contains business state inside the animation file. How would you divide ownership for production?
motionprototypingprototypes
88
A prototype uses fake instant search, but production results take up to 1.5 seconds and can arrive out of order. What would you add?
prototypingprototypes
89
A prototype has six bespoke controls that resemble existing design-system components. How would you choose what to keep?
system-designdesigncomponents
90
A coded prototype tested well with 12 users, but analytics and failure handling were intentionally omitted. What release boundary would you set?
prototypingprototypes
91
Only 34 percent of UI component usages added in new product PRs come from the design system, but teams say migration is too slow. What would you own this quarter?
componentsdesign-systemsystem-design
92
Product engineers copy Storybook examples and hit missing providers, router mocks, and theme setup. How would you improve the DX?
storybookmocking
93
A Figma plugin exports tokens in 40 seconds and designers rerun it because progress is unclear. What would you change?
tokensdesignfigma
94
Teams bypass a component because its TypeScript errors span 20 lines and suggest no valid alternative. How would you repair the API experience?
componentsapitypescript
95
A codemod migrated 70 percent of Button calls and left 180 TODOs. How would you finish the adoption work?
decision-making
96
Designers cannot tell whether a component is released, experimental, or deprecated in Figma. How would you expose lifecycle status?
componentsdesignexperiments
97
A design-system contribution takes 18 days from proposal to merge, mostly waiting for reviews. What would you improve?
system-designdesign
98
A team requests a new component that duplicates 80 percent of an existing one. How would you handle the contribution?
components
99
Storybook search returns several similarly named components and designers open obsolete stories. What tooling change would you ship?
componentsstorybookdesign
100
Two product teams adopted the new system, but one is building wrappers around every component. How would you respond?
componentssystem-designdecision-making

Questions

1Four Next.js apps use four incompatible Button APIs. How would you converge them without a flag day?

2A Card has 18 booleans but cannot express a clickable card with a separate menu. What API would you propose?

3One Select must support native forms, remote search, and 10,000 options. Would you keep one component?

4A DatePicker migration changes Date values to ISO strings across 46 forms. How would you roll it out?

5Teams override Dialog internals to create sheets and confirmations. How would you reshape the API?

6Every Table consumer implements row selection differently. What contract would you add?

7A library must move from CSS-in-JS to CSS Modules without changing consumer markup. How would you stage it?

8Consumers target internal Input classes to place icons. How would you close that escape hatch?

9Importing Badge adds 34 KB through the package barrel. What would you change?

10Two teams cannot adopt the new Button this quarter. How would you avoid permanent dual support?

11Tokens Studio produces two names that collapse to one CSS variable. Where would you fix it?

12Dark mode is right in Figma but buttons receive the light alias in production. Where would you debug?

13Web and iOS interpret the same typography token with different units. How would you define it?

14A chart asks for raw blue-550 because no semantic token fits selection. What would you do?

15Renaming surface-subtle affects three repositories on different release cadences. How would you version it?

16A one-pixel spacing change alters 73 Chromatic stories. Should you change the token?

17Style Dictionary orders output differently on macOS and Linux. How would you make it reproducible?

18Muted text loses contrast only on tinted surfaces after a release. What guard would you add?

19React, Vue, and Astro consume one token build. What should the package publish?

20Designers can publish Tokens Studio changes directly, and a bad alias reached production. What would you change?

Locked questions