Everything in Design Systems, page 5
Designing a multi-step wizard form pattern
A wizard controller owns step index and shared data, each step validates itself and reports up, accumulated data persists across steps.
Architecting a composable DataTable API
Separate a headless data/state core from rendering, use a column-definition config with custom cell renderers, expose composition over dozens of flags.
The slots pattern for a PageLayout component
Slots are named insertion points so a layout owns structure while consumers fill header, sidebar, and main, via named props or compound subcomponents.
Decoupling Form state from its Field components
Form holds values, errors, and status in context, Fields self-register and read/write via a hook, validation composes per field.
Designing a Modal with controlled open state
Parent owns isOpen and onClose, portal renders content with focus trap, children for static content, render prop when content needs modal state.
Designing a responsive Grid with breakpoint props
Accept per-breakpoint column props, map them to CSS Grid and media queries or container queries, expose a gap prop.
Building a flexible Card with optional content
Use optional props or named slots for image, title, and text, conditionally render present ones, and prefer composition for ordering.
Composing Input and Button into a SearchForm
Wrap Input and Button in a form, expose value/placeholder props, emit onSearch on submit, keep it controlled.
Headless components and a headless Combobox
A headless component owns state, logic, and accessibility but renders no UI, exposing state and prop-getters so consumers supply markup.
Architecting global and local theming with context
A top-level provider supplies global tokens, nested providers merge local overrides, components read the nearest theme, often backed by CSS variables.
Choosing a spacing scale for a design system
A numeric base-grid gives predictable math, semantic t-shirt names give readable intent, often combine them.
Component Stability Index
A component stability index is a maturity signal that tells consumers how safe a design-system component is to use, from experimental to stable to deprecated, setting expectations about API churn and supporting confident adoption decisions.
Automated Release Pipeline
An automated release pipeline turns merged design-system changes into published, versioned packages without manual steps, using semantic versioning and changelogs so consumers can upgrade safely and the team ships small changes frequently and reliably.
Structuring color tokens for a new app
Primitive palette, semantic role tokens, optional component tokens, theming benefit.
A simple automatable metric for dev-time savings
Component coverage or cycle time, gathered automatically, compared across adoption levels.
Framework-agnostic components across React, Vue, Angular
Web components for one core, framework wrappers for ergonomics, codegen as an alternative, with their costs.
Documentation for a new Card component
Usage guidance and do/don't, variants, accessibility, code examples, composition.
Design tokens for multi-brand button theming
Tokens as named design decisions, primitive-versus-semantic layers, per-brand themes mapping semantic to primitive.
End-to-end process for a Modal props API break
Justify and design the change, additive rollout with deprecation, major release plus codemod, comms and adoption tracking.
Measuring designer efficiency from Figma data
Library component usage and detach rates from Figma, time-to-mockup, override frequency via the API.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles