Everything in Design & UX, page 3
Make a complex component accessible by design
Define keyboard model and focus order, map to ARIA roles and states, and document interactions for engineers.
Diagnose a slow, laggy Figma prototype
Heavy raster images and effects, layer and node count, and excessive prototype interactions.
Prototype a draggable carousel with On Drag
Lay frames side by side, use On Drag with Smart Animate, and clamp ends.
SVG icons versus icon fonts: technical trade-offs
SVG is vector markup, crisp, multicolor, accessible, and tree-shakeable; icon fonts ship as glyphs, risk anti-aliasing blur, accessibility hacks, and load-failure boxes. Advocate SVG for modern apps.
Limitations of Figma Dev Mode generated code
Dev Mode output is static, absolute-positioned, non-semantic, and ignores responsiveness, state, and your component system; use it for values and structure, then refactor to semantic, tokenized…
Designing and documenting focus order in Figma
Focus order is the sequence keyboard and screen-reader users traverse interactive elements; it should follow meaning and reading order, documented in Figma via layer order, numbered annotations…
Profile card with nested Auto Layout sizing
Outer vertical frame set to fixed width and hug height, an inner horizontal frame for avatar and name, and a bio text set to fill width and auto-height so the card grows down.
Building a scalable icon system in Figma
Standardize a grid, size, and stroke; make each icon a component with consistent naming, use currentColor-friendly single-color paths, and export optimized SVGs.
Cross-platform Button API and implementation
Shared semantic props like variant, size, disabled, loading, onPress; web renders a button element with focus and CSS, native maps to platform touchables and accessibility traits.
A brand-only component consuming core tokens
Keep the unique component in a brand-specific package that depends on core tokens and primitives; do not add it to core.
Architecting density themes with tokens
Components reference semantic spacing tokens; a density theme repoints those tokens via CSS variables on a wrapper, so one stylesheet adapts.
Breaking token changes across multiple themes
A change is safe if every theme still satisfies the token's contract and contrast; dangerous if it breaks one theme, like a value that fails contrast in high-contrast mode.
Automating a breaking design token rename
Ship a codemod to rewrite old token references, add a deprecation alias mapping old to new during a transition window, document the change.
Backporting a critical fix to an older major
Backport the fix to the supported older major as a patch, leveraging a documented support window and maintenance branches.
Contribution model for a multi-framework system
Web Components core with thin React and Vue wrappers, shared tokens and spec, contribution rules requiring core-plus-wrapper changes, conformance tests.
Automated detection of deprecated component usage
Machine-readable deprecation metadata, AST scanning across repos, scheduled jobs, per-team dashboards and PR-level warnings with codemod links.
Automating design system standards enforcement
Custom ESLint and Stylelint rules for tokens and APIs, a11y testing with axe, editor and pre-commit hooks, blocking CI gates plus visual regression.
Managing cross-framework parity in a design system
Shared token and spec source of truth, optional Web Components core, per-framework wrappers, a parity matrix, coordinated releases.
Governance for a multi-brand design system
Brand-agnostic core consuming semantic tokens, per-brand token themes, contribution rules blocking brand conditionals in core.
Challenges of a federated contribution model
Federation scales velocity but needs governance, RFCs, contribution guidelines, automated quality gates, and core review.
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