More in Design & UX — page 22
How would you use Auto Layout to build a responsive card?
Tests Figma Auto Layout direction, padding, and resizing rules. Answer: stack header, image, and text vertically with a fixed gap; set text to fill width and hug height; wrap in a scaling frame. Red flag: absolute positioning instead of structured Auto Layout.
Why use button variants instead of separate components per state?
Tests Figma component set organization and scalability. Strong answers cite flexible property mixing, reduced combinatorial bloat, and cleaner dev handoff. Red flag: saying only "it's cleaner" without naming navigability or system integrity.
How do you populate one overlay for three profiles using variables?
Tests Figma variables and advanced prototyping. Use Set variable actions on each profile to update a string variable bound to a single overlay's name, plus instance swap for the avatar, then open that overlay.
How would you conditionally enable Submit after checking a terms checkbox?
Tests Figma advanced prototyping with boolean variables and conditionals. Strong answer: create a boolean for checkbox state, set it on click, then conditionally enable Submit only when true.
Create a counter where clicking '+' increases the number by one
Tests Figma number variables and Set variable action. Use a number variable on the text, then add an On click trigger on the plus button with Set variable and an expression to add one. Red flag: using duplicate frames instead of a single dynamic variable.
What conflicts occur when two designers edit shared styles simultaneously?
Tests real-time style propagation. Strong answers note Figma instantly updates every linked object, so uncoordinated color edits surprise the second designer. Best practice: agree on ownership and publish via the team library.
How do you restore one component from Figma version history?
Tests whether you know version history is file-level. Answer: open the file name menu, show version history, find the ~1h autosave, duplicate it to a new file, copy the component, paste back. Red flag: restoring the entire old version and losing later work.
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 identify responsive breakpoints in Figma for CSS?
Tests if you derive CSS logic from Figma structure, not pixels. A strong answer checks auto layout direction changes, wrap toggles, and resizing rules to find behavior shifts, then maps those widths to queries.
How do Figma variants influence component code structure?
Tests design-to-code translation and component API modeling. Map variant properties to semantic props like size and type; handle interactive states internally via CSS. Prioritize property names over pixel values.
How would you map Figma Variables to CSS Custom Properties for tokens?
This tests bridging Figma variable collections and modes into maintainable CSS. A strong answer maps collections to semantic CSS custom properties, supports mode switching via data attributes, and mirrors design system naming.
Translate Figma Auto Layout padding, direction, and spacing to Flexbox
Tests your ability to bridge design tools and CSS layout mechanics. Match direction to flex-direction, padding to gap or container padding, space-between to justify-content, and hug/fill to flex-grow or flex-shrink.
How do you export and optimize a Figma SVG for web?
This tests your design-to-code workflow. A strong answer covers: selecting the vector layer, adding an SVG export in the right sidebar, and running the output through SVGO to strip metadata and flatten transforms.
Walk me through inspecting a component's styling in Figma Dev Mode
WHAT IT TESTS: Dev Mode handoff workflow vs Design Mode. ANSWER OUTLINE: Press Shift+D; find the ready-for-dev frame in the left sidebar; click to center it; inspect colors, typography, and spacing. RED FLAG: Staying in Design Mode or editing the file.
How do you indicate sort state accessibly in a data table?
WHAT IT TESTS: Communicating sort state without relying on color alone. ANSWER OUTLINE: Use shape-differentiated icons, annotate aria-sort on the active header, and maximize the button click target.
How do you enforce WCAG touch target minimums in Figma?
Tests WCAG 2.2 SC 2.5.8 and design-system governance. A strong answer cites the 24x24 CSS pixel minimum and spacing exception, then covers Figma component constraints and linting. A red flag is dumping accessibility on developers without design guardrails.
Design the keyboard interaction flow for a modal dialog
Your grasp of accessible focus management per WAI-ARIA dialog patterns. Cover initial focus rules, Tab trapping inside the modal, Escape to close, and restoring focus to the trigger on exit.
Minimum WCAG AA contrast for normal vs large text and Figma checks
This tests WCAG AA contrast thresholds and Figma operationalization. A strong answer states 4.5:1 for normal text and 3:1 for large text, then describes using Figma's native contrast panel or Stark to audit color pairs.
What is the accessibility problem with color-only status and two fixes?
This tests WCAG 1.4.1 Use of Color: red-green status is invisible to many colorblind users. A strong answer names two non-color cues like icons or text labels. A red flag is claiming high contrast alone fixes the problem without a secondary visual indicator.
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.