Top 30 UI Design Interview Questions and Answers
30 multiple-choice questions on UI Design, drawn from 30 bites out of the 57 tagged UI Design on Tezvyn. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
According to the article, how does introducing the eight personas during design critiques apply Nielsen's sixth heuristic to creators?
Show the answer
Answer: b · It embeds recognition cues into the workflow so designers spot exclusion without memorizing WCAG rules
The article explicitly reframes Nielsen's sixth heuristic for creators, using personas as recognition cues during critiques rather than expecting designers to memorize vast accessibility rules. B is tempting because the card discusses shifting away from WCAG memorization, but wrong because the goal is recognition during workflow, not substituting one memorization task for another.
Read the full bite: 8 Free Personas Spot Accessibility Issues in Design
Question 2 of 30
Which factor does the concept of affordance prioritize when selecting a native button over a styled div?
Show the answer
Answer: b · Built-in keyboard support, focus handling, and screen reader semantics
Affordance centers on the built-in behavioral contracts of native elements, such as keyboard activation and screen reader announcements, rather than just appearance. Option D is tempting because developers often assume role='button' is sufficient, but that ignores the manual keyboard and focus management a div still requires.
Read the full bite: How does affordance guide choosing a native button over a styled div?
Question 3 of 30
Hick's Law predicts that decision time increases logarithmically with more choices. In which situation would this prediction be LEAST applicable?
Show the answer
Answer: c · An experienced user quickly selecting a specific, familiar setting from a complex software menu.
Hick's Law explicitly states it "doesn't apply if the user already knows what they want and can find it directly," making the number of choices irrelevant. While it is "less applicable" to complex decisions (like option A), the law's core premise of increasing time with options is fundamentally broken when the user has prior knowledge.
Read the full bite: Hick's Law: More Choices, Slower Decisions
Question 4 of 30
Why do many teams map semantic t-shirt-size spacing tokens onto an underlying numeric base-unit grid rather than choosing only one approach?
Show the answer
Answer: c · It gives readable, intent-based names backed by predictable, grid-aligned math
Combining them keeps the clarity of named intent while the numeric base ensures consistent, composable alignment. The named tokens still resolve to concrete values, and a scale constrains rather than permits arbitrary spacing.
Read the full bite: Choosing a spacing scale for a design system
Question 5 of 30
Under WCAG AA guidelines, in which scenario is a 3:1 color contrast ratio considered sufficient?
Show the answer
Answer: a · For large-scale text or critical graphical components like icons.
The card states that large text (18pt+ or 14pt bold+) and important graphics (like icons and input borders) require a 3:1 ratio under WCAG AA. Text within a logo or brand name is explicitly exempt from contrast requirements, not subject to a 3:1 ratio.
Read the full bite: WCAG Color Contrast: A Readability Score, Not an Opinion
Question 6 of 30
You are building a responsive Figma card with Auto Layout that must fill its container width and expand vertically when the description text grows. Which setup achieves this?
Show the answer
Answer: c · Nest the headline and description in a vertical Auto Layout frame with hug height, set the parent card to hug contents vertically and fill container horizontally, and set the image to fill width
Nesting the text in a hug-height frame allows the parent to expand vertically as copy grows, while fill-width on the image and fill-container on the parent handle horizontal responsiveness. Option D is tempting because fixed height seems to help grid alignment, but it prevents the card from growing and will clip content when the text expands.
Read the full bite: How do you build a responsive card with Auto Layout?
Question 7 of 30
In Figma, a 24×24 Close icon must stay pinned 16px from the top and right edges of a modal Frame when resized. Which approach achieves this?
Show the answer
Answer: c · Set horizontal to Right and vertical to Top on the icon inside the modal Frame
Setting the icon to horizontal Right and vertical Top inside the modal Frame pins it to the corner while keeping its size fixed. Option A is tempting because it names the correct constraint values, but constraints do not work inside Groups, so the icon must be a direct child of the Frame.
Read the full bite: How do you pin a Close icon to a modal's top-right corner?
Question 8 of 30
To make the profile card grow taller with a longer bio while keeping width fixed, how should the outer vertical Auto Layout frame be set?
Show the answer
Answer: d · Fixed width and hug contents height, with the bio set to fill width and auto height
Fixed width locks the card's horizontal size while hug height lets it grow as the auto-height bio wraps. Fixed height clips text, and hug width would let the card widen with content.
Read the full bite: Profile card with nested Auto Layout sizing
Question 9 of 30
A notification badge must overlap an avatar inside an Auto Layout frame. What is the best approach?
Show the answer
Answer: c · Set the badge to absolute position so it ignores flow but stays inside the frame
Absolute positioning removes the badge from the directional flow, letting it overlap the avatar without pushing sibling elements while the parent still resizes responsively. Moving the badge outside the frame is a tempting but wrong choice because it severs the responsive relationship and makes the component harder to maintain.
Read the full bite: When would you use absolute position in an Auto Layout frame?
Question 10 of 30
You are configuring a filter tag container in Figma that must push overflowing tags to the next line and automatically adjust when individual tag labels change length. Which setup achieves this?
Show the answer
Answer: a · Use horizontal auto layout with wrap on the parent, set container spacing and padding, and configure each tag to hug its contents
Horizontal auto layout with wrap pushes overflowing tags to the next line and adjusts container height automatically, while hugging contents lets each tag resize when its label changes. Grid organizes items into distinct columns and rows rather than wrapping a continuous flow, so it will not produce the desired dynamic wrapping behavior.
Read the full bite: How would you configure a wrapping filter tag container and its properties?
Question 11 of 30
When building a scalable Figma design system, why should a single brand hex color be stored as a variable rather than a color style?
Show the answer
Answer: b · Variables are designed for single raw values and enable global updates across files, plus modes for future themes like dark mode.
Variables are architected for single raw hex values and support modes for future theming, while color styles are meant for composite fills like gradients. Option C is tempting because manually updating every component feels cautious, but it abandons token-based propagation and is explicitly flagged as an anti-pattern in scalable systems.
Read the full bite: What is the most efficient way to update a brand color globally?
Question 12 of 30
Which workflow correctly makes a button inside Frame A navigate to Frame B when clicked in a Figma prototype?
Show the answer
Answer: c · Switch to Prototype mode, select the button layer, drag its interaction node to Frame B, and set the trigger to On Click with action Navigate To
The correct approach is to enter Prototype mode, use the interaction node on the specific button layer, and configure an On Click Navigate To interaction targeting Frame B. Option B is tempting because hyperlinks are common in other tools, but Figma does not use right-click hyperlinks for frame navigation.
Read the full bite: Make a Figma button navigate from Frame A to Frame B
Question 13 of 30
When setting up a Smart Animate transition, which practice ensures a button smoothly tweens its width and corner radius between two frames?
Show the answer
Answer: d · Naming the button layer identically in both frames and using compatible types
Smart Animate matches layers by exact name across frames and interpolates properties like width and corner radius only between compatible types. Identical hierarchy and auto layout are not required, and raster images cannot morph vector properties.
Read the full bite: Explain Figma Smart Animate's core principle and layer matching requirements
Question 14 of 30
In Figma, how do you configure a parent frame so its tall content scrolls while the header and footer stay fixed in place?
Show the answer
Answer: d · Enable Clip content and vertical overflow on the parent frame, set the header and footer to Fix position when scrolling, and leave the content as Scroll with parent
Option D is correct because Clip content masks the overflow, vertical overflow enables native scrolling, and Fix position when scrolling pins the chrome while the content layer remains Scroll with parent. Option C is tempting because Stick to top sounds like it fixes the header, but it actually makes the element scroll until it hits the top and then freeze, which is wrong for a persistent header.
Read the full bite: How would you prototype fixed header, footer, and scrollable content?
Question 15 of 30
You have created local color and text styles in a Figma file and want to share them with your team so updates propagate automatically. What should you do?
Show the answer
Answer: a · Open the Publish modal, select the color and text styles, add a version description, publish, and have teammates enable the library in their files.
Figma's publish-subscribe model requires publishing selected styles with a version note and then having teammates enable the library to receive automatic updates. Copy-paste breaks propagation, and converting styles into components confuses two different Figma primitives.
Read the full bite: Steps to publish color and text styles to a Figma shared library
Question 16 of 30
What must be added to a red-versus-green status indicator to satisfy WCAG 1.4.1 for colorblind users?
Show the answer
Answer: b · Distinct icons or shapes plus visible text labels alongside the colors
WCAG 1.4.1 requires a redundant visual channel, so pairing colors with distinct icons and visible text ensures colorblind users can perceive the status without relying on hue. Increasing contrast alone is insufficient because users with deuteranopia or protanopia may still see the two states as indistinguishable tones.
Read the full bite: What is the accessibility problem with color-only status and two fixes?
Question 17 of 30
A heading uses 14pt bold type. What is the minimum WCAG AA contrast ratio it must meet against its background?
Show the answer
Answer: a · 3:1, because 14pt bold meets the WCAG AA large text definition
WCAG AA defines large text as at least 14pt bold or 18pt regular, which requires a 3:1 ratio. Option D is tempting because 14pt sounds like normal text, but the bold weight qualifies it as large text, so 4.5:1 does not apply here.
Read the full bite: Minimum WCAG AA contrast for normal vs large text and Figma checks
Question 18 of 30
You need to recover one component from an older Figma autosave without losing later changes. What should you do?
Show the answer
Answer: c · Duplicate the autosave into a new file, copy the component, and paste it back into the current file
Figma version history is file-level, so restoring an autosave directly would overwrite all later work. Duplicating the old version to a new file lets you safely copy just the component you need and paste it back.
Read the full bite: How do you restore one component from Figma version history?
Question 19 of 30
What is the fundamental way Figma treats video content within a design?
Show the answer
Answer: c · As a fill property that can be applied to any shape.
The card explicitly states that video in Figma is a "fill property, just like a solid color, gradient, or image," not a distinct video layer. Option D is a tempting distractor because many other design or video tools use dedicated video layers, but Figma's approach is unique.
Question 20 of 30
Which approach correctly uses Figma variables to enable Submit only after a terms checkbox is checked?
Show the answer
Answer: b · Create a boolean variable toggled by the checkbox, add a conditional action to the Submit button that checks the variable before navigating, and bind the button's opacity to the same boolean.
The correct workflow requires a boolean variable, a conditional action on Submit that verifies the variable is true before navigating, and visual binding for feedback. Option C is tempting because it uses a variable and visual binding, but without the conditional check the Submit button would still fire when clicked even while appearing disabled.
Read the full bite: How would you conditionally enable Submit after checking a terms checkbox?
Question 21 of 30
Which approach lets three profile cards display unique names and avatars in a single reusable overlay frame?
Show the answer
Answer: a · Bind the overlay text to a string variable and its avatar to an instance-swap property; set both before opening the same overlay
Setting variables and swapping the avatar instance before opening the same overlay keeps the prototype maintainable and avoids duplication. Creating three separate overlay frames is a tempting but incorrect approach that eliminates reusability.
Read the full bite: How do you populate one overlay for three profiles using variables?
Question 22 of 30
Why should button size, type, and state be separate variant properties instead of discrete components or one combined property?
Show the answer
Answer: a · It preserves independent mixing of attributes and avoids maintaining dozens of discrete components
Separate variant properties let designers mix attributes like Type and Size orthogonally, preventing combinatorial explosion (e.g., 36 separate buttons). Option D reflects the vague cleanliness misconception the card warns against, while B describes the inflexible mega-property anti-pattern.
Read the full bite: Why use button variants instead of separate components per state?
Question 23 of 30
A Card main component contains a nested Button instance. How do you let consumers of the Card instance toggle the Button's state from the Card's properties panel?
Show the answer
Answer: d · Apply a variant property to the nested Button instance within the Card main component
Applying a variant property to the nested Button inside the Card main component exposes the state toggle in every Card instance's properties panel while keeping the Button linked to its main component. Detaching the nested Button is tempting because it unlocks editing, but it severs the design system link and stops updates from propagating.
Read the full bite: How do you change a nested Button's state from a Card instance?
Question 24 of 30
A web form's 'Submit' button can only be activated by a mouse click, not by pressing Enter or Space. Which POUR principle is primarily violated?
Show the answer
Answer: d · Operable
The Operable principle ensures users can interact with the interface using various input methods, including keyboard navigation. The inability to activate a button without a mouse directly violates this principle, not the perception, understanding, or robustness of the content.
Read the full bite: POUR: The Four Pillars of Web Accessibility
Question 25 of 30
Your team needs to test whether users can complete a checkout flow and catch navigation flaws before engineers write production code. Which deliverable should you build?
Show the answer
Answer: a · Prototype, to simulate user flows and enable functional validation
A prototype is an interactive model that simulates user flows for usability testing before engineering begins. An animated mockup is tempting but insufficient because it lacks true functional validation, which is required to catch real navigation issues.
Question 26 of 30
When implementing prefers-reduced-motion, what is the most important consideration for UI animations?
Show the answer
Answer: c · Replacing potentially jarring animations with gentler, less disruptive alternatives to maintain clarity.
The card states the goal is to REDUCE motion by replacing jarring animations with gentler ones, not to eliminate all motion. Removing essential animations (Option D) can break UI understanding.
Question 27 of 30
When building a responsive form card that must stretch across viewports, why would you use Constraints rather than Auto Layout for the input fields?
Show the answer
Answer: c · Constraints allow the inputs to stretch in response to the parent card resizing, whereas Auto Layout would resize them only based on their own inner content.
Constraints govern how children react to their parent frame, so the inputs stretch fluidly with the card width. Option A is tempting but wrong because resizing based on inner text length is Auto Layout's behavior, not Constraints.
Read the full bite: Figma Constraints vs Auto Layout: when are Constraints preferable?
Question 28 of 30
To create a crescent moon in Figma using Subtract selection, which setup yields the correct editable result?
Show the answer
Answer: c · Place the base circle below the cutter circle; the result is a live, editable Boolean group.
Subtract selection cuts the top shape out of the bottom one, so the base must sit below the cutter, and the result remains a non-destructive Boolean group. The most tempting distractor reverses the layer order and incorrectly claims the top layer controls the fill, whereas the bottom layer actually determines the group's appearance.
Read the full bite: Create a crescent moon in Figma using Boolean operations
Question 29 of 30
When building a scalable Figma table with nested Auto Layout, which strategy best avoids variant explosion while allowing different cell types within the same row?
Show the answer
Answer: a · Build atomic cell components and use component properties or nested instance swaps to change cell content within a single row component.
Atomic cells combined with component properties or nested swaps let a single row component accommodate different content types without creating dozens of variants. Option C is tempting because variants are a standard Figma pattern, but it causes exponential variant bloat as row permutations multiply.
Read the full bite: How would you structure a complex reusable Figma table with Auto Layout?
Question 30 of 30
Which setup lets designers replace a button's nested icon from the right panel while keeping the button instance intact?
Show the answer
Answer: d · Apply an instance swap property to the nested icon and set preferred instances from the icon library
An instance swap property lets designers change the nested icon directly from the right sidebar without detaching, while preferred instances limit choices to the library. A boolean property only toggles visibility and does not actually swap the underlying icon asset.
Read the full bite: How do you let designers swap a component's icon without detaching?
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.