Advanced everything in UI Design & Figma
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…
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 establish design tokens in Figma and sync with production?
Tests design-to-code architecture. A strong answer outlines primitive-to-semantic tokens in Tokens Studio, W3C DTCG JSON synced to Git, and Style Dictionary transforms in CI/CD. Red flag: manual exports or treating Figma styles as the source of truth.
How would you automatically audit WCAG AA contrast in Figma?
This tests Figma plugin vs REST API color extraction limits. Good answers contrast live traversal with export-based analysis, cite WCAG AA ratios of 4.5:1 and 3:1, and note opacity. A red flag is assuming the REST API can sample pixels without image export.
Design a flexible Table component in Figma with slots
Tests Figma Slots to avoid variant bloat. Answer: Cell variants; Row as a horizontal Slot with zero padding for dividers/hover; Table as a vertical Slot for rows plus a header Slot; componentize the configured row for bulk edits.
Describe a workflow to sync Figma tokens to front-end code
Tests if you see tokens as version-controlled code. Strong answer: Tokens Studio pushes W3C DTCG JSON to Git; CI runs Style Dictionary to emit CSS or JS. Red flag: saying the artifact is a Figma file or manual spec sheet.
How would you extract Figma Variables via REST API for Style Dictionary?
Tests Figma Variables to Style Dictionary architecture. Outline: paginate REST endpoint, map modes/aliases to W3C draft JSON, then run Style Dictionary in CI from tokens folder. Red flag: raw API payloads without type normalization or alias resolution.
How do you migrate a breaking change in a mature design system?
This tests organizational change management at scale, not just code changes. A strong answer covers SemVer major versioning, beta testing with key consumers, phased deprecation timelines, and automated file audits.
Super button versus composition: discuss trade-offs and scalability
Tests combinatorial explosion and API trade-offs in design systems. Contrast the super button's exponential growth with composition's explicit APIs and linear scalability, noting governance needs. Red flag: absolutism or ignoring type safety and tree-shaking.
Build a responsive feature grid with nested Auto Layout and component properties
This tests nested Auto Layout fluency for responsive grids. Strong answer: vertical section frame with wrapping horizontal row, cards with 280 px min widths, and component properties to swap content. Red flag: duplicating static artboards per breakpoint.
Structure a responsive nav bar using variants and Auto Layout
One component set with desktop/mobile variants; horizontal Auto Layout with wrap for links, then hamburger and vertical overlay.
How would you configure a wrapping filter tag container and its properties?
This tests horizontal wrap vs grid and tuning container and child resizing. Set the container to horizontal auto layout with wrap, adjust spacing and padding, and set tags to hug contents. Red flag: confusing wrap with grid or suggesting manual breaks.
How would you structure Figma colors for light and dark themes?
Fluency with token layers and Figma's mode-aware raw values. Use aliased color variables for semantics, switch themes via variable modes, and apply variables to styles not relying on styles for modes. Suggesting styles handle theming instead of variables.
How do you optimize nested Auto Layout for performance?
Tests architectural restraint and layer complexity in Figma. Strong answers use Grid and Wrap to avoid deep nesting, remove redundant groups, and favor component instances. Red flag: proposing invisible spacers or manual positioning hacks.
How do you apply systematic rules to asymmetrical layouts predictably?
Grid and spacing tokens as guardrails; deliberate ratios create asymmetry, not random offsets; engineers get rules, not pixels.
How would you structure a multi-theme color system in Figma and CSS?
Primitives and Semantic collections with theme modes; pipeline to CSS variables; components use semantic tokens only.
Use Fitts's Law to size and place primary vs secondary mobile actions
Large primary actions in easy thumb zones; secondary actions farther but keep minimum targets.
How do you model and articulate long-term design debt cost to stakeholders?
Estimate refactor hours and support tickets; show fixes cost 3-5x more later; map inconsistency to trust erosion.
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