Design Systems
204 bites tagged Design Systems — interview questions with model answers, and 60-second explainers.
Accessible composite TextField component
Associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input. accessible composition and prop forwarding. a label not tied to the input, or swallowing native props.
Customize a Button without !important
Expose CSS custom properties as a styling API, accept className or style overrides, keep internal selectors low specificity so overrides win cleanly. designed-in customization. reaching for !important.
Designing a Card component API
Simple props for title and image, but children or slots for arbitrary content instead of a string prop, keeping it composable. clean component API design. passing HTML as a string or via dangerouslySetInnerHTML.
Modeling responsive design tokens
Model a token as a breakpoint-to-value map, transform into a base custom property redefined in media queries, components use one var per viewport. tokens that vary by breakpoint. one token per breakpoint.
Light and dark themes with design tokens
A shared primitives file plus per-theme semantic files, transformed into custom properties scoped by selector, components read the semantics. token file structure for two themes. duplicated stylesheets or hardcoding.
Architect themes on a token foundation
Separate primitive tokens from semantic alias tokens that themes redefine, emit semantics as custom properties per theme scope, components use only semantics. layered token architecture. components reading primitives.
Versioning a design system library
Monolithic versioning is simple and coherent but couples unrelated changes; independent versioning gives granular upgrades but adds tooling complexity. release strategy tradeoffs. claiming one is universally correct.
Support a one-off that deviates from the system
Offer sanctioned escape hatches like custom-property overrides, scope the one-off to the app not the library, track it for promotion or removal. balancing flexibility with system integrity. forking core components.
Accessibility built into a Modal component
Trap focus in the modal, return focus on close, escape to dismiss, role dialog with aria-modal and a labelled title, inert background. baking a11y into components. leaving a11y to consumers or only adding role=dialog.
Roll out a design system color change
Update the token source, rebuild outputs, version and publish, bump the app's dependency, verify contrast and visual regressions. end-to-end change management. editing the hex in components or shipping unversioned.
Component versus pattern in a design system
A component is a single reusable UI building block; a pattern is a documented way of composing components to solve a recurring problem. vocabulary precision. using the two terms interchangeably.
What are design tokens?
Platform-agnostic name-value pairs for design values, transformed into CSS variables or platform code, consumed by components by name. tokens as named design decisions. equating a token with a raw hex used inline.
Purpose of a design system for developers
A single source of truth of reusable components and tokens that ensures consistency, speeds delivery, and centralizes accessibility. why design systems exist. calling it just a component library or a style guide PDF.
Build a scalable Sass theming system
Store themes as maps, emit values as CSS custom properties so runtime switching needs no recompile, generate per-theme scopes via mixins. scalable theme architecture in Sass. duplicating whole stylesheets per theme.
Utility-first versus semantic CSS trade-offs
Utility-first gives speed, small purged bundles, and no naming overhead but verbose markup; semantic BEM gives readable markup and clear boundaries but naming and dead-CSS risk. balanced CSS architecture judgment.
Should a component own its outer spacing?
Components own internal padding but should not own external margin; the parent or layout owns spacing between siblings, keeping components context-independent. spacing ownership in design systems.
Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Design Token Naming Conventions
Design token names encode meaning through a consistent, layered structure so values stay portable across themes and platforms. A clear convention like category-type-item-state turns scattered constants into a self-documenting, predictable system that…
Design the public API for a reusable Button component
Variant, size, disabled, type props; forward click; slots for content/icons; no router/form coupling. Minimal stateless API design favoring composition. route props, onSubmit handlers, class/style escape hatches.
8 Free Personas Spot Accessibility Issues in Design
8 free accessibility personas shift designer burden from memorizing WCAG to recognizing exclusion during work. Applying Nielsen's heuristic #6 to creators means fewer bad websites from good designers. Add them to your design critiques this sprint.
How would you structure design and Figma for phased rollout?
This tests whether you can architect Figma for parallel flag rollouts. A strong answer covers branch pages, versioned components tied to code flags, and a cleanup timeline. A red flag is a single-file replacement or big-bang launch with no coexistence plan.
Describe your process for preparing a high-fidelity Figma file for developer handoff
Tests operationalizing the design-engineering boundary. Strong answers cover file structure, auto-layout tokens, responsive annotations, all UI states, and exported assets with naming conventions.
Build a Figma toggle switch that controls element visibility using variables
Tests prototype state management with Figma variables instead of frame duplication. A strong answer names a boolean variable, binds it to layer visibility, and wires an On click Set variable action. Red flag: suggesting frame duplication over variable state.
Monolithic or multiple libraries for cross-platform design system?
This tests cross-platform design system architecture. Pick multiple interconnected libraries, centralize tokens in a shared primitive layer, and branch platform components downstream. Red flag: one monolithic file ignoring native rendering constraints.
Get Design Systems bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.