Top 30 UI Design & Figma Concepts Quiz
30 multiple-choice questions on the UI Design & Figma fundamentals, drawn from 30 bites in the UI Design & Figma library. 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.
Visual design, Figma, prototyping, design tools
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
What is the primary goal of adopting a User-Centered Design (UCD) approach?
Show the answer
Answer: a · To ensure products are effective, efficient, and satisfying for users, thereby preventing costly redesigns.
UCD's fundamental objective is to create systems that help users achieve their goals effectively, efficiently, and with satisfaction, preventing costly redesigns after launch. While UCD involves iterative cycles and data gathering, these are methods to achieve the primary goal of user satisfaction and product effectiveness, not the goal itself.
Read the full bite: User-Centered Design: Build for Who, Not What
Question 2 of 30
Which statement best captures the fundamental nature of Nielsen's 10 Heuristics?
Show the answer
Answer: a · They are flexible guidelines for identifying common usability problems.
The card explicitly states that the heuristics are "flexible rules of thumb" and a "diagnostic checklist" for identifying usability issues. They are not strict laws, nor are they meant to generate new designs or replace user testing, making option A the correct choice and options A, B, and D common misconceptions.
Read the full bite: Nielsen's 10 Heuristics: Rules of Thumb for UI Design
Question 3 of 30
What is the fundamental principle visual hierarchy uses to direct user attention?
Show the answer
Answer: a · By creating noticeable differences between design elements.
Visual hierarchy primarily directs user attention by creating contrast between elements, making important things look important. Uniform alignment and spacing (C) would flatten hierarchy, while specific placement (B) or limiting elements (D) are tools or outcomes, not the fundamental principle itself.
Read the full bite: Visual Hierarchy: Guiding the User's Eye
Question 4 of 30
In which scenario would color theory be less suitable than color science?
Show the answer
Answer: a · Specifying exact color values for consistent product manufacturing.
Color theory guides aesthetic and psychological choices in design, like brand identity and user interaction. However, for objective precision in physical color reproduction, such as manufacturing, color science with its measurement-based rules is required.
Read the full bite: Color Theory: Harmony, Contrast, and Meaning in UI
Question 5 of 30
Which combination of practices is most crucial for optimizing the readability of body text in a user interface?
Show the answer
Answer: b · Left-aligning text and maintaining line lengths between 45 and 90 characters.
The card emphasizes left-alignment for a consistent starting point and line lengths between 45 and 90 characters to prevent eye strain. Justified text (Option D) is explicitly discouraged on the web due to poor browser rendering.
Question 6 of 30
Consider a new user encountering a hyperlink on a webpage for the first time. Which statement accurately describes the roles of affordance and signifier in this interaction?
Show the answer
Answer: a · The hyperlink's ability to navigate to another page is its affordance, and its blue color and underline are signifiers.
The card defines an affordance as the potential action an object makes possible (like a hyperlink's ability to navigate), and a signifier as the perceivable cue that communicates this action (like the blue color and underline). Option D is incorrect because the card explicitly states that saying an element "has good affordance" is a common misconception and a category error.
Read the full bite: Affordances Are Actions, Signifiers Are Clues
Question 7 of 30
According to Jakob's Law, when might a designer be justified in introducing a novel UI pattern that deviates from established conventions?
Show the answer
Answer: c · If the new pattern provides a demonstrably superior solution to a specific user problem, acknowledging the learning curve.
The card states that a new pattern is acceptable 'If you have a genuinely better way to solve a problem, you can introduce a new pattern, but be aware that it comes with a high learning cost for your users.' Option B is incorrect because Jakob's Law allows for innovation in visual design and branding, but cautions against reinventing fundamental interaction patterns for aesthetic reasons alone.
Read the full bite: Jakob's Law: Don't Reinvent the UI Wheel
Question 8 of 30
Which scenario best illustrates the critical trade-off when applying Fitts's Law in UI design?
Show the answer
Answer: a · Designing an interface where every element is maximized for click speed.
The card explicitly states that making every element massive leads to cluttered, low-density interfaces, highlighting the trade-off between target acquisition speed and information discovery. The other options are direct, positive applications of Fitts's Law, not illustrations of its inherent trade-off.
Read the full bite: Fitts's Law: Bigger, Closer Targets Are Faster to Hit
Question 9 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 10 of 30
What is the most significant problem when someone uses "Miller's Law" without specifying which principle they mean?
Show the answer
Answer: b · It risks miscommunication because the term refers to multiple distinct, unrelated ideas.
The card emphasizes that "Miller's Law" is a homonym for four distinct, unrelated principles, leading to persistent confusion and miscommunication. While some applications might oversimplify a concept (option D), the primary issue highlighted is the inherent ambiguity of the term itself, requiring clarification to avoid misunderstanding.
Read the full bite: "Miller's Law" is Ambiguous and Often Misused
Question 11 of 30
In the context of UI design, what is the primary objective when managing cognitive load?
Show the answer
Answer: c · To eliminate extraneous cognitive load, enabling users to dedicate their mental resources to intrinsic tasks.
The card states that a designer's job is to "eliminate extraneous load so the user can focus all their mental energy on the intrinsic part." Option B is incorrect because the goal is not to create a "thought-free" experience, as intrinsic load is necessary.
Read the full bite: Cognitive Load: Don't Make Users Think (Too Hard)
Question 12 of 30
What is the primary reason typefaces are designed with seemingly inconsistent dimensions, like a circular 'O' being taller than a square 'H'?
Show the answer
Answer: d · To ensure that all characters appear perceptually uniform in size and alignment to the human eye.
Typefaces are designed with optical corrections to compensate for human perceptual imperfections, making characters appear uniform despite mathematical inconsistencies. Option A is incorrect because while design involves creativity, these specific inconsistencies serve perceptual balance, not just stylistic variation.
Read the full bite: Anatomy of a Typeface: Why Letters Lie to Your Eyes
Question 13 of 30
Which scenario best highlights HSL's primary advantage over RGB in UI design?
Show the answer
Answer: b · Programmatically generating a consistent color palette with varying lightness for UI states.
HSL's intuitive structure (Hue, Saturation, Lightness) makes it ideal for creating systematic color variations, such as lighter shades for hover states, by simply adjusting the lightness. RGB is better suited for precise color matching from exact specifications like hex codes, rather than generating variations.
Read the full bite: RGB vs. HSL: Two Ways to Tell a Computer 'Color'
Question 14 of 30
What is the primary benefit of applying the Rule of Thirds in visual composition?
Show the answer
Answer: a · To create a more dynamic and engaging composition that guides the viewer's eye.
The Rule of Thirds aims to create dynamic and engaging compositions by guiding the viewer's eye, as stated in the card. Option C is incorrect because the rule intentionally moves away from perfect symmetry to achieve this dynamism.
Read the full bite: Rule of Thirds: Guide the Eye, Don't Just Center
Question 15 of 30
According to the card, what is the fundamental difference between a color scheme and an arbitrary collection of colors?
Show the answer
Answer: a · A color scheme provides a systematic framework for color choices to achieve a specific goal.
The card defines a color scheme as a "logical combination of colors to achieve a goal" and a "framework for making deliberate, effective color choices that serve a specific purpose." While aesthetic harmony can be a goal, the core distinction is the systematic, purpose-driven nature, not just visual appeal.
Read the full bite: Color Schemes: The Logic of Color Harmony
Question 16 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 17 of 30
Which characteristic primarily makes SVG ideal for logos and icons on responsive websites, unlike raster formats?
Show the answer
Answer: c · They maintain perfect sharpness and clarity regardless of display resolution or scaling.
The card states SVG is "resolution-independent" and "infinitely scalable," ensuring graphics are "always perfectly sharp, no matter the display size." This consistent visual quality across varying resolutions is the primary benefit for responsive design. While SVG can be manipulated and often has smaller file sizes, these are secondary to its core scalability advantage for logos and icons.
Read the full bite: SVG: Code-Based, Infinitely Scalable Graphics
Question 18 of 30
What is the primary advantage of converting standardized icons into Figma Main Components within an icon system?
Show the answer
Answer: a · It allows for consistent, simultaneous updates across all instances of an icon in a design.
The card states that using main components allows you to "update an icon's color or shape in one place and have it propagate everywhere." While other options might be related benefits of a good icon system, the core advantage of a Figma Main Component is enabling global updates to all its instances. Option D, while related to constraints, isn't the primary benefit of the component itself, and perfect scaling without distortion also depends on the icon's original design.
Read the full bite: Icon System Design: Build Once, Use Everywhere
Question 19 of 30
A designer needs to fix an awkward gap between 'T' and 'o' in a large headline and also make the letters in a paragraph of body text appear more tightly packed. Which typographic adjustments are most appropriate?
Show the answer
Answer: a · Apply negative kerning to the 'To' pair and apply negative tracking to the body text.
Negative kerning is used to reduce space between specific letter pairs, perfect for fixing awkward gaps in headlines. Negative tracking uniformly reduces space between all letters in a block, making them appear more tightly packed. Option B incorrectly applies tracking to a pair and misuses leading for horizontal density.
Read the full bite: Kerning, Tracking, and Leading: Spacing in Typography
Question 20 of 30
What is the main benefit of using semantic naming for design tokens (e.g., color.background.action.primary) compared to value-based naming (e.g., blue-500)?
Show the answer
Answer: a · It ensures the token's function remains clear and consistent even if its visual appearance changes.
Semantic naming ensures a token's purpose (e.g., primary action color) remains valid even if its value changes (e.g., from blue to green), preventing 'lie' variables and making the system resilient to updates. While descriptive names can aid learning, the primary benefit is this decoupling of purpose from value for scalability.
Question 21 of 30
Which statement best captures the fundamental role of white space in effective design?
Show the answer
Answer: a · It actively structures content, clarifying relationships between elements and guiding user attention.
The card explicitly states white space is an "active, not passive" tool used to "structure content," "grouping, separating, and focusing attention." Option A directly reflects this by highlighting its role in clarifying relationships and guiding user attention, which is its fundamental purpose. Option C is a tempting distractor because white space can create a sophisticated mood, but this is a secondary effect, not its primary functional role.
Question 22 of 30
Which feature is a defining characteristic of Figma's Auto Layout Grid, distinguishing it from simple horizontal or vertical Auto Layouts?
Show the answer
Answer: a · It allows individual child items to span across multiple rows or columns.
The card states that the power of Auto Layout Grid is that individual items can be configured to span multiple columns or rows, which is a key differentiator. It explicitly warns that items do not wrap, making option B incorrect.
Question 23 of 30
What is the main purpose of a focal point in design, and what common pitfall should be avoided?
Show the answer
Answer: d · To establish a clear visual hierarchy by emphasizing one dominant element; avoiding multiple competing points of interest.
A focal point's primary goal is to create a clear visual hierarchy by making one element dominant, guiding the user's eye. The most common pitfall is attempting to emphasize everything, which results in competing focal points and visual confusion.
Read the full bite: Focal Point: You Can't Emphasize Everything
Question 24 of 30
What is the primary benefit of a modular grid compared to a simple column grid?
Show the answer
Answer: c · It provides a structured system for aligning elements consistently across both rows and columns.
The card explains that a modular grid extends a column grid with horizontal rows, creating a matrix of cells that provides "two-dimensional control" for "perfect alignment in both directions" for repeating elements. Option C accurately describes this core advantage. Options A and D describe scenarios where a modular grid is explicitly stated as not suitable, making them plausible but incorrect distractors.
Read the full bite: Modular Grid: Organizing UI with Cells, Not Just Columns
Question 25 of 30
In which scenario should a designer deliberately break rhythmic repetition rather than maintain it?
Show the answer
Answer: b · A multi-step checkout wizard that demands deliberate, sequential attention
The card states that sequential flows like checkout wizards benefit from intentional asymmetry that forces users to pause and focus. The email inbox option is a tempting distractor because the card explicitly cites Gmail and Outlook as keeping row structure sacred even when adding extras like avatars, precisely to preserve scanning momentum.
Question 26 of 30
What is the primary, appropriate application of the Golden Ratio in UI design, according to the card?
Show the answer
Answer: b · To establish a systematic, visually harmonious proportional framework for macro-layouts and typographic scales.
The card states the Golden Ratio is used for 'layout dimensions' and 'typographic scale' to create 'visually harmonious' compositions, acting as a 'guideline' or 'framework'. It explicitly warns against using it as an 'unbreakable rule that overrides usability or content requirements' or as a 'substitute for user testing'.
Question 27 of 30
In which design scenario would a baseline grid offer the most significant benefit?
Show the answer
Answer: d · A marketing website featuring extensive long-form articles and detailed product descriptions.
A baseline grid is most beneficial for text-heavy layouts where typography is critical and readability is paramount, such as long-form articles. Scenarios like dashboards, artistic layouts, or simple UIs are explicitly mentioned as less suitable for a strict baseline grid.
Read the full bite: Baseline Grid: Aligning Text for Vertical Rhythm
Question 28 of 30
When designing a reusable button component in Figma that requires a defined background color and consistent internal spacing (padding), which container type should be used?
Show the answer
Answer: d · A Frame, because it provides explicit boundaries and supports properties like background and clipping.
Frames are essential for UI components like buttons because they allow for explicit dimensions, background colors, and padding, and can clip content. Groups, conversely, are 'shrink-to-fit' and cannot define internal spacing or have their own background, making them unsuitable for components requiring such properties.
Question 29 of 30
When creating a shape in Figma, which keyboard modifier ensures it maintains perfect proportions, like a square or a circle?
Show the answer
Answer: a · Shift
The card explicitly states to "hold Shift while dragging to constrain proportions (making a perfect square or circle)." Option/Alt is used for drawing or resizing from the center point, not for constraining proportions.
Read the full bite: Figma Shape Tools: Your Design Building Blocks
Question 30 of 30
When adapting a design from Display P3 to sRGB for broader web compatibility, why would a designer choose the 'Convert' option over 'Assign'?
Show the answer
Answer: d · To ensure the colors appear as visually similar as possible, even if hex codes change.
The 'Convert' option calculates new color values to preserve the visual appearance of the colors as closely as possible within the new profile's gamut. 'Assign', conversely, keeps the original hex codes but re-interprets them in the new profile, which changes their visual appearance.
Read the full bite: Figma Color Profiles: sRGB vs. Display P3
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.