More in Design & UX — page 3
Make a complex component accessible by design
WHAT IT TESTS: designing accessibility for non-standard widgets, not just styling. OUTLINE: define keyboard model and focus order, map to ARIA roles and states, and document interactions for engineers.
Diagnose a slow, laggy Figma prototype
WHAT IT TESTS: ability to debug Figma performance systematically. OUTLINE: heavy raster images and effects, layer and node count, and excessive prototype interactions. RED FLAG: blaming the device or vaguely saying delete things without a method.
Prototype a draggable carousel with On Drag
WHAT IT TESTS: practical mastery of Figma interactive prototyping. OUTLINE: lay frames side by side, use On Drag with Smart Animate, and clamp ends. RED FLAG: reaching for On Click taps instead of drag, or forgetting boundary states.
SVG icons versus icon fonts: technical trade-offs
WHAT IT TESTS: Icon delivery trade-offs. OUTLINE: 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
WHAT IT TESTS: Realistic handoff expectations. OUTLINE: 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
WHAT IT TESTS: Accessibility of keyboard navigation. OUTLINE: 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
WHAT IT TESTS: Auto Layout resizing rules. OUTLINE: 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
WHAT IT TESTS: Systematic, dev-friendly icon design. OUTLINE: 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
WHAT IT TESTS: API parity vs platform-specific implementation. OUTLINE: 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
WHAT IT TESTS: Layering brand-specific components. OUTLINE: 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
WHAT IT TESTS: Density via token layering. OUTLINE: 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
WHAT IT TESTS: Token change safety under multi-theme. OUTLINE: 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
WHAT IT TESTS: Token migration automation. OUTLINE: 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
WHAT IT TESTS: Maintenance branch and backport strategy. OUTLINE: 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
WHAT IT TESTS: Multi-framework architecture and process. OUTLINE: 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
WHAT IT TESTS: Deprecation auditing pipeline. OUTLINE: 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
WHAT IT TESTS: Shift-left enforcement tooling. OUTLINE: 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
WHAT IT TESTS: Cross-framework parity strategy. OUTLINE: 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
WHAT IT TESTS: Multi-brand architecture and governance. OUTLINE: Brand-agnostic core consuming semantic tokens, per-brand token themes, contribution rules blocking brand conditionals in core.
Challenges of a federated contribution model
WHAT IT TESTS: Federated contribution mechanics. OUTLINE: Federation scales velocity but needs governance, RFCs, contribution guidelines, automated quality gates, and core review.