Intermediate everything in Design Systems, page 3
Bundling a library for tree-shaking and multiple formats
Externalize peers, emit ESM and CJS, preserve modules for tree-shaking, set sideEffects false, ship types.
Releasing a breaking change without forcing upgrades
Ship a major bump, keep the old major published, document migration, automate with Changesets.
Monorepo vs polyrepo for a design system
Atomic cross-package changes and shared tooling versus build orchestration, caching, and versioning complexity.
Documenting component anti-patterns and don'ts
Paired do/don't examples, explain the why, enforce with lint rules.
Auto-generating component API docs from source
Extract types via react-docgen-typescript, surface in Storybook ArgsTable, enrich with JSDoc.
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.
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.
Linking form-component adoption to fewer a11y bugs
Define both variables, segment by adoption level, control confounders, watch correlation-versus-causation.
Gradual design system adoption in legacy code
Coexistence strategy, codemods for mechanical swaps, lint rules to block regressions, prioritize high-traffic surfaces.
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