Easy 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.
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.
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.
How would you use Auto Layout for a button with optional icon?
This tests Figma Auto Layout for responsive components. Answer: apply horizontal auto layout, set fixed padding and spacing, set text to hug contents, and set the frame to hug so it resizes when text changes. Red flag: using fixed widths or manual resizing.
Difference between 'Space between' and fixed spacing in Auto Layout
Tests your grasp of distribution logic versus fixed gaps. Fixed spacing sets a constant pixel gap; Space between splits free space to push items to edges. Use fixed spacing for lists, Space between for wide toolbars. Red flag: calling them interchangeable.
Create a button component with default, hover, and disabled variants
This tests Figma component variants and prototyping. A good answer: create a component set with a State property, build default, hover, and disabled variants, wire Change to with While hovering. Red flag: separate components instead of one variant set.
Make a Figma button navigate from Frame A to Frame B
Tests hands-on Figma prototype workflow. Good answer: enter Prototype mode, select the Login button, drag the interaction noodle to Frame B, set trigger to On Click and action to Navigate To.
Steps to publish color and text styles to a Figma shared library
Open Publish in the right panel, select color and text styles, add a version note, publish; teammates enable the library.
What is the accessibility problem with color-only status and two fixes?
This tests WCAG 1.4.1 Use of Color: red-green status is invisible to many colorblind users. A strong answer names two non-color cues like icons or text labels. A red flag is claiming high contrast alone fixes the problem without a secondary visual indicator.
Minimum WCAG AA contrast for normal vs large text and Figma checks
This tests WCAG AA contrast thresholds and Figma operationalization. A strong answer states 4.5:1 for normal text and 3:1 for large text, then describes using Figma's native contrast panel or Stark to audit color pairs.
Walk me through inspecting a component's styling in Figma Dev Mode
Press Shift+D; find the ready-for-dev frame in the left sidebar; click to center it; inspect colors, typography, and spacing.
How do you export and optimize a Figma SVG for web?
This tests your design-to-code workflow. A strong answer covers: selecting the vector layer, adding an SVG export in the right sidebar, and running the output through SVGO to strip metadata and flatten transforms.
How do you restore one component from Figma version history?
Tests whether you know version history is file-level. Answer: open the file name menu, show version history, find the ~1h autosave, duplicate it to a new file, copy the component, paste back. Red flag: restoring the entire old version and losing later work.
Create a counter where clicking '+' increases the number by one
Tests Figma number variables and Set variable action. Use a number variable on the text, then add an On click trigger on the plus button with Set variable and an expression to add one. Red flag: using duplicate frames instead of a single dynamic variable.
Why use button variants instead of separate components per state?
Tests Figma component set organization and scalability. Strong answers cite flexible property mixing, reduced combinatorial bloat, and cleaner dev handoff. Red flag: saying only "it's cleaner" without naming navigability or system integrity.
How would you use Auto Layout to build a responsive card?
Tests Figma Auto Layout direction, padding, and resizing rules. Answer: stack header, image, and text vertically with a fixed gap; set text to fill width and hug height; wrap in a scaling frame. Red flag: absolute positioning instead of structured Auto Layout.
What's the functional difference between wireframes, mockups, and prototypes? Describe a scenario.
This tests whether you distinguish structure, visuals, and interactivity. A strong answer defines each by fidelity and function, then names a lifecycle stage like using wireframes in discovery to align scope before visual design.
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