Top 30 Intermediate 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

   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?

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

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

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

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

6. Question 6 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

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

8. Question 8 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

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

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

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

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

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

14. Question 14 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

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

16. Question 16 of 30

    When building a scalable Figma design system, why should a single brand hex color be stored as a variable rather than a color style?

    • aVariables can hold gradients, multiple fills, and blend modes, whereas color styles are limited to solid hex values.
    • bVariables are designed for single raw values and enable global updates across files, plus modes for future themes like dark mode.
    • cThe safest approach is to select every component and change the fill manually to avoid relying on library updates.
    • dColor styles cannot be published to a team library and do not support global updates across multiple files.
    Show the answer

    Answer: b · Variables are designed for single raw values and enable global updates across files, plus modes for future themes like dark mode.

    Variables are architected for single raw hex values and support modes for future theming, while color styles are meant for composite fills like gradients. Option C is tempting because manually updating every component feels cautious, but it abandons token-based propagation and is explicitly flagged as an anti-pattern in scalable systems.

    Read the full bite: What is the most efficient way to update a brand color globally?

17. Question 17 of 30

    When setting up a Smart Animate transition, which practice ensures a button smoothly tweens its width and corner radius between two frames?

    • aKeeping the button in the same group hierarchy with identical paths
    • bApplying matching auto layout settings and pixel-perfect alignment
    • cConverting the button to a raster image in both frames
    • dNaming the button layer identically in both frames and using compatible types
    Show the answer

    Answer: d · Naming the button layer identically in both frames and using compatible types

    Smart Animate matches layers by exact name across frames and interpolates properties like width and corner radius only between compatible types. Identical hierarchy and auto layout are not required, and raster images cannot morph vector properties.

    Read the full bite: Explain Figma Smart Animate's core principle and layer matching requirements

18. Question 18 of 30

    When building a reusable interactive checkbox in Figma, which approach correctly handles state transitions between checked and unchecked variants?

    • aCreate a component set but manage all prototype connections at the page level for each instance
    • bCreate separate components for each state and use Navigate to when transitioning between them
    • cDuplicate the frame for every state combination and draw individual prototype connections between them
    • dBuild a component set with variants and wire Change to actions using On click and While hovering triggers
    Show the answer

    Answer: d · Build a component set with variants and wire Change to actions using On click and While hovering triggers

    A component set with Change to actions embeds interactions directly in the component so every instance automatically carries them. Duplicating frames creates unmaintainable noodle soup, Navigate to forces full frame transitions rather than local variant swaps, and page-level management defeats the purpose of reusable interactive components.

    Read the full bite: Build a reusable checkbox with unchecked, checked, and hover states

19. Question 19 of 30

    In Figma, how do you configure a parent frame so its tall content scrolls while the header and footer stay fixed in place?

    • aCreate multiple frames showing different scroll positions and link them with drag interactions
    • bGroup the header, content, and footer into one layer, enable Clip content, and set the group to vertical overflow
    • cEnable vertical overflow on the parent frame, set the header to Stick to top, and leave the footer as Scroll with parent
    • dEnable Clip content and vertical overflow on the parent frame, set the header and footer to Fix position when scrolling, and leave the content as Scroll with parent
    Show the answer

    Answer: d · Enable Clip content and vertical overflow on the parent frame, set the header and footer to Fix position when scrolling, and leave the content as Scroll with parent

    Option D is correct because Clip content masks the overflow, vertical overflow enables native scrolling, and Fix position when scrolling pins the chrome while the content layer remains Scroll with parent. Option C is tempting because Stick to top sounds like it fixes the header, but it actually makes the element scroll until it hits the top and then freeze, which is wrong for a persistent header.

    Read the full bite: How would you prototype fixed header, footer, and scrollable content?

20. Question 20 of 30

    You must update a shared Figma component in a way that alters its default appearance. Which approach best demonstrates operational discipline?

    • aAllow each consuming team to maintain its own copy of the library file to avoid breaking changes
    • bPublish the change immediately and message the team in Slack afterward with no formal versioning
    • cMerge the branch into main right after design review and let teams detach instances if the change breaks their screens
    • dCreate a Figma branch, schedule a major version bump, publish a changelog with migration steps, and align with engineering's release
    Show the answer

    Answer: d · Create a Figma branch, schedule a major version bump, publish a changelog with migration steps, and align with engineering's release

    Option D correctly applies branching, a major version bump, a changelog with migration steps, and engineering alignment. Option C is tempting because it includes branching, but merging immediately without scheduling and advising teams to detach instances shows a lack of operational discipline.

    Read the full bite: How do you handle versioning and breaking changes in a shared library?

21. Question 21 of 30

    When implementing focus trapping inside a modal dialog, which keyboard behavior is required by the WAI-ARIA dialog pattern?

    • aTab cycles forward but Shift+Tab moves focus outside the modal to the browser chrome.
    • bTab moves forward through focusable elements and wraps from last to first, while Shift+Tab moves backward and wraps from first to last.
    • cTab and Shift+Tab both cycle through elements without wrapping, stopping at the modal boundaries.
    • dTab moves to the close button at the end of the sequence, while Shift+Tab returns to the trigger element.
    Show the answer

    Answer: b · Tab moves forward through focusable elements and wraps from last to first, while Shift+Tab moves backward and wraps from first to last.

    The pattern requires Tab to cycle forward and wrap from last to first, and Shift+Tab to cycle backward and wrap from first to last, preventing escape into the inert background. Option A represents the common mistake of letting Shift+Tab break the trap, while B leaves users stuck at the boundaries.

    Read the full bite: Design the keyboard interaction flow for a modal dialog

22. Question 22 of 30

    Why is documenting focus order in Figma important even when the visual layout already looks logical?

    • aScreen readers ignore visual layout and read elements alphabetically
    • bFigma cannot render forms unless focus order is explicitly defined
    • cCSS positioning can desync visual order from DOM order, so source order must be specified
    • dFocus order only affects mouse users, who follow the visual flow
    Show the answer

    Answer: c · CSS positioning can desync visual order from DOM order, so source order must be specified

    Because CSS can reorder elements visually without changing DOM order, designers must document the intended source order so keyboard and screen-reader traversal stays logical. Focus order serves keyboard and assistive-tech users, not mouse users.

    Read the full bite: Designing and documenting focus order in Figma

23. Question 23 of 30

    Which method most effectively scales WCAG 2.2 target-size compliance across a Figma component library?

    • aSet all interactive layers to 44x44px to align with mobile accessibility guidelines
    • bApply 24px minimum width and height constraints to base components and use auto-layout padding
    • cRequire designers to manually measure and annotate target sizes before each handoff
    • dDocument the 24px rule in a team wiki and rely on developers to catch violations in code
    Show the answer

    Answer: b · Apply 24px minimum width and height constraints to base components and use auto-layout padding

    Base components with 24px minimum constraints and auto-layout padding bake the WCAG 2.2 standard into the design system itself, making compliance automatic. The 44x44px option is a distractor because that size reflects the older iOS Human Interface Guidelines, not the WCAG 2.2 Level AA requirement.

    Read the full bite: How do you enforce WCAG touch target minimums in Figma?

24. Question 24 of 30

    When building a sortable data table, which combination of techniques best serves users with color blindness, screen readers, and motor impairments?

    • aUse color-coded arrow icons to show sort direction, implement each header as a clickable div with a custom keydown handler, and rely on CSS-generated icons without ARIA annotations.
    • bWrap header text in a button filling the full cell, use shape-differentiated icons such as diamonds and triangles, and place aria-sort only on the currently sorted header.
    • cApply aria-sort to every sortable header, use triangle icons that differ only by color, and keep buttons sized to the text width.
    • dRely on CSS-generated arrows that rotate to indicate direction, use span elements with tabindex="0", and add visually hidden text instead of aria-sort.
    Show the answer

    Answer: b · Wrap header text in a button filling the full cell, use shape-differentiated icons such as diamonds and triangles, and place aria-sort only on the currently sorted header.

    Option B is correct because it addresses all three accessibility requirements: full-cell buttons for motor impairments, shape-differentiated icons for color independence, and aria-sort on only the active header for screen readers. Option C is a common distractor because it includes aria-sort and native buttons, yet misapplies the attribute to all headers and relies on color alone, failing both color-blind users and proper state semantics.

    Read the full bite: How do you indicate sort state accessibly in a data table?

25. Question 25 of 30

    You are translating a Figma Auto Layout frame that has 24px container padding and 12px spacing between items. Which CSS approach preserves the layout semantics in Flexbox?

    • aSet margin: 12px on each child and padding: 24px on the container
    • bSet justify-content: space-between and padding: 24px on the container
    • cSet padding: 24px and gap: 12px on the flex container
    • dSet gap: 24px on the container and padding: 12px on each child
    Show the answer

    Answer: c · Set padding: 24px and gap: 12px on the flex container

    Figma Auto Layout spacing maps to the CSS gap property on the flex container, while container padding maps to CSS padding on that same container. Using margin on children is an outdated anti-pattern that breaks when content changes, and space-between controls distribution, not fixed item spacing.

    Read the full bite: Translate Figma Auto Layout padding, direction, and spacing to Flexbox

26. Question 26 of 30

    Which approach best translates Figma variable collections and modes into maintainable CSS?

    • aUse arbitrary CSS variable names that differ from Figma to keep stylesheets shorter
    • bMirror Figma collection names as semantic CSS custom properties and scope mode overrides under data attributes
    • cCreate separate component variants for each theme to match Figma modes
    • dExport raw hex codes from Figma and paste them directly into component CSS
    Show the answer

    Answer: b · Mirror Figma collection names as semantic CSS custom properties and scope mode overrides under data attributes

    Mirroring Figma collections as semantic CSS custom properties and scoping modes via data attributes preserves the token abstraction and enables scalable theme switching. Pasting raw hex codes directly into components destroys the hierarchy and forces manual updates everywhere.

    Read the full bite: How would you map Figma Variables to CSS Custom Properties for tokens?

27. Question 27 of 30

    Which strategy best translates Figma size, type, and hover variants into a production-ready component?

    • aExtract exact pixel values and hex codes from the variant panel and hardcode them as literal styles
    • bMap size and type to semantic props backed by design tokens and handle hover internally via CSS
    • cCreate separate component files for each variant permutation to preserve the Figma structure exactly
    • dExpose hover and pressed as top-level boolean props so parent components can toggle visual states explicitly
    Show the answer

    Answer: b · Map size and type to semantic props backed by design tokens and handle hover internally via CSS

    Mapping structural variants to semantic, token-backed props captures design intent without brittle hardcoding, while CSS pseudo-classes keep interaction logic encapsulated and accessible. Exposing hover as a manual prop is a tempting distractor that pushes state complexity to consumers and breaks expected interaction patterns.

    Read the full bite: How do Figma variants influence component code structure?

28. Question 28 of 30

    When deriving CSS breakpoints from a Figma file, what indicates the correct width threshold for a media query?

    • aThe exact pixel width of each artboard copied directly into max-width values
    • bThe midpoint between the narrowest and widest frame variants in the design
    • cThe standard device widths such as 768px or 1024px commonly used in frameworks
    • dThe points where auto layout direction, wrap toggles, or resizing rules change behavior
    Show the answer

    Answer: d · The points where auto layout direction, wrap toggles, or resizing rules change behavior

    Responsive intent lives in Figma's structural behavior shifts, which map to CSS properties like flex-direction and flex-wrap, so breakpoints should follow those logic changes rather than arbitrary defaults. Option C is a common misconception because standard device breakpoints ignore the design's actual layout system, while option A fails to account for fluid behavior between breakpoints.

    Read the full bite: How do you identify responsive breakpoints in Figma for CSS?

29. Question 29 of 30

    What happens when Designer A edits a shared color style while Designer B is actively using it in the same Figma file?

    • aIt updates instantly on every linked object across the file
    • bDesigner B must manually re-link components to receive the updated style
    • cFigma creates a temporary branch so Designer B can finish without interruption
    • dThe change is queued and applies only after Designer B deselects the object
    Show the answer

    Answer: a · It updates instantly on every linked object across the file

    Figma propagates style edits globally and immediately to every linked object, which is why uncoordinated changes surprise other editors. Distractor A is wrong because Figma does not create automatic branches or isolate edits per user.

    Read the full bite: What conflicts occur when two designers edit shared styles simultaneously?

30. Question 30 of 30

    Which approach correctly uses Figma variables to enable Submit only after a terms checkbox is checked?

    • aDuplicate the screen into checked and unchecked frames, wire the checkbox to swap between them, and enable Submit only on the checked frame.
    • bCreate a boolean variable toggled by the checkbox, add a conditional action to the Submit button that checks the variable before navigating, and bind the button's opacity to the same boolean.
    • cToggle a boolean variable on checkbox click and bind the Submit button's opacity to it, then use a regular On click interaction on Submit to navigate without adding a conditional check.
    • dRely on component variants alone by swapping the checkbox between checked and unchecked variants on click to control the Submit button's enabled state.
    Show the answer

    Answer: b · Create a boolean variable toggled by the checkbox, add a conditional action to the Submit button that checks the variable before navigating, and bind the button's opacity to the same boolean.

    The correct workflow requires a boolean variable, a conditional action on Submit that verifies the variable is true before navigating, and visual binding for feedback. Option C is tempting because it uses a variable and visual binding, but without the conditional check the Submit button would still fire when clicked even while appearing disabled.

    Read the full bite: How would you conditionally enable Submit after checking a terms checkbox?