Interview questions in Design & UX, page 4
Essential UX research plan components for engineering scope
Name parts—problem, goals, method, users, timeline, metrics, risks—and map them to scope, workload, or instrumentation.
How do you enforce proximity with Figma Auto Layout and spacing variables?
Tests translating Gestalt proximity into systematic spacing. Strong answers map t-shirt scales to Auto Layout gap and padding, then bind them to Figma spacing variables. Red flag: confusing proximity with alignment or manual nudging.
When should data in a reusable component be a prop or state?
This tests controlled versus uncontrolled patterns. Great answers ask who owns the data: props when parent must drive or observe it, state only for private details.
How would you automate forbidden-word checks in CI/CD?
This tests embedding brand governance into engineering workflows. A strong answer covers AST-aware string extraction, CI gating with severity levels, and allowlisting to cut false positives.
How do you validate UX within hard technical constraints?
Tests evaluative research design for constrained, buildable prototypes rather than ideal mocks. Strong answers scope to feasible layers, use Wizard of Oz or stubs, and benchmark against current state. Red flag: testing fantasy UI that ignores API limits.
How do you apply systematic rules to asymmetrical layouts predictably?
Grid and spacing tokens as guardrails; deliberate ratios create asymmetry, not random offsets; engineers get rules, not pixels.
Two strategies to prevent style leakage in reusable components and their trade-offs
This tests style encapsulation in design systems. A strong answer contrasts Shadow DOM, which fully isolates CSS via a shadow root, with scoped naming like BEM or CSS Modules. Red flag: proposing global resets or !important as a solution.
Design a headless CMS model for brand voice metadata and API usage
Structured content beyond page blobs. Strong answers validate tone, context, and character limits in the CMS; expose them via API filters; and let clients render context-aware components.
What technical instrumentation supplements a two-week diary study?
Log anonymized feature frequency, session duration, and device switches; link via participant ID.
How do you optimize nested Auto Layout for performance?
Tests architectural restraint and layer complexity in Figma. Strong answers use Grid and Wrap to avoid deep nesting, remove redundant groups, and favor component instances. Red flag: proposing invisible spacers or manual positioning hacks.
How would you structure a flexible Card component API?
Tests composition-over-configuration thinking in design systems. A strong answer uses compound components or slots so consumers reorder or omit title, image, and body freely without prop drilling. Red flag: rigid boolean props that freeze layout order.
Design a secure templating engine for user notifications
Tests balancing creator flexibility with defense-in-depth security and i18n. Strong answers cover context-aware auto-escaping, a restricted AST grammar, ICU MessageFormat for pluralization, and sandboxed execution.
Propose two research methods to investigate checkout abandonment
Tests pairing behavioral and attitudinal research. Great answers match funnel analytics to find drop-offs with usability tests to uncover why users cannot complete fields or leave in anger.
When would you wrap layers in a Frame versus a Group?
Use a Frame when you need Clip content, scroll overflow, or constraints on children.
What WAI-ARIA attributes and keyboard interactions make Tabs accessible?
This tests mastery of the W3C Tabs pattern. A strong answer covers role tablist tab tabpanel, aria-selected, aria-controls, and arrow-key roving focus with optional auto-activation. A red flag is treating tabs as buttons and relying only on the Tab key.
Propose an NLP approach to audit brand voice and build a dashboard
This tests turning brand principles into measurable NLP features. A strong answer uses readability for simplicity and agency verbs for empowerment, scores copy via LLM classifiers, and visualizes trends by product area.
What criteria and questions ensure right users for a specialized dev tool?
Designing a recruiting pipeline that qualifies niche experts and secures attendance. A strong answer covers role criteria, layered tech screens, and no-show backups. Red flag: relying on job titles without verifying real tool usage.
How would you inspect a Figma text element for CSS properties?
Your Figma-to-CSS typography workflow. A good answer selects the layer, opens the Properties tab or Dev Mode, reads font family, weight, size, line height, and letter spacing, and uses Copy as code.
Design a type-safe polymorphic component that renders as different HTML elements
Tests TypeScript generics and prop forwarding in design systems. Answer: generic as constrained to keyof JSX.IntrinsicElements, merged with ComponentPropsWithoutRef<C>, omit clashes, forward ref with ElementRef.
Design a database schema for a blog with posts, authors, and tags
Tests normalization and many-to-many design. A strong answer covers a users table with role enum, a posts table referencing user_id, and a post_tags join table for categories. Red flag: storing tags as a comma-separated string in the posts table.
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