Top 30 UI Design & Figma Interview Questions and Answers

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.

1. Question 1 of 30

   Which of the following best describes how a design system enforces consistency at scale?

   • aIt establishes a governance process where designers review all product changes before release
   • bIt integrates reusable coded components, design tokens, and documentation across both design tools and code repositories
   • cIt documents visual standards in a style guide that designers and developers can reference manually
   • dIt provides a shared Figma file that serves as the single source of truth for all interface designs
   Show the answer

   Answer: b · It integrates reusable coded components, design tokens, and documentation across both design tools and code repositories

   A design system enforces consistency by uniting coded components, tokens, and documentation across design and engineering, not just through design assets. Calling it merely a shared Figma file is a common misconception because it misses the engineering adoption and version-controlled code that actually standardizes implementation.

   Read the full bite: What is a design system's purpose and how does it enforce consistency?

2. Question 2 of 30

   Which approach best follows Nielsen's visibility of system status heuristic when handling a button-triggered API call?

   • aDisable the button with a spinner, then transition to success or error states based on the API result
   • bWait to update the UI until the API response returns to prevent displaying incorrect state
   • cShow a full-screen loading modal so the user cannot interact with anything during the call
   • dOptimistically update the UI and assume the network request will succeed without a rollback plan
   Show the answer

   Answer: a · Disable the button with a spinner, then transition to success or error states based on the API result

   The card describes proper feedback as immediate local changes like a disabled button with a spinner, followed by resolution to success or error states. Waiting until the API responds leaves the user staring at a frozen screen, which violates the visibility of system status heuristic.

   Read the full bite: Explain UI feedback and implement immediate feedback for API calls

3. Question 3 of 30

   During a 10 MB video upload that requires server processing after transfer, which frontend approach most effectively prevents abandoned sessions and duplicate submissions?

   • aA determinate progress bar with percentage and bytes transferred, explicit phase labels for uploading and processing, dynamic time estimates, and chunked error recovery offering retry or resume
   • bAn indeterminate spinner on the submit button and a success toast once the server responds
   • cDisplaying a static 'about 30 seconds remaining' message and using a browser alert if the connection drops
   • dDisabling the submit button during transfer and showing a progress bar that completes when the last byte leaves the browser
   Show the answer

   Answer: a · A determinate progress bar with percentage and bytes transferred, explicit phase labels for uploading and processing, dynamic time estimates, and chunked error recovery offering retry or resume

   Option A is correct because it combines granular progress, distinct phase labels, dynamic time estimates, and resilient error handling to close the gulf of evaluation. Option D is tempting because it shows a progress bar and prevents duplicate clicks, but it wrongly conflates the network transfer with overall completion and hides server-side processing from the user.

   Read the full bite: How would you show system status during a multi-megabyte file upload?

4. Question 4 of 30

   Which implementation best applies progressive disclosure and hierarchy in a complex data table with thousands of rows?

   • aUse 56px row height for every dataset, place secondary columns behind a picker, expose filters on hover, and left-align counts and percentages.
   • bDisplay all columns and controls permanently, use a full grid with vertical and horizontal borders, and apply zebra stripes to every row.
   • cDefault to essential columns with horizontal dividers at 48px, reveal sorting and filtering on hover or behind triggers, and reserve color cues for large datasets or status indicators.
   • dUse 40px row height universally, hide secondary columns in an overflow menu, and right-align all numbers including dates and zip codes.
   Show the answer

   Answer: c · Default to essential columns with horizontal dividers at 48px, reveal sorting and filtering on hover or behind triggers, and reserve color cues for large datasets or status indicators.

   Option C reflects the recommended layered strategy: a calm default view with essential columns and horizontal dividers at 48px, controls disclosed on interaction, and color used sparingly. Option A is tempting because it includes progressive disclosure patterns like a column picker and hover-revealed filters, but it incorrectly applies 56px to every dataset regardless of density and wrongly left-aligns numeric counts that should be right-aligned for scannability.

   Read the full bite: How do you apply progressive disclosure and hierarchy in complex data tables?

5. Question 5 of 30

   Which factor does the concept of affordance prioritize when selecting a native button over a styled div?

   • aReduced DOM weight and faster rendering performance
   • bBuilt-in keyboard support, focus handling, and screen reader semantics
   • cVisual design consistency and CSS customization flexibility
   • dARIA attributes alone as a substitute for native behavior
   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?

6. Question 6 of 30

   Which implementation pattern best preserves a wizard's low cognitive load while keeping branching logic and back-button behavior maintainable?

   • aOne monolithic form component that stores all fields in a single local useState object and renders steps with a switch statement.
   • bIsolated step components that each own their validation, orchestrated by a state machine that syncs the current step to the URL and commits valid drafts to a central store.
   • cA modal-based wizard that keeps state in a local object and advances steps via internal methods without URL synchronization.
   • dSeparate route components per step that share a global draft store and run validation only on the final review screen.
   Show the answer

   Answer: b · Isolated step components that each own their validation, orchestrated by a state machine that syncs the current step to the URL and commits valid drafts to a central store.

   C is correct because it pairs progressive disclosure with isolated validation, URL-synced navigation, and explicit state management exactly as the card recommends. A is the most tempting distractor because consolidating state feels simpler, but it collapses under branching logic and creates messy validation boundaries.

   Read the full bite: How do you design a low-cognitive-load wizard and implement it technically?

7. Question 7 of 30

   A product manager insists on a custom component that violates the design system. Which response best articulates the long-term debt cost?

   • aRefuse to ship the feature until the team agrees to a full immediate refactor using the standard component
   • bPresent user churn data showing inconsistency hurts NPS but leave the fix schedule open-ended
   • cEstimate the extra frontend hours for the custom build and warn that inconsistency may confuse users
   • dModel the 3-5x post-launch refactor multiplier, attach a risk matrix, and propose a time-boxed experiment with hard deprecation
   Show the answer

   Answer: d · Model the 3-5x post-launch refactor multiplier, attach a risk matrix, and propose a time-boxed experiment with hard deprecation

   Modeling the 3-5x refactor multiplier, attaching a risk matrix, and proposing a time-boxed experiment reflects the card's four-layer framework for stakeholder translation. Distractor A is tempting because it enforces the design system, but the card flags demanding an immediate full refactor without acknowledging delivery pressure as a red flag.

   Read the full bite: How do you model and articulate long-term design debt cost to stakeholders?

8. Question 8 of 30

   In a mobile checkout flow, why might a designer place a destructive Cancel button at the top-left screen edge rather than near the primary Pay Now button at the bottom center?

   • aBecause edge placement provides infinite effective width in one dimension, enabling fast acquisition while separating it from the primary action to prevent accidental taps.
   • bBecause Fitts's Law states that movement time increases linearly with distance, so distant buttons are always slower regardless of their position.
   • cBecause secondary actions must always be placed outside the thumb zone and sized below minimum touch targets to reduce visual prominence.
   • dBecause fingers are more precise than cursors, allowing smaller targets at screen edges without increasing error rates.
   Show the answer

   Answer: a · Because edge placement provides infinite effective width in one dimension, enabling fast acquisition while separating it from the primary action to prevent accidental taps.

   Screen edges provide infinite effective width in one dimension, making them fast to reach despite distance, and anchoring destructive actions there avoids accidental taps near primary buttons. Distractor A misrepresents Fitts's logarithmic relationship as linear, which is a common misconception.

   Read the full bite: Use Fitts's Law to size and place primary vs secondary mobile actions

9. Question 9 of 30

   When styling a news article, how should line-height and letter-spacing differ between body text and headings?

   • aIncrease letter-spacing on body text to improve word shape recognition, and use generous line-height on headings to prevent overlap.
   • bGive body text at least 1.5 line-height with minimal letter-spacing, and use tighter line-height with slight negative letter-spacing for headings.
   • cSet body text to tight line-height for a compact style and keep default letter-spacing across all elements.
   • dApply the same line-height and letter-spacing scale to body text and headings so the design system stays uniform.
   Show the answer

   Answer: b · Give body text at least 1.5 line-height with minimal letter-spacing, and use tighter line-height with slight negative letter-spacing for headings.

   Body text needs generous vertical rhythm (at least 1.5x) and minimal letter-spacing for comfortable reading, while headings can tolerate tighter values because they are scanned quickly. Option D is a tempting red flag because treating both elements identically confuses vertical rhythm with horizontal spacing and harms readability.

   Read the full bite: Line-height vs letter-spacing: impact on readability and values for body vs headings

10. Question 10 of 30

    When building a modular type scale for a dense B2B dashboard, which approach best balances mathematical consistency with real-world UI constraints?

    • aGenerate a single scale at 16px base and use it unchanged across both mobile and desktop breakpoints
    • bUse a high ratio like 1.414 to maximize heading impact and strictly adhere to every generated value
    • cApply the same major-third ratio used on the marketing site to maintain brand consistency across all products
    • dStart with a low ratio like 1.125, round to even pixels, and manually add smaller steps for metadata tags if needed
    Show the answer

    Answer: d · Start with a low ratio like 1.125, round to even pixels, and manually add smaller steps for metadata tags if needed

    For a dense dashboard, a low ratio like 1.125 prevents extreme jumps, while rounding and manually adding small steps addresses real UI needs that strict modular math often misses. Defaulting to the marketing site's ratio prioritizes brand consistency over content density, which leads to awkwardly large sizes in data-heavy interfaces.

    Read the full bite: How would you establish a modular typographic scale for a design system?

11. Question 11 of 30

    You calculate a 4.499:1 contrast ratio for normal-sized body text. Which action best follows WCAG 2.1 rules and collaborative design practice?

    • aSwitch the text to pure black to guarantee compliance without further discussion.
    • bApprove it, because 4.499:1 rounds up to the 4.5:1 AA threshold.
    • cSuggest increasing the font size to 18 px to qualify for the 3:1 large-text exception.
    • dFlag the failure since WCAG thresholds are strict, then propose a darker tint that preserves the original hue.
    Show the answer

    Answer: d · Flag the failure since WCAG thresholds are strict, then propose a darker tint that preserves the original hue.

    WCAG 2.1 treats 4.5:1 as a strict threshold with no rounding, so 4.499:1 fails; the best practice is to preserve the designer's intent by darkening the tint while keeping hue rather than defaulting to pure black. Option B is a tempting distractor because the value is close, but rounding up is explicitly non-compliant.

    Read the full bite: Assess WCAG AA contrast for light grey text on off-white

12. Question 12 of 30

    When building a full-bleed landing page hero, which combination of techniques best prevents layout shift while optimizing image delivery across devices?

    • aApply the image as a CSS background-image with background-size: cover and serve a single 4K JPEG.
    • bUse a picture element with multiple source tags for art direction, CSS object-fit: cover, and omit width/height attributes to allow fluid scaling.
    • cUse an img tag with HTML width/height attributes, srcset with AVIF/WebP variants, CSS object-fit: cover, and fetchpriority="high".
    • dUse an img tag with a single high-resolution WebP source, object-fit: cover, and rely on CSS width: 100% for layout reservation.
    Show the answer

    Answer: c · Use an img tag with HTML width/height attributes, srcset with AVIF/WebP variants, CSS object-fit: cover, and fetchpriority="high".

    This approach reserves space to eliminate CLS, lets the browser choose the optimal resolution and modern format, and prioritizes the likely LCP element. Option A is a common mistake because background-image sacrifices native responsive selection, accessible alt text, and browser optimizations while a single 4K JPEG wastes mobile bandwidth.

    Read the full bite: How would you optimize and implement a full-bleed responsive hero image?

13. Question 13 of 30

    Why should icons in a developer-facing Figma system use a single flattened path without hardcoded fills?

    • aFlattening paths is required for Figma components to be published
    • bIt reduces the Figma file size enough to speed up the editor noticeably
    • cIt lets the icon inherit color in code via currentColor, supporting theming
    • dHardcoded fills are not exportable as SVG from Figma at all
    Show the answer

    Answer: c · It lets the icon inherit color in code via currentColor, supporting theming

    A single color-agnostic path lets the icon inherit its color through currentColor, so one icon serves multiple themes. Hardcoded fills can be exported but block recoloring; flattening is not required for publishing.

    Read the full bite: Building a scalable icon system in Figma

14. Question 14 of 30

    Which CSS strategy best mirrors a Figma two-tier token system with Light, Dark, and High-Contrast modes?

    • aComponents reference primitive CSS variables directly, using media queries to update primitive values per theme.
    • bCompile separate stylesheets per theme and serve the appropriate file based on the active theme.
    • cInject High-Contrast colors as overrides at the component level after the base Light or Dark theme loads.
    • dSemantic custom properties reference primitive variables and are redefined under theme attribute selectors like [data-theme="dark"].
    Show the answer

    Answer: d · Semantic custom properties reference primitive variables and are redefined under theme attribute selectors like [data-theme="dark"].

    Redefining semantic custom properties under theme selectors preserves the abstraction where components use only semantic tokens, matching Figma's mode behavior. Option A breaks this architecture by letting components bind directly to primitives, creating maintenance debt when brand values change.

    Read the full bite: How would you structure a multi-theme color system in Figma and CSS?

15. Question 15 of 30

    Which workflow best shows a systemic approach to making a Figma component responsive across breakpoints?

    • aApply auto layout to the parent frame, set children to hug or fill, use variants for breakpoints, and resize to test
    • bDuplicate the artboard per breakpoint and manually reposition elements without auto layout or constraints
    • cDesign a detailed desktop version and add Dev Mode annotations for developers to handle responsiveness in code
    • dUse vertical auto layout on the parent and assume elements automatically reflow into columns as the frame widens
    Show the answer

    Answer: a · Apply auto layout to the parent frame, set children to hug or fill, use variants for breakpoints, and resize to test

    The correct approach leverages Figma's native auto layout, hug/fill constraints, and variants to create self-adjusting components, then stress-tests them by resizing. The tempting distractor using only vertical auto layout is wrong because vertical stacks do not automatically reflow into columns without enabling wrap or switching to a horizontal or grid flow.

    Read the full bite: How do you build a responsive Figma component across breakpoints?

16. Question 16 of 30

    Which method best operationalizes Gestalt proximity using Figma Auto Layout and spacing variables for a scalable design system?

    • aAlign all elements to a central baseline and apply equal spacing throughout, treating proximity as a visual alignment principle.
    • bAssign unique spacing values to each component type so cards, buttons, and lists maintain their own distinct gap and padding numbers.
    • cManually nudge elements into position and eyeball the spacing, since proximity is an aesthetic choice rather than a structural rule.
    • dBind a shared t-shirt spacing scale to Auto Layout gap and padding variables, giving related elements smaller gaps and unrelated groups larger ones.
    Show the answer

    Answer: d · Bind a shared t-shirt spacing scale to Auto Layout gap and padding variables, giving related elements smaller gaps and unrelated groups larger ones.

    This is correct because it maps a shared token scale to Auto Layout gap and padding variables to enforce relational spacing that survives content changes. Option B is tempting because custom values feel tailored to each component, but they prevent systematic consistency and break the ability to propagate token updates across the design system.

    Read the full bite: How do you enforce proximity with Figma Auto Layout and spacing variables?

17. Question 17 of 30

    How should you document an asymmetrical layout for engineering handoff to keep it predictable and systematic?

    • aDesign a bespoke grid for each page that encodes the asymmetry directly into the columns
    • bRely on static mockups with manual nudging and let engineers reverse-engineer the relationships
    • cSpecify macro ratios, flex basis, and spacing tokens while preserving an underlying grid reference
    • dProvide redlined mockups with absolute pixel values for every element's position
    Show the answer

    Answer: c · Specify macro ratios, flex basis, and spacing tokens while preserving an underlying grid reference

    The correct approach documents relationship rules such as flex ratios and spacing tokens rather than absolute pixels, preserving a shared grid reference for engineers. Option D is tempting because redlined mockups feel precise, but absolute pixel values prevent responsive scaling and force engineers to reverse-engineer relationships from a static image.

    Read the full bite: How do you apply systematic rules to asymmetrical layouts predictably?

18. Question 18 of 30

    When optimizing a Figma product card with an image, title, price row, and multi-line tags, which approach best reduces nesting depth while preserving responsiveness?

    • aFlatten the card into static frames with manual positioning to eliminate auto layout calculations entirely
    • bDetach all component instances into raw frames to reduce master definition overhead
    • cNest each tag row in separate horizontal auto layouts and use invisible spacer rectangles to align content
    • dReplace the tag container with horizontal auto layout using Wrap, and remove redundant intermediate grouping frames
    Show the answer

    Answer: d · Replace the tag container with horizontal auto layout using Wrap, and remove redundant intermediate grouping frames

    The card states that enabling Wrap avoids separate row containers and that removing redundant grouping frames cuts layer depth and constraint recalculation in half. Option A sacrifices responsiveness, option C increases layer count with spacers, and option B bloats the file with duplicate layers.

    Read the full bite: How do you optimize nested Auto Layout for performance?

19. Question 19 of 30

    You are building a mobile prototype where a list of cards must scroll vertically and be clipped at the viewport edges. What should wrap the list?

    • aA Group, because it supports scroll overflow and clipping for nested layers
    • bA Group, since it applies constraints that govern how nested children resize
    • cA Frame, because it lets you clip content and enable scroll overflow
    • dA Frame, because it automatically clips any content extending past its edges
    Show the answer

    Answer: c · A Frame, because it lets you clip content and enable scroll overflow

    A Frame is correct because it has independent bounds that support Clip content and scroll overflow when child layers exceed its edges. Option A is tempting because both Groups and Frames organize layers, but Groups do not provide bounds-based clipping or scroll overflow.

    Read the full bite: When would you wrap layers in a Frame versus a Group?

20. Question 20 of 30

    What is the most reliable first step to extract exact CSS typography values from a Figma text element?

    • aHold Option and hover over the text to measure its font size and line height
    • bTake a screenshot and use the browser inspector to match the typography visually
    • cSelect the text layer, then check the Properties tab or Dev Mode for exact values
    • dSelect the parent frame and copy its CSS to find the nested text styles
    Show the answer

    Answer: c · Select the text layer, then check the Properties tab or Dev Mode for exact values

    You must select the specific text layer because the Properties tab and Dev Mode display exact typography values only for the selected object. Selecting a parent frame is a tempting but wrong first step because it hides the precise font properties and leads to approximations.

    Read the full bite: How would you inspect a Figma text element for CSS properties?

21. Question 21 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?

    • aNest the text in a vertical Auto Layout frame with hug height, set the parent to hug contents vertically, and use absolute positioning for the image
    • bPlace all elements in a single flat vertical Auto Layout, set the text layers to fixed height, and set the parent to fill container width
    • cNest 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
    • dSet the parent card to fixed height, nest the text with hug height, and set the image to fill width
    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?

22. Question 22 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?

    • aNest the icon in a Group and set horizontal to Right, vertical to Top
    • bSet horizontal to Left and Right and vertical to Top and Bottom
    • cSet horizontal to Right and vertical to Top on the icon inside the modal Frame
    • dSet horizontal to Scale and vertical to Scale
    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?

23. Question 23 of 30

    When architecting a scalable light/dark theme system in Figma using variables and styles, where should the mode-switching logic primarily reside?

    • aIn the team library settings, by publishing separate variable collections for light and dark and toggling between library files.
    • bIn semantic color variables, by aliasing different primitive values per mode and applying those variables to styles.
    • cIn component instances, by overriding every color property individually with mode-specific primitive variables.
    • dIn color styles, by creating mode-aware style definitions that automatically swap values when the theme changes.
    Show the answer

    Answer: b · In semantic color variables, by aliasing different primitive values per mode and applying those variables to styles.

    Semantic variables act as the raw engine for mode switching by aliasing different primitives per context, while styles should consume those variables rather than own the logic. A is a common misconception because Figma styles cannot directly switch modes, and D mirrors the inefficient practice of manually swapping libraries.

    Read the full bite: How would you structure Figma colors for light and dark themes?

24. Question 24 of 30

    Which configuration lets a Figma button with an icon and text automatically resize when the label changes?

    • aUse grid auto layout on the icon and text with a fixed-width button frame
    • bApply horizontal auto layout, set text and frame to hug contents, and use fixed padding
    • cSet the text to fill container and the frame to a fixed width with no auto layout
    • dGroup the icon and text, then manually nudge elements when the label changes
    Show the answer

    Answer: b · Apply horizontal auto layout, set text and frame to hug contents, and use fixed padding

    Horizontal auto layout with hug contents on the text and parent frame lets the button expand or shrink dynamically as the label changes, while fixed padding keeps spacing consistent. Grouping layers and manually nudging them is wrong because the layout breaks as soon as the text is edited, defeating the purpose of a responsive component.

    Read the full bite: How would you use Auto Layout for a button with optional icon?

25. Question 25 of 30

    How does a 16px fixed spacing behave compared with Space between when an Auto Layout toolbar stretches wider?

    • aSpace between simply adds a larger pixel gap between icons, keeping the group left-aligned with extra space on the right
    • bSpace between applies 16px of padding to the outer edges of the frame while leaving the inner gaps unchanged
    • cFixed spacing keeps the 16px gap identical and clusters icons, while Space between pushes the first icon to the left edge and the last to the right edge
    • dFixed spacing distributes icons evenly across the width, while Space between enforces a constant 16px gap regardless of container size
    Show the answer

    Answer: c · Fixed spacing keeps the 16px gap identical and clusters icons, while Space between pushes the first icon to the left edge and the last to the right edge

    Fixed spacing is an absolute value that never changes, so icons remain clustered when the frame grows, while Space between dynamically divides leftover space to push the first and last items flush to the edges. The reversed option is wrong because it swaps the two behaviors—fixed spacing does not distribute items evenly, and Space between does not enforce a rigid pixel gap.

    Read the full bite: Difference between 'Space between' and fixed spacing in Auto Layout

26. Question 26 of 30

    Which same-axis parent-child combination creates a layout conflict because the parent cannot determine available space for the child?

    • aFixed parent containing a Fill child
    • bHug parent containing a Fill child
    • cHug parent containing a Fixed child
    • dFill parent containing a Hug child
    Show the answer

    Answer: b · Hug parent containing a Fill child

    A Hug parent shrink-wraps to its content and has no definite available space, so a Fill child cannot resolve its size, creating a circular dependency. This differs from a Hug parent with a Fixed child, which works because the child declares a concrete dimension that the parent can wrap around.

    Read the full bite: How do Hug, Fill, and Fixed resizing behaviors interact?

27. Question 27 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?

    • aFixed width and fixed height, with the bio set to clip overflow
    • bFill width and fixed height, letting the parent control the size
    • cHug width and hug height, so it adapts to all content automatically
    • dFixed width and hug contents height, with the bio set to fill width and auto height
    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

28. Question 28 of 30

    A notification badge must overlap an avatar inside an Auto Layout frame. What is the best approach?

    • aRemove Auto Layout from the parent and position all elements manually
    • bApply negative margin hacks to pull the badge over the avatar
    • cSet the badge to absolute position so it ignores flow but stays inside the frame
    • dMove the badge outside the Auto Layout frame so it can be placed freely
    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?

29. Question 29 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?

    • aUse horizontal auto layout with wrap on the parent, set container spacing and padding, and configure each tag to hug its contents
    • bNest each row of tags in its own horizontal auto layout frame and stack those rows vertically in the parent
    • cEnable horizontal auto layout with wrap on the parent and set all tags to a fixed width so wrapping occurs at consistent intervals
    • dApply grid layout to the parent and set tags to fill available cells so they expand across columns
    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?

30. Question 30 of 30

    Which method correctly architects a responsive Figma nav bar to preserve component links and handle breakpoint-specific layouts without detaching instances?

    • aUse absolute positioning for all elements across breakpoints to avoid Auto Layout resizing conflicts.
    • bBuild separate desktop and mobile components to isolate responsive behaviors and simplify overrides.
    • cCreate one component set with variants, horizontal Auto Layout with wrap for links, and a nested vertical overlay for mobile.
    • dDuplicate the nav frame per breakpoint and detach instances to edit link visibility and spacing independently.
    Show the answer

    Answer: c · Create one component set with variants, horizontal Auto Layout with wrap for links, and a nested vertical overlay for mobile.

    A single variant-driven component set with Auto Layout preserves maintainability and link propagation across states, whereas creating separate components breaks those links and creates maintenance debt.

    Read the full bite: Structure a responsive nav bar using variants and Auto Layout