Intermediate everything in Design Systems, page 2
Challenges of breaking changes in a design system
Technical (semver, codemods, coexistence) and organizational (comms, migration support, timelines) challenges.
Modeling a confirmation action for voice
Model confirmation as a modality-agnostic intent, add voice tokens (prompts, accepted phrases, reprompts, timeouts), and map intent to each modality.
Responsive Tabs with one consistent API
One stable public API (items, value, onChange), internal swap of presentation by breakpoint, and shared selection state.
Sharing logic, native UI across platforms
Shared module (e.g. Kotlin Multiplatform) for state/business rules, platform-native UI consuming it, and a clean interface boundary.
Versioning and distributing multi-platform tokens
JSON source, Style Dictionary transforms per platform, semantic versioning, and per-platform package registries in CI.
CSS custom properties versus Sass for theming
Custom properties are live and cascade for dynamic switching; Sass variables compile away.
Architecting a themeable React component library
A ThemeProvider supplying tokens through Context, components reading them, and CSS variables for performance.
Structuring tokens for brand and sub-brand inheritance
Tiered tokens (primitive, semantic, component), sub-brands override only semantic aliases, and references keep inheritance live.
Tracking design system component usage and versions
Static scan of code or lockfiles, a central reporting store, and a dashboard; data drives deprecation and roadmap.
Quantifying migration cost for a major release
Pre-release, scan codebases for affected usages and estimate engineer-hours; post-release, track actual upgrade lead time and effort.
Designing a UI consistency score
Combine signals like token vs hard-coded values, design-system vs off-system components, and override rates, then automate via AST scans and CI.
Governance model for specialized contributions
Define a governance model, RFC and shared-need gate, tiered intake (core vs community), CI and CODEOWNERS review, then versioned release.
Designing a component deprecation process
Announce with a replacement and timeline, mark deprecated with runtime and lint warnings, provide codemods, then remove only in a major release.
Classifying a visually breaking padding change
A layout-shifting padding change is effectively breaking, so major; release with visual diffs, a migration note, and a token or opt-in path.
Building a design system quarterly roadmap
Combine usage and adoption data, support tickets, stakeholder interviews, and a debt ledger into a scored backlog with a deliberate debt allocation.
Designing a contribution model with quality gates
Define a federated model, branch-and-PR flow, required reviews, and automated gates for tests, a11y, and visual regression.
Accessible toasts with ARIA live regions
A persistent live region, polite vs assertive by urgency, role status or alert, content injected after mount.
Enforcing an accessible name on icon-only buttons
Require aria-label via the type system for icon-only variants, warn at runtime, decorate the icon as aria-hidden.
ARIA roles and keyboard nav for a Tabs component
Tablist, tab, tabpanel roles with aria-selected and aria-controls; arrow keys move tabs, Tab moves to the panel via roving tabindex.
Syncing design tokens from Figma to code
Export Figma variables to a token spec, transform with Style Dictionary into platform outputs, automate via CI.
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