Top 30 Intermediate UI Design & Figma Concepts Quiz
30 intermediate multiple-choice UI Design & Figma concept questions, the mechanics underneath the basics: how the pieces relate and where the usual mental model stops holding. They come from 30 bites in the UI Design & Figma library, the middle slice of the 135 UI Design & Figma concept questions in the 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
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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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 10 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 11 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
Question 12 of 30
What is the primary advantage of nesting components within a design system?
Show the answer
Answer: c · It ensures that any change to a base component automatically updates all its instances, maintaining consistency.
The card explicitly states that nesting components allows a single change to a child component to automatically update everywhere it's used, preventing inconsistencies and managing complex UIs at scale. While instance swapping (option D) is a powerful feature enabled by nesting, the fundamental advantage of nesting is the propagation of changes for system-wide consistency.
Read the full bite: Nesting Components: Building Systems, Not Just Screens
Question 13 of 30
Which action is NOT primarily controlled within Figma's Text properties panel?
Show the answer
Answer: d · Changing the fill color of the text layer
The card explicitly states that properties like color, stroke, and effects are found in the Fill, Stroke, and Effects panels, not the Text panel. Line height, letter spacing, and alignment are all core text properties managed within the Text panel.
Read the full bite: Figma Text Properties: Beyond Font and Size
Question 14 of 30
What is the primary advantage of using an instance swap property in a design system?
Show the answer
Answer: d · It enables quick swapping of specific nested components while maintaining component integrity.
Instance swap properties are designed to allow designers to easily replace nested components within a parent component without risking detachment or incorrect overrides, as stated in the 'Why it exists' section. Option C describes a Boolean property, and option A describes a Variant property, both explicitly mentioned as incorrect uses for instance swap properties.
Read the full bite: Instance Swap Properties: Control Nested Components
Question 15 of 30
A design team frequently encounters inconsistencies in UI elements across different project files. How does a Figma Library primarily help resolve this?
Show the answer
Answer: d · It acts as a central, updatable source for approved components, ensuring all designers use the latest versions.
The card explains that libraries solve "design inconsistency" by creating a "single, updatable source for all design assets," ensuring everyone uses approved components and receives updates. Option C is a tempting distractor because Figma does have version control, but that's a feature of the file itself, not the primary function of a library for component distribution.
Read the full bite: Figma Libraries: Your Team's Single Source of Truth
Question 16 of 30
When is detaching a Figma instance the most appropriate action?
Show the answer
Answer: d · To add a new, unique internal element to an instance that isn't part of the main component's properties.
Detaching is appropriate for fundamental structural changes, such as adding unique elements not supported by overrides, or to create a new component variation. Simple cosmetic changes like color are handled by overrides, and detaching severs the link, preventing automatic updates from the main component.
Read the full bite: Breaking the Link: Detaching Figma Instances
Question 17 of 30
Which of the following best describes the core benefit of using Figma's Interactive Components?
Show the answer
Answer: d · They drastically reduce the number of frames and prototype connections needed to manage multiple states within a single component.
Interactive Components embed prototype logic directly into component variants, eliminating the need for numerous duplicated frames and connections for state changes within a component. Option C is incorrect because the card explicitly states that interactions cannot be created between variants from different component sets.
Read the full bite: Figma Interactive Components: Prototype Smarter
Question 18 of 30
When prototyping a scrollable list, if "Preserve scroll position" is active but the list resets after navigating away and back, what is the most likely reason?
Show the answer
Answer: b · The scrollable layer on the initial list frame and the one on the returned-to list frame do not have identical names or structure.
The card explains that for scroll positions to be shared across different frames, the scrollable layers must have identical names and structure. If these do not match, Figma cannot apply the saved position, causing it to reset. While option D would also cause a reset, the question implies an unintended behavior when preservation is expected.
Read the full bite: Preserve Scroll Position: Seamless Figma Prototypes
Question 19 of 30
Which statement best characterizes the relationship between a Design System and a Style Guide?
Show the answer
Answer: b · A Design System is a comprehensive toolkit that incorporates Style Guides, Component Libraries, and Pattern Libraries.
The card explicitly states, "A Design System is the parent, and a Style Guide is one of its children," and that a Design System is a "comprehensive toolkit" containing Style Guides, Component Libraries, and Pattern Libraries. Option D is incorrect because a Style Guide is a component of a Design System, not a separate entity from code, and a Design System encompasses more than just code.
Read the full bite: Design System vs. Style Guide: The Parent and the Child
Question 20 of 30
Which statement accurately reflects the best practice for establishing focus order in a web interface?
Show the answer
Answer: b · The most robust and maintainable focus order is typically achieved by aligning with the Document Object Model (DOM) sequence.
The card explicitly states that the default DOM order is the most robust and maintainable for focus order. While visual layout is important, the focus order doesn't have to strictly match it, as long as it remains logical; positive tabindex values are an anti-pattern, and tabindex="-1" removes an element from the natural tab order.
Read the full bite: Focus Order: The Keyboard's Path Through Your UI
Question 21 of 30
What is the primary benefit of using a <button> element instead of a styled <div> for an interactive click action?
Show the answer
Answer: b · It inherently provides accessibility features such as keyboard navigation and screen reader support.
The card emphasizes that a <button> element automatically provides keyboard focus, activation via Enter/Space, and is announced by screen readers, features a styled <div> lacks. While other options might seem plausible, they are not the primary, inherent benefit of semantic elements for interactive components.
Read the full bite: Semantic HTML: Use the Right Element for the Job
Question 22 of 30
What is the primary benefit of using the HTML <label> element with a for attribute in form design?
Show the answer
Answer: b · It establishes a programmatic link between descriptive text and an input, crucial for screen reader interpretation.
The primary benefit of the <label> element is to programmatically associate descriptive text with an input, allowing assistive technologies like screen readers to announce the input's purpose. While it also creates a larger clickable target (option D), its core role for accessibility is the programmatic connection, unlike placeholder text (option C) or validation (option A).
Read the full bite: Accessible Form Design: A Conversation, Not an Interrogation
Question 23 of 30
A designer creates a button that is visually 16x16 CSS pixels. How can this button still comply with WCAG 2.2's touch target requirement?
Show the answer
Answer: c · By placing enough empty space around the button so that its 24-pixel diameter activation zone does not overlap with other interactive elements.
The card explains that a smaller visual target can comply if it is "surrounded by enough empty space" so its 24-pixel diameter activation zone does not intersect with other targets. Option B describes an exception to the rule, not how the 16x16 button itself becomes compliant.
Read the full bite: Touch Target Size: Bigger is Better, Spacing is Key
Question 24 of 30
For a project with an established design system, what is the most effective way to use Figma Dev Mode for UI implementation?
Show the answer
Answer: c · Employing the Code Connect feature to map design elements to existing, reusable components in the codebase.
The correct answer highlights Code Connect as the superior method for integrating with established design systems, as it links to actual components rather than generic snippets. Directly copying generated code (option D) is explicitly warned against for production applications with mature design systems, as it lacks component logic and reusability.
Read the full bite: Figma Dev Mode: From Design to Code Snippets
Question 25 of 30
Which scenario would NOT automatically trigger Figma's 'Changed' status for a design element previously marked 'Ready for dev'?
Show the answer
Answer: c · A designer updates the value of a variable attached to a component.
The card explicitly states that 'changes in the value of an already-attached variable' do not trigger the automatic 'Changed' status. Other direct modifications to the element's content, position, or styling would typically trigger it.
Read the full bite: Figma's Handoff Status: A Traffic Light for Devs
Question 26 of 30
Which action is explicitly NOT supported by the Figma for VS Code extension?
Show the answer
Answer: a · Modifying the dimensions or styling of a design element
The card clearly states that the extension is 'for inspection, not editing—you can't change the design itself' and 'Do not use it if you need to make edits'. All other options are explicitly mentioned as supported features for design consumption and collaboration.
Read the full bite: Figma for VS Code: Designs Inside Your Editor
Question 27 of 30
Which scenario best illustrates the intended use of Figma's branching feature?
Show the answer
Answer: c · A designer developing a new "warning" state for a button in the company's main component library.
The card states branching is for "significant, isolated work on a critical, shared file" like "updating components in a design system," and provides the example of adding a "warning" variant to a button in a component library. Options A, B, and D describe scenarios that are either too minor, too urgent, or too early-stage for the overhead of branching.
Read the full bite: Figma Branching: A Sandbox for Your Design System
Question 28 of 30
When multiple UI cards reuse the same number variable, how does Figma prevent changing one card's count from affecting another?
Show the answer
Answer: b · It scopes calculations to the variable mode assigned to each card's parent frame.
The correct answer is B because assigning a mode to each parent frame keeps calculations scoped to that mode context, ensuring independent counters. Distractor A is tempting but wrong because Figma does not auto-generate variables; the designer explicitly creates modes to hold parallel values.
Read the full bite: Mathematical Expressions in Figma Prototypes
Question 29 of 30
Which of the following best describes the primary objective of automated design linting?
Show the answer
Answer: c · To ensure programmatic adherence to a predefined design system's rules.
The card explicitly states that automated design linting was created to "enforce consistency programmatically" and "enforce its consistency and correctness" against a design system. While it speeds up reviews, it does not evaluate overall UX or replace human judgment, nor does it generate creative solutions.
Read the full bite: Automated Design Linting: Your Design System's Spellchecker
Question 30 of 30
What is the primary mechanism that drives improvements and adaptations in an iterative design process?
Show the answer
Answer: a · Regular analysis of real user interactions and feedback.
The card emphasizes that iterative design's core is a continuous loop of testing prototypes with real users, observing their interactions, gathering feedback, and then refining the design based on this analysis. Option B describes the 'waterfall' method, which iterative design aims to replace by incorporating early and frequent user feedback.
Read the full bite: Iterative Design: Build, Test, Learn, Repeat
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.