Refactor a legacy UI for accessible DOM flow
WHAT IT TESTS: deep accessibility beyond ARIA. OUTLINE: align DOM order with reading order, use semantic landmarks and headings, and ensure a sensible tab order with managed focus. RED FLAG: relying on ARIA to patch a div soup with broken source order.
Manage light and dark themes with Variables and Modes
WHAT IT TESTS: token-driven theming in Figma. OUTLINE: separate primitive and semantic variables, define light and dark modes in one collection, and bind UI fills to semantic tokens. RED FLAG: duplicating screens per theme or hardcoding hex values.
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.
Shopify's 0% to 100% Fix: Design Dialects Over Rigidity
Shopify Polaris hit 0% completion for gloved warehouse pickers until a dialect with 90px targets and dark UI hit 100%, cutting onboarding from three weeks to one shift. Atlassian formalized this into a three-tier Flexibility Framework. Rigid systems break.
Vienna Circle Café Culture Holds Web Civility Lessons
Vienna Circle's 1928-34 meetings kept Gödel and Wittgenstein productive despite vicious feuds. Leader Moritz Schlick and lingering-friendly cafés turned conflict into collaboration.
8 Free Personas Spot Accessibility Issues in Design
8 free accessibility personas shift designer burden from memorizing WCAG to recognizing exclusion during work. Applying Nielsen's heuristic #6 to creators means fewer bad websites from good designers. Add them to your design critiques this sprint.
How would you architect Figma for multi-platform, multi-team products?
This tests design-ops systems thinking at scale. A strong answer outlines a tiered library model: platform-agnostic primitives, platform-specific components, and team files consuming shared libraries, plus governance for breaking changes.
How would you structure design and Figma for phased rollout?
This tests whether you can architect Figma for parallel flag rollouts. A strong answer covers branch pages, versioned components tied to code flags, and a cleanup timeline. A red flag is a single-file replacement or big-bang launch with no coexistence plan.
Describe your process for preparing a high-fidelity Figma file for developer handoff
Tests operationalizing the design-engineering boundary. Strong answers cover file structure, auto-layout tokens, responsive annotations, all UI states, and exported assets with naming conventions.
How do you handle a technically complex interaction and propose Figma alternatives?
Cross-functional negotiation and rapid prototyping under constraint. Defer judgment, quantify delay, co-define success, then use Figma variants and low-fi prototypes to test trade-offs. Never sacrifice UX before grasping engineering effort or business impact.
First Figma steps to turn a brief into low-fi concepts
This tests whether you structure IA before pixels. Strong answers audit the brief, map flows with simple frames, block out grayscale wireframes at target breakpoints, and annotate for async review. Red flag: jumping straight to components or color.
How would you architect interdependent filter variables in a complex dashboard?
Tests reactive variable graphs, not interaction tangles. Strong answers centralize Figma variables, bind component properties to them, and chain conditional actions to derive downstream state. Red flag: duplicating frames instead of using variables and logic.
Describe how you would use variables and conditional logic to simulate input validation
Tests dynamic state management in Figma prototypes. Strong answers use a string variable bound to the password field, check length on submit, and conditionally route to error or success. Red flag: hardcoding static frames without variables.