Interview questions in UI Design & Figma
What is a design system's purpose and how does it enforce consistency?
This tests if you see a design system as a single source of truth for design, not just a UI kit. A strong answer cites components and style guides that standardize output. Calling it only a Figma file without developer adoption is a red flag.
Explain UI feedback and implement immediate feedback for API calls
Define feedback as real-time state communication; describe optimistic UI or spinners resolving to success or error after the API call.
How would you show system status during a multi-megabyte file upload?
Tests turning Nielsen's heuristic into concrete frontend patterns for uncertain waits. Cover granular progress like percent and bytes, distinct states for upload versus processing, time estimates, and error recovery.
How do you apply progressive disclosure and hierarchy in complex data tables?
This tests layered UI decomposition. Strong answer: default to essential columns with horizontal dividers; disclose sort and filter on interaction; paginate at 48-56px row height; apply contrast and color cues sparingly.
How does affordance guide choosing a native button over a styled div?
This tests if you see affordance as built-in behavior, not only looks. A strong answer picks the native button for free keyboard, focus, and reader support, noting a div needs tabindex, role, and keydown logic. A red flag is treating it as purely visual.
How do you design a low-cognitive-load wizard and implement it technically?
Pairing progressive disclosure with solid architecture. A strong answer hits step validation, URL-synced navigation, and isolated step components.
How do you model and articulate long-term design debt cost to stakeholders?
Estimate refactor hours and support tickets; show fixes cost 3-5x more later; map inconsistency to trust erosion.
Use Fitts's Law to size and place primary vs secondary mobile actions
Large primary actions in easy thumb zones; secondary actions farther but keep minimum targets.
Line-height vs letter-spacing: impact on readability and values for body vs headings
This tests whether you distinguish vertical rhythm from horizontal glyph spacing. A strong answer sets body line-height to at least 1.5x per WCAG with minimal tracking, while headings use tighter line-height and tighter tracking. Red flag: identical values.
How would you establish a modular typographic scale for a design system?
This tests systems thinking and contextual ratio choice. A strong answer picks a ratio by contrast—high for marketing, low for dashboards—rounds values, adds sizes for dense UIs, adjusts base size across breakpoints.
Assess WCAG AA contrast for light grey text on off-white
Tests your fluency in WCAG relative luminance and design collaboration. A strong answer extracts sRGB values, computes contrast ratio, checks 4.5:1 or 3:1 by text size, and suggests a darker tint preserving hue.
How would you optimize and implement a full-bleed responsive hero image?
Use srcset with AVIF/WebP, CSS object-fit cover, and width/height to prevent CLS.
Building a scalable icon system in Figma
Standardize a grid, size, and stroke; make each icon a component with consistent naming, use currentColor-friendly single-color paths, and export optimized SVGs.
How would you structure a multi-theme color system in Figma and CSS?
Primitives and Semantic collections with theme modes; pipeline to CSS variables; components use semantic tokens only.
How do you build a responsive Figma component across breakpoints?
Tests Figma auto layout and constraint logic for responsive components. Strong answers mention nested frames, hug/fill modes, breakpoint variants or variables, and resizing previews. Red flag: copying static frames instead of using constraints.
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.
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.
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.
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.
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.
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