Top 30 Advanced UI Design & Figma Concepts Quiz
30 advanced multiple-choice UI Design & Figma concept questions, the corners that separate having used it from understanding it: internals, edge cases, and the reasons behind the design. They come from 30 bites in the UI Design & Figma library, the hardest 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
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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 of 30
A developer aims to create a real-time, collaborative design editing experience using the Figma REST API. Why is this approach fundamentally flawed?
Show the answer
Answer: c · The API is primarily designed for static data extraction and automation, not live, synchronous updates.
The Figma REST API is an asynchronous request-response system designed for data extraction and automation, not for mirroring the live, multiplayer experience of the Figma app. While parsing large JSON might be a performance consideration, the API's fundamental design as an asynchronous system is the core limitation for real-time collaboration, not the data complexity itself.
Read the full bite: Figma REST API: Access Design Files as Structured Data
Question 10 of 30
For an interactive component like a button within an Auto Layout frame, what is the primary benefit of setting strokesIncludedInLayout to true?
Show the answer
Answer: d · It ensures the component's total occupied space remains consistent, preventing layout shifts.
The card states that setting strokesIncludedInLayout to true prevents an element from changing its total dimensions when a stroke is added or changed, thus avoiding layout shifts for neighboring elements. This is the core benefit for stable component design. Option A describes a general styling capability, not the specific function of this property. Option B is incorrect as this property does not automatically adjust padding. Option C describes conditional visibility, which is unrelated to how strokes affect sizing.
Read the full bite: Auto Layout's `border-box`: strokesIncludedInLayout
Question 11 of 30
Which design challenge is best addressed by implementing Figma's Slot Pattern?
Show the answer
Answer: c · Designing a card component where each instance needs unique content and layout within a defined area, without breaking its link to the main component.
Figma's Slot Pattern is designed for components requiring variable internal content or structure, like a card or modal, while maintaining the instance's link to the main component. Option B describes a scenario best handled by variants, which manage a component's own state or style, not its internal content flexibility.
Read the full bite: Figma's Slot Pattern: Flexible Components Without Detaching
Question 12 of 30
Which prototyping scenario most effectively leverages Figma expressions over simpler interaction methods?
Show the answer
Answer: b · Calculating and displaying a running total for items added to a shopping cart.
Expressions are specifically for dynamic calculations and evaluations, such as updating a shopping cart total based on user input. Simple state changes like toggling a checkbox are better managed with component variants, not expressions.
Read the full bite: Figma Expressions: Dynamic Prototypes with Logic and Math
Question 13 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 14 of 30
If a Figma object has two distinct "On click" interactions stacked, what occurs when the object is clicked?
Show the answer
Answer: c · Only the first "On click" interaction in the panel will execute.
The card states that Figma's prototyping engine will only execute the first interaction it finds if multiple interactions share the exact same trigger on the same object. It does not execute both, prompt a choice, or halt the prototype.
Read the full bite: Figma: Stacking Multiple Interactions on One Object
Question 15 of 30
The card suggests viewing a design system primarily as what type of investment?
Show the answer
Answer: d · A capital expenditure aimed at reducing long-term operational costs.
The card explicitly states, "Think of a design system not as a library of assets, but as an investment in operational efficiency... a capital expenditure on infrastructure to reduce long-term operational costs." Option B is directly contradicted, while C and D misrepresent the core financial and efficiency focus.
Read the full bite: Measuring Design System ROI: From Cost to Investment
Question 16 of 30
Which design practice is most critical for enabling screen reader users to efficiently navigate and locate specific information on a web page?
Show the answer
Answer: b · Implementing a logical and hierarchical structure using semantic headings (H1, H2, etc.).
The card emphasizes that screen readers navigate a page's structural outline, and semantic headings (H1, H2, etc.) act as 'chapters' or 'rooms,' enabling users to efficiently jump to specific sections. While other options are important for accessibility, they do not provide the primary mechanism for quick structural navigation to locate information.
Read the full bite: Screen Readers: Designing for a Non-Visual UI
Question 17 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 18 of 30
When are Figma accessibility annotations most crucial for effective design-to-development handoff?
Show the answer
Answer: a · When the visual presentation of a component does not clearly convey its intended semantic meaning or interaction.
Accessibility annotations are critical when the visual design alone doesn't communicate the necessary semantic structure, ARIA roles, or focus order, bridging the gap between visual and non-visual requirements. They are a 'spec layer' for developers, not a tool for automatic code generation, and should not be used for standard HTML elements unless their default behavior is being overridden.
Read the full bite: Figma Accessibility Annotations: Spec for Developers
Question 19 of 30
A design team is preparing to hand off a new feature to developers. Which action best utilizes Figma's named versioning feature for this process?
Show the answer
Answer: a · Generating a single, named version at the point of handoff to serve as a stable, immutable reference.
The card states that named versions should be used "at the point of developer handoff for a new feature" to provide a "stable, immutable design target." Relying on autosaves or sharing the live file would lead to the "chaos of developer handoff" that named versions aim to prevent.
Read the full bite: Figma Versioning for Clean Developer Handoff
Question 20 of 30
What is the primary purpose of Figma Dev Mode's "Compare changes" feature?
Show the answer
Answer: d · To visually and programmatically identify specific design updates between versions.
The feature's core utility is to highlight specific visual and programmatic differences (property and code diffs) between design versions, enabling developers to catch up on changes. It is explicitly stated not to be for abstract exploration, merging, or generating full codebases.
Question 21 of 30
In a Figma Organization, what is the fundamental difference between a "paid seat" and "permissions"?
Show the answer
Answer: c · A paid seat grants a user access to Figma's product features, while permissions define what actions that user can perform on specific content.
The card states that "A seat grants product access, but permissions control a user's actions." It also clarifies that a paid seat does not automatically grant edit access everywhere; explicit permissions are needed. Option D is incorrect because a paid seat does not automatically grant edit access to all files.
Read the full bite: Figma's Organization Plan: Structure and Permissions
Question 22 of 30
What critical insight is not directly provided by Figma Library Analytics, even for a highly used component?
Show the answer
Answer: b · Whether the component's high usage indicates its effectiveness or potential misuse due to confusion.
The card explicitly states that analytics show 'what is happening' but not 'why.' A high insert count could mean popularity or confusion, requiring qualitative feedback to understand the true reason, which is not provided by the analytics alone.
Read the full bite: Figma Library Analytics: Measure Your Design System's Impact
Question 23 of 30
Which of the following scenarios is least appropriate for developing a private Figma plugin?
Show the answer
Answer: d · Developing a utility to optimize layer naming conventions across all design files.
The card explicitly states not to use private plugins for general-purpose functionality that could benefit the wider community and contains no proprietary information. A utility for layer naming conventions is typically general-purpose, unlike the other options which involve company-specific data or internal systems.
Read the full bite: Private Plugins: Internal Tools, Not Public Apps
Question 24 of 30
To ensure a conditional navigation in Figma uses a variable's newly updated value within a single interaction chain, which action order is correct?
Show the answer
Answer: a · Set Variable action, then Conditional action.
Figma actions execute sequentially from top to bottom. To use an updated variable in a conditional, the Set Variable action must occur first to change the value, followed by the Conditional action which then evaluates the new value. If the conditional runs first, it will check the variable's old value, leading to incorrect behavior.
Question 25 of 30
What is the primary method Tokens Studio uses to establish a single source of truth for design tokens between design and development?
Show the answer
Answer: d · By leveraging a Git-backed repository of JSON files as the central, version-controlled source.
The card explicitly states that Tokens Studio uses a central, version-controlled token repository (JSON files in a Git repo) as the single source of truth, decoupling it from the Figma file. Option B describes the problem Tokens Studio aims to solve, while B and D describe features or partial aspects rather than the core mechanism for the single source of truth.
Read the full bite: Tokens Studio: Git-Backed Design Tokens in Figma
Question 26 of 30
A development team struggles to translate Figma designs into code matching their React component library and i18n standards. Which Figma Codegen capability directly addresses this?
Show the answer
Answer: c · It generates framework-specific code snippets and extracts structured data like i18n strings.
Figma Codegen plugins are specifically built to translate designs into framework-specific code, like React components, and to automate the extraction of structured data such as internationalization strings, directly addressing the team's need for consistency with their codebase. Distractor D describes a reverse flow (code-to-design) which is not the function of codegen.
Read the full bite: Figma Codegen: Turn Designs into Framework-Specific Code
Question 27 of 30
Why does the Figma Plugin API frequently require asynchronous functions to access file content?
Show the answer
Answer: c · Because Figma loads file elements dynamically to optimize memory usage.
The card states that "Figma loads files dynamically to save memory. This means pages and components outside the current view are not immediately available. To access them, you must use asynchronous functions." This directly supports option C. While async operations can prevent UI freezes (option A), the primary reason given for file content access being async is Figma's memory optimization strategy.
Read the full bite: Figma's Plugin API: Read and Write to the Canvas Tree
Question 28 of 30
Which of the following best describes a primary distinction between a Figma widget and a standard Figma plugin?
Show the answer
Answer: a · Widgets are designed to create interactive, persistent objects directly on the canvas, unlike plugins which often perform transient operations.
The card states widgets create "interactive and persistent objects that live directly on the canvas," while plugins are for "one-off, 'fire and forget' scripts." Option A directly captures this core difference in purpose and longevity on the canvas. Option B is incorrect because widgets, especially with useSyncedState, are designed for multiplayer collaboration.
Read the full bite: Building Custom Figma Widgets with the Widget API
Question 29 of 30
What is the primary challenge designers encounter when considering user mental models?
Show the answer
Answer: b · The divergence between the designer's comprehensive understanding and the user's expectations based on past experiences.
The card states, "The core challenge in usability is the gap between the designer's mental model and the user's," highlighting the difference between the designer's detailed model and the user's simpler, experience-based one. Option A describes a consequence of this gap, rather than the core challenge itself.
Read the full bite: Mental Models: Design for What Users Believe
Question 30 of 30
A development team has just completed a heuristic evaluation of their new application. What critical insight about the application's overall success is not directly provided by this method?
Show the answer
Answer: c · Confirmation that the product genuinely meets the actual needs and desires of its target users.
Heuristic evaluation assesses UI usability based on expert opinion, but the card explicitly states it does not tell you if the product is "useful or desirable to your target audience." The other options describe what heuristic evaluation is designed to provide.
Read the full bite: Heuristic Evaluation: An Expert UI Review on a Budget
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.