Top 30 Intermediate Design & UX 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

   Why should a migration CLI README place a comparison table against alternatives before the detailed configuration reference?

   • aDevelopers evaluating tools need to justify switching costs before they will invest time learning configuration details
   • bTechnical readers prefer to scan alternatives after they have fully mastered the tool's settings
   • cConfiguration options change frequently, so placing them later reduces maintenance burden
   • dComparison tables improve GitHub SEO ranking when placed in the first half of the document
   Show the answer

   Answer: a · Developers evaluating tools need to justify switching costs before they will invest time learning configuration details

   Developers must understand competitive differentiation and justify switching before investing in configuration details, matching the attention-to-trust adoption funnel. Option C raises a valid docs concern but misattributes the ordering rationale, since the sequence serves persuasion rather than maintenance ease.

   Read the full bite: Outline README sections for a migration CLI and explain persuasion

2. Question 2 of 30

   Which approach best demonstrates progressive disclosure applied specifically to UI copy and tooltips?

   • aReserve progressive disclosure for navigation menus while keeping all setting descriptions equally detailed
   • bDisplay all help text inline to minimize clicks and maximize discoverability
   • cReplace tooltips with a single help link to reduce on-screen text
   • dUse short tooltips for common cases and hide advanced details behind clearly labeled expanders or secondary sheets
   Show the answer

   Answer: d · Use short tooltips for common cases and hide advanced details behind clearly labeled expanders or secondary sheets

   Option D correctly applies progressive disclosure by splitting primary tooltips from secondary details, which reduces cognitive load and error rates for novices while keeping experts efficient. Option B is tempting but wrong because dumping all help text inline eliminates clicks at the cost of overwhelming novices with irrelevant details.

   Read the full bite: How would you apply progressive disclosure to UI copy and tooltips?

3. Question 3 of 30

   A team is running a usability study across three two-week sprints. How should this research work be managed in the product backlog?

   • aMaintain one backlog item across all three sprints, marking individual tasks done as they are completed.
   • bAssign the research item to engineers during planning so they can manage recruitment and sessions.
   • cRun the entire study before the first sprint to keep research separate from development work.
   • dOpen a new research story each sprint and close it at sprint end, even if the study is not finished.
   Show the answer

   Answer: a · Maintain one backlog item across all three sprints, marking individual tasks done as they are completed.

   The card emphasizes that research should live as a single backlog item that stays open across sprints while bite-sized tasks are completed, making B correct. Option D is tempting because it follows strict sprint boundaries, but forcing a research story closed at sprint end regardless of study status is explicitly flagged as a common mistake.

   Read the full bite: How does UX research integrate into a two-week agile sprint?

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

5. Question 5 of 30

   Which documentation strategy best protects both users and the business for an API endpoint that triggers irreversible data loss?

   • aInclude a concise 'be careful' note inline within the parameter table to avoid disrupting the page flow.
   • bUse a distinct WARNING admonition that names the hazard, states the consequence, and gives an escape route using direct imperatives.
   • cPlace a CAUTION call-out in a distinct block advising developers to back up data when possible.
   • dPrefix the endpoint with DANGER and enumerate every possible risk to ensure comprehensive legal coverage.
   Show the answer

   Answer: b · Use a distinct WARNING admonition that names the hazard, states the consequence, and gives an escape route using direct imperatives.

   A distinct WARNING admonition following the SAFE method—Signal, Hazard, Consequence, Escape—applies the correct severity level for irreversible data loss and uses direct imperatives that are legally defensible and actionable. Option D is tempting but wrong because DANGER is reserved for life-threatening scenarios, and over-warning desensitizes developers while diluting the impact of truly critical alerts.

   Read the full bite: How would you document a destructive API endpoint safely?

6. Question 6 of 30

   After releasing an MVP export feature, a team wants to know if users can successfully complete exports. Which research approach fits best?

   • aInterviewing users about how they currently share data before the feature existed
   • bMeasuring task success and observing friction while users try the export flow
   • cObserving users in their offices to understand how exported reports fit into workflows
   • dHaving users keep a diary about their overall reporting needs over two weeks
   Show the answer

   Answer: b · Measuring task success and observing friction while users try the export flow

   Once an MVP exists, evaluative research such as usability testing measures task success and solution fit. Observing how reports fit into workflows is a generative method meant to uncover needs before design begins, so it does not validate whether the new export flow actually works.

   Read the full bite: Generative versus evaluative research: when to use each

7. Question 7 of 30

   Which approach is most effective for securing leadership buy-in when proposing a new design system?

   • aAudit current inefficiencies with metrics, tailor benefits to each stakeholder's priorities, and contrast total investment including maintenance against projected savings.
   • bLead with visual consistency and brand harmony, supported by examples from industry-leading companies.
   • cPropose a pilot for high-traffic components and delay financial projections until after measuring team adoption.
   • dEmphasize reduced design debt and faster shipping in a single pitch to all leaders, estimating one designer can build the core system in three months.
   Show the answer

   Answer: a · Audit current inefficiencies with metrics, tailor benefits to each stakeholder's priorities, and contrast total investment including maintenance against projected savings.

   The card stresses that a credible business case requires audited inefficiencies, stakeholder-specific pitches, and honest costing that includes maintenance. Option D is tempting because it mentions business benefits, but it ignores stakeholder segmentation and severely underestimates the required investment, which destroys credibility with leadership.

   Read the full bite: How would you build a design system business case for leadership?

8. Question 8 of 30

   Which conventional commit best documents a fix for a date sorter that incorrectly assumed US locale formats?

   • afix: resolve date sorting bug
   • bfix(date-parser): date sorting was fixed for non-US formats with no additional body
   • cfix(date-parser): handle locale-aware date sorting with body noting the previous hardcoded US locale assumption
   • dfeat(date-parser): add locale-aware date sorting with body describing browser locale detection
   Show the answer

   Answer: c · fix(date-parser): handle locale-aware date sorting with body noting the previous hardcoded US locale assumption

   Option C correctly uses the fix type and date-parser scope, an imperative subject, and a body that explains the root cause to prevent future regressions. Option D is a tempting distractor because the change does add locale logic, but feat signals a minor SemVer bump and misrepresents a bug patch.

   Read the full bite: Write a conventional commit for a non-US date sorting bug

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

10. Question 10 of 30

    In a multi-platform design system using the W3C DTCG format, what is the primary purpose of aliasing semantic tokens to core tokens?

    • aTo ensure all platforms compile tokens into identical CSS custom property names
    • bTo prevent designers from editing core brand values directly in design tools
    • cTo reduce maintenance overhead by updating a single core value that propagates across themes and platforms
    • dTo create separate token files for each platform so engineers can customize values independently
    Show the answer

    Answer: c · To reduce maintenance overhead by updating a single core value that propagates across themes and platforms

    Aliasing establishes relationships where semantic and theme tokens reference a single core value, so a brand update automatically propagates across all platforms and themes without duplicated source files. Distractor D is tempting because teams often assume each platform needs its own token file, but that approach creates drift and maintenance overhead that aliasing is specifically meant to prevent.

    Read the full bite: What are design tokens and why standardize them?

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

12. Question 12 of 30

    Which metric pairing best demonstrates that a design system is accelerating product delivery and justifying continued investment?

    • anpm download growth and documentation page views
    • bDesigner onboarding completion and manual quarterly component audits
    • cHigh product-team adoption and low design-to-code drift
    • dGitHub star count and Figma library activation rate
    Show the answer

    Answer: c · High product-team adoption and low design-to-code drift

    The card explicitly states that high adoption paired with low design-to-code drift correlates with faster delivery and fewer regressions, making it the strongest ROI signal. Option B is tempting because governance sounds rigorous, but the card flags manual audits as unsustainable and warns against measuring only designer adoption while ignoring engineering consumption.

    Read the full bite: What metrics measure design system success and adoption?

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

14. Question 14 of 30

    When merging anonymous analytics events with CRM data to auto-segment users by persona, what identity handling step best distinguishes a robust architecture from a fragile one?

    • aBuild a golden record from CRM data first, then apply ML clustering on behavioral signals separately before attempting any cross-source joins
    • bDirectly join the analytics and CRM tables on email address and discard all anonymous events to prevent null matches
    • cLoad CRM snapshots as the primary table and append only post-authentication clickstream events that contain a matching email to reduce latency
    • dIngest both sources into common storage, then stitch anonymous IDs to CRM identifiers using deterministic or probabilistic matching while maintaining confidence scores
    Show the answer

    Answer: d · Ingest both sources into common storage, then stitch anonymous IDs to CRM identifiers using deterministic or probabilistic matching while maintaining confidence scores

    The correct answer treats identity resolution as a first-class problem by linking anonymous and known IDs with confidence scoring, preserving pre-authentication behavior. Option B is the most tempting distractor because joining on email seems straightforward but ignores anonymous users, data quality issues like typos, and merge conflicts.

    Read the full bite: How to merge analytics and CRM data to auto-segment users by persona

15. Question 15 of 30

    Which evaluation sequence best balances accuracy, latency, and robustness when personalizing a homepage hero by industry in real time?

    • aRequire user login before showing any hero, use IP lookup only to validate profile data, and block rendering until the segment is confirmed.
    • bCheck the user profile industry first, then enrich unknown users via IP or domain, then infer from behavior, and serve a default hero if signals are absent or time out.
    • cRun a deep-learning classifier on behavioral data first, then check the user profile, then query third-party IP enrichment, with no fallback if all signals fail.
    • dPrompt every visitor with an industry survey modal, cache the response for one day, and skip third-party enrichment to avoid privacy compliance.
    Show the answer

    Answer: b · Check the user profile industry first, then enrich unknown users via IP or domain, then infer from behavior, and serve a default hero if signals are absent or time out.

    Option B follows the highest-confidence-first hierarchy (explicit short-circuits implicit, which short-circuits inference) and includes a critical fallback for latency or missing data. Option C exemplifies the common anti-pattern of over-engineering with deep learning and failing to define a default state.

    Read the full bite: Design backend logic for personalized hero by industry

16. Question 16 of 30

    A team running a six month diary study needs to link the same participant's data across sessions, so they generate each participant's ID by taking an unsalted SHA-256 hash of their email address and store only that hash. What is wrong with this approach?

    • aAn unsalted hash of a guessable input like an email is trivially reversible by precomputing hashes for common emails, unlike a keyed HMAC with a separately secured key
    • bSHA-256 is considered deprecated, and the team should switch to MD5 for generating participant identifiers instead
    • cNothing is wrong. An unsalted hash is mathematically irreversible, so this counts as full anonymization and the data falls outside GDPR
    • dThe approach is fine for pseudonymization, but the team also needs a separate signed consent form specifically for the hashing step
    Show the answer

    Answer: a · An unsalted hash of a guessable input like an email is trivially reversible by precomputing hashes for common emails, unlike a keyed HMAC with a separately secured key

    Because email addresses are guessable, an attacker can precompute hashes for likely emails and match them against the stored value, so an unsalted hash offers little protection. A keyed hash such as HMAC, with the key held separately and access controlled, is what actually secures a stable pseudonym, and the result is still pseudonymization, not the irreversible anonymization the third option claims.

    Read the full bite: Anonymization vs pseudonymization and key handling

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

18. Question 18 of 30

    Which architectural approach best demonstrates a production-ready, polite, and legally defensible competitor sitemap scraper for extracting H1 tags and word counts?

    • aUse an async client with retry logic, parse HTML with regex to minimize dependencies, enforce rate limits only after receiving HTTP 429 errors, and defer legal review until the dataset is complete.
    • bUse an async client with capped concurrency and exponential backoff, handle sitemap index files with namespace-aware XML parsing, extract H1 and word count with a lenient DOM parser, enforce rate limits, honor robots.txt, and seek legal review before commercial use.
    • cUse an async client with unlimited workers for speed, parse flat sitemap files while ignoring sitemap indexes, skip deduplication to reduce complexity, and treat a public sitemap as implicit commercial-use license.
    • dUse an async client with retry logic, parse sitemaps with a standard XML parser that ignores namespaces, extract H1 with a DOM parser, and omit proactive rate limiting in favor of dynamic backoff only when receiving 429 responses.
    Show the answer

    Answer: b · Use an async client with capped concurrency and exponential backoff, handle sitemap index files with namespace-aware XML parsing, extract H1 and word count with a lenient DOM parser, enforce rate limits, honor robots.txt, and seek legal review before commercial use.

    Option B is correct because it combines throttled async fetches, proper sitemap and HTML parsing, proactive rate limiting, robots.txt compliance, and legal review. Option D is tempting because it includes async retries and DOM parsing, but it fails to handle XML namespaces or proactively rate-limit, which risks breaking on sitemap indexes and overwhelming the target server.

    Read the full bite: Build a competitor sitemap scraper for H1 and word count

19. Question 19 of 30

    When designing a pipeline to discover unknown pain-point categories from thousands of unstructured reviews, which sequence best ensures valid grouping and reliable severity ranking?

    • aFeed raw reviews directly into an LLM for summarization, then rank the most frequent terms as the top pain points.
    • bTokenize and remove stopwords, then run sentiment analysis on the full corpus before grouping reviews into predefined product areas.
    • cDeduplicate and normalize the corpus, cluster to discover themes, then apply sentiment analysis within each cluster to rank by severity.
    • dApply supervised classification with a predefined taxonomy, then count negative keywords per class to rank issues.
    Show the answer

    Answer: c · Deduplicate and normalize the corpus, cluster to discover themes, then apply sentiment analysis within each cluster to rank by severity.

    The correct sequence matches the card's recommended lifecycle: preprocess to remove noise and duplicates, use unsupervised clustering to discover emergent themes since categories are unknown, and score sentiment within each cluster to rank pain points by frequency and severity. Option A is a tempting distractor because LLMs are popular, but the card flags jumping straight to summarization without cleaning as a red flag that yields unreliable, unvalidated output.

    Read the full bite: Outline an NLP pipeline to categorize reviews and identify pain points

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

21. Question 21 of 30

    When handling a GDPR erasure request, what is the correct way to update aggregated analytics dashboards derived from the user's data?

    • aMask the user's identity in the dashboard UI while preserving their data in the aggregates
    • bSubtract the user's contributions from each displayed aggregate and decrement related counters
    • cIssue a hard delete in the primary database and rely on the next scheduled ETL run to update figures
    • dReprocess the underlying data pipeline to exclude the user and rebuild all affected metrics
    Show the answer

    Answer: d · Reprocess the underlying data pipeline to exclude the user and rebuild all affected metrics

    The card states that aggregated dashboards must be fixed by reprocessing the underlying pipeline or using differential privacy, because simple subtraction fails for complex metrics like averages and funnels. Option B represents the common misconception of manually adjusting aggregates, which does not reliably remove the user's influence from derived metrics.

    Read the full bite: How do you fulfill a GDPR erasure request across data stores?

22. Question 22 of 30

    A participant revokes consent two months after granting it. How should a compliant system handle this?

    • aDelete the original consent row and remove all associated research data
    • bSet a mutable boolean flag on the participants table to false and cascade to APIs
    • cUpdate the existing consent record in place to status revoked with a new timestamp
    • dAppend a new revocation event to the immutable ledger while preserving the original grant
    Show the answer

    Answer: d · Append a new revocation event to the immutable ledger while preserving the original grant

    Regulators require proof of what the user saw and when, so the original grant must remain intact while revocation is appended as a new event. Updating in place or using boolean flags destroys the audit trail and violates compliance requirements.

    Read the full bite: Design a centralized consent platform: core components and database schema

23. Question 23 of 30

    Why is a W3C-compliant JSON file preferred over Figma or CSS as the single source of truth in a cross-platform token pipeline?

    • aFigma and CSS are not version-controlled artifacts and CSS is platform-specific
    • bCSS variables lack support for color values on mobile platforms
    • cStyle Dictionary requires JSON input to generate Swift enums for iOS
    • dJSON files can be edited directly by designers without engineering involvement
    Show the answer

    Answer: a · Figma and CSS are not version-controlled artifacts and CSS is platform-specific

    The correct answer captures the governance requirement that the source of truth must be version-controlled and platform-agnostic, which Figma and CSS cannot guarantee. Distractor D is tempting because Style Dictionary is part of the recommended pipeline, but JSON is chosen for immutability and cross-platform neutrality, not merely because the build tool accepts it.

    Read the full bite: Design token pipeline serving Web, iOS, and Android

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

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

26. Question 26 of 30

    Why do many teams map semantic t-shirt-size spacing tokens onto an underlying numeric base-unit grid rather than choosing only one approach?

    • aIt lets designers use arbitrary values outside the scale
    • bIt eliminates the need to define any concrete pixel values at all
    • cIt gives readable, intent-based names backed by predictable, grid-aligned math
    • dIt guarantees the layout works without responsive breakpoints
    Show the answer

    Answer: c · It gives readable, intent-based names backed by predictable, grid-aligned math

    Combining them keeps the clarity of named intent while the numeric base ensures consistent, composable alignment. The named tokens still resolve to concrete values, and a scale constrains rather than permits arbitrary spacing.

    Read the full bite: Choosing a spacing scale for a design system

27. Question 27 of 30

    When architecting a single application to serve multiple distinct brand voices, which pattern best prevents operational sprawl?

    • aStore brand copy in JSON files within the repository and import them into shared components
    • bExtend a monolithic CMS with tenant-specific page templates that handle both content and rendering
    • cMaintain separate frontend repositories per tenant so each brand can customize layouts independently
    • dUse a headless CMS with tenant-scoped content spaces and resolve brand voice via domain or header
    Show the answer

    Answer: d · Use a headless CMS with tenant-scoped content spaces and resolve brand voice via domain or header

    A headless CMS with tenant isolation allows copy changes without code releases and keeps UI components brand-agnostic. Storing copy in repository JSON files seems like separation but still forces a deployment for every text tweak and lacks cross-tenant governance.

    Read the full bite: How would you architect a white-label content system for multiple brand voices?

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

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

30. Question 30 of 30

    You need to add a forbidden-word check to a React app's CI pipeline. Which approach best prevents user-facing policy violations while keeping the signal-to-noise ratio low?

    • aExtract string literals from a framework-specific user-facing hook, check against tiered rules with allowlists, and run as a fast PR annotation job.
    • bAdd a mandatory PR checklist asking developers to confirm no forbidden words were added, bypassing the check for internal identifiers.
    • cGrep all source files for forbidden terms and fail the build on any match, requiring content team approval to override.
    • dScan the repository post-deployment and create tickets for the editorial team to review flagged strings within 48 hours.
    Show the answer

    Answer: a · Extract string literals from a framework-specific user-facing hook, check against tiered rules with allowlists, and run as a fast PR annotation job.

    Option A is correct because it targets only user-facing strings via AST-aware extraction, uses severity tiers and allowlists to control noise, and gates pull requests with fast inline feedback. Option C is a tempting distractor because grepping all source files sounds thorough, but it cannot distinguish UI text from variable names or comments, generating false positives that train teams to ignore the check.

    Read the full bite: How would you automate forbidden-word checks in CI/CD?