Intermediate interview questions in Design & UX, page 9
How do you use boolean properties for optional icon and chevron?
This tests Figma boolean properties for avoiding variant explosion. A strong answer toggles icon and chevron visibility on one component for all four states. A red flag is creating variants for every permutation or manually hiding layers on instances.
Manage light and dark themes with Variables and Modes
Separate primitive and semantic variables, define light and dark modes in one collection, and bind UI fills to semantic tokens.
How do you structure and maintain a Figma component library for scale?
This tests scalable Figma architecture bridging design and engineering. Strong answers cover atomic structure, variant booleans, auto-layout, and Dev Mode docs. Red flag: treating Figma as static mockups without properties or naming conventions.
Refactor a legacy UI for accessible DOM flow
Align DOM order with reading order, use semantic landmarks and headings, and ensure a sensible tab order with managed focus.
Challenges of breaking changes in a design system
Technical (semver, codemods, coexistence) and organizational (comms, migration support, timelines) challenges.
Measure active engagement time accurately
Accumulate time only while the tab is visible and the user active, via Page Visibility and activity events; flush with sendBeacon on unload.
Track scroll depth: Intersection Observer vs scroll events
Place sentinels at depth thresholds and fire once via Intersection Observer, off the main thread; scroll listeners fire constantly and need throttling.
Versioning and shipping design tokens via NPM
Semver, deprecate-before-delete with aliases, codemods and migration guides.
How would you quantify a critical UX issue to justify architectural work?
Tests translating UX findings into business metrics to prioritize engineering. Strong answers pair task-success rates with financial impact, benchmark against industry baselines, and frame the fix as risk mitigation.
How would you generate a functional palette from one brand color?
Tests systematic color scaling and accessibility. Strong answers use HSL/LCH lightness stops, enforce 4.5:1 text contrast, build 50-900 surface weights, and derive semantic hues independently. Red flag: manual hex tweaks without contrast checks.
Rolling out a breaking change to a shared Button
Major semver bump, deprecation period, codemod and migration guide, staged comms.
Design a centralized research repository for discoverable, actionable insights
Tests knowledge-management system design and metadata taxonomy. Strong answers separate raw artifacts, insights, and reports; build faceted search; and integrate with engineering workflows.
Discuss custom web font performance and loading strategies
Critical rendering path tradeoffs between speed and design fidelity. Strong answers match font-display to UX goals, combine preloading with subsetting, and quantify byte savings. Red flag: calling swap a free win while ignoring layout shift from reflow.
Outline a data pipeline for web events to a data warehouse
Tests end-to-end streaming design from web clients to warehouse. Strong answers list five stages: client capture, broker buffering, stream processing, object storage, and warehouse load. Red flag: proposing only batch cron jobs or ignoring schema registries.
Composite components versus layout primitives
Primitives give flexibility and composition, composites enforce consistency, choose by reuse and variation.
Propose a framework for measuring the impact of UX research
Propose HEART mapped to KPIs; cite task success, error rate, conversion lift, ticket drops; prove causality.
How would you architect a Figma-to-code icon system?
Tests design-to-code systems thinking. Strong answers cover Figma variables as source of truth, automated API exports into transformed versioned packages, and strict naming taxonomy. Red flag: manual SVG exports and developers editing assets by hand.
Documenting accessibility per component
Per-component a11y sections, keyboard tables, ARIA roles and states, live examples.
How do you align research roadmaps and resolve tactical-strategic conflicts?
Map work to 3 horizons with user-need-outcome framing; protect 30% capacity for strategy; negotiate via visible scorecard.
Explain an 8-point grid and Figma spacing tokens setup
Tests your ability to systemize visual rhythm and encode it in Figma variables. Strong answers cite an 8pt base, define a 4/8/16/24/32/48/64 scale, and publish semantic tokens. Red flag: arbitrary values or manual nudging without variables.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles